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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Positioning Distorted when minimize browser size

    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:



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



    My Html code is:
    Code:
    </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>
    My css code is:
    Code:
    .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;
    }

    Any help would be much appreciated, cheers!

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    I think you dont need positioning here for your code...
    Also use <DCOTYPE> in your HTML page.

    <img> tag is also invalid

    Valid <img> tag is

    Code:
    <img src="images/mypic.png" width="300" height="200" alt="Alternate text if image not loaded properly />

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,297
    Thanks
    10
    Thanked 282 Times in 281 Posts
    In addition to what's been said, this definition:
    Code:
    .header{
    z-index: -1;
    position:absolute;top:0;left:0;width:100%;height:100%;
    }
    isn't going to work right for a fixed format, as it will scale up and down based on the window size. Change the height to a px-based one, 256px looks to be what you want.

    And yes, I don't know where all the new folks are getting instruction to use absolute positioning, but it's not a good way to go about things. Your header for example, as the first element in your html, will be at the top of the page. You don't need to force it there. Your navbar, as the first element after your header, will be just below it. Again, no need to force it there.

    Dave

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey thanks a lot guys for solving my problems, 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? cheers
    Last edited by iknowyou; 09-16-2011 at 10:56 PM.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    As I already suggested, dont use positioning for your layout, It is used for complex layouts only.

    FYI, left, top, bottom and right properties dont work until you won't define position to relative/absolute and fixed. So no need to define it.

    Use following code to reset all element's margin and padding to 0 (zero) and make this habit to add at top of you CSS properties in stylesheet:

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

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    The whole header is done in a weird way. You should have a div with background-color: red; background-image: (that logo); background-repeat:no-repeat; margin:0; padding:0

    and then make sure your navbar class has margin:0 as well
    Last edited by Kremlin; 09-17-2011 at 08:18 AM.

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by vikram1vicky View Post
    ...and make this habit to add at top of you CSS properties in stylesheet:

    Code:
    * {
    margin:0;
    padding:0;
    }
    It'd be nice if these were the default values imo. Definitely for margin, maybe not for padding though...

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Kremlin View Post
    It'd be nice if these were the default values imo. Definitely for margin, maybe not for padding though...
    As per my knowledge, we should keep in mind the BOX MODEL, in which, margin, padding, border, width and height effect your layout equally (depends on layout)

    It would be great if you know about box model, if not see these links:

    http://www.w3.org/TR/CSS2/box.html

    http://css-tricks.com/2841-the-css-box-model/


  • Users who have thanked vikram1vicky for this post:

    Kremlin (09-17-2011)

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    I generally try to think in terms of Box Model when making pages

    Thanks for the links, I was looking for that sort of thing recently and couldn't find it -- although I said i try to think in terms of Box Model, I actually didn't know that it was called that and sometimes have had trouble picturing the layout of my page because I don't fully understand it.
    Last edited by Kremlin; 09-17-2011 at 10:30 AM.

  • #10
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the replies guys will try it out tomorrow.

    again thanks a bunch


  •  

    Posting Permissions

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