Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Las Vegas, NV
    Posts
    2
    Thanks
    0
    Thanked 1 Time in 1 Post

    alignment to top of browser

    I'd like to align my div all the way to the top of the browser. It always has a small space. I found how to fix this once, but..... I lost it. LOL I thought it was to add a negative margin or padding, something like that.

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Location
    India
    Posts
    7
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Check this
    position: absolute; top: 0px; are the main ingredients.

    #topper
    {
    color: #f0c;
    font-size: 9px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #c00;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 18px
    }

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you post your code? You can also in the mean time try a global reset

    * {margin: 0; padding:0; border: 0;}

    at the top of your stylesheet.
    Teed

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Las Vegas, NV
    Posts
    2
    Thanks
    0
    Thanked 1 Time in 1 Post
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv= "Content-Type" content= "text/html; charset= utf-8">
    <title>Producciones Markiz</title>
    <link type= "text/css" rel= "stylesheet" href= "markiz_styles.css">
    </head>
    <body>
    <div id= "content">
    	<img src="images/markiz.png">
    	<div id="navbar">
    	<pre><a href="aboutus.html"  title="ABOUT US">ABOUT US</a>     <a href="sonidos.html" title="SONIDOS">SONIDOS</a>      <a href="event.html" title="EVENT CALLENDAR">EVENT CALLENDAR</a>      <a href="contact.html" title="CONTACT US">CONTACT US</a></pre>
    	</div>	
    </div>
    </body>
    </html>
    Code:
    body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    
    #content {
    background-image: url(images/content_bg.png);
    width:950px;
    height: 1000px;
    margin:0px auto 0px auto;
    }
    
    a:link {text-decoration: none; color:black}
    A:visited {text-decoration: none; color:black}
    A:active {text-decoration: none; color:black}
    A:hover {text-decoration: underline overline; color: #7fd1e5;}
    ****************************************************************

    The content_bg.png is what I want flush with the top of the browser. It's 950px wide. I want to auto center right/left margins.

    Thanks for the quick replies!!

  • Users who have thanked laCosaNosta for this post:

    sansramm (09-19-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •