CSS Positioning Distored when minimize browser size

Discussion in 'CSS' started by Iknowyou, Sep 15, 2011.

0
  1. #1
    Hey guys I just started learning CSS today, I am just wondering how to solve this problem:

    The below image is what I want the site to appear as even if I decrease my browser size:

    [​IMG]

    But what happens is if i minimize my browser it becomes like this:

    [​IMG]

    My Html code is:
    <html>
    <head>
    <link rel='stylesheet' href='main.css'>




    </head>




<body>


<div class='header'>


<img src="header2.jpg" width="100%">
</div>

<div class='navbar'>
<div class='button'> <a href='#'>Home</a> </div>
<div class='button'> <a href='#'>About</a> </div>
<div class='button'> <a href='#'>Contact</a> </div>
<div class='button'> <a href='#'>Profile</a> </div>
<div class='button'> <a href='#'>Careers</a> </div>
<div class='button'> <a href='#'>Admission</a> </div>
<div class='button'> <a href='#'>FAQ</a> </div>
</div>




</body>


</html>
    Code (markup):
    My CSS code is:
    .header{
z-index: -1;
position:absolute;top:0;left:0;width:100%;height:100%;
}


.navbar{
width: 100%;
height: 25px;
font-family: verdana;
font-size: 13px;
line-height: 22px;
font-weight: bold;
border: 1px solid #000;
background: url(navbar.jpg) repeat-x;
position: absolute;      
top: 256px;     
left: 0
}


.button a{
float: left;
width: 100px;
height: 25px;
color: #000;
text-decoration: none;
text-align: center;
}


.button a:hover{
float: left;
width: 100px;
height: 25px;
color: #fff;
text-decoration: none;
text-align: center;
background: url(navbar_roll.jpg) repeat-x;
}
    Code (markup):

    Any help would be much appreciated, cheers!
     
    Iknowyou, Sep 15, 2011 IP
  2. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #2
    you have your <img> set to a width of 100% so if you shrink your screen size, the image attempts to fit within the 100% available space and by default, the height ( not specified ) attempts to keep aspect ratio.
     
    workingsmart, Sep 16, 2011 IP
  3. Iknowyou

    Iknowyou Greenhorn

    Messages:
    73
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    hey thanks a lot that was really helpful :)



    But one problem I am having now is that after I've taken position: absolute off i seem to be getting about 5px of space from the top and left side of my page even though for my image and navbar i have top:0; and left:0;


    How do i fix that so the image and navbar starts from the beginning of the left side of the page
     
    Last edited: Sep 16, 2011
    Iknowyou, Sep 16, 2011 IP
  4. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #4
    try adding to your css 
    

body{margin:0;padding:0}
    Code (markup):
     
    radiant_luv, Sep 22, 2011 IP