CSS Positioning Distorted when minimize browser size

iknowyou

09-16-2011, 09:52 AM

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:

http://i52.tinypic.com/2ih5j86.jpg

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

http://i52.tinypic.com/kd4vwz.jpg

My Html code is:
</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:
.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!

vikram1vicky

09-16-2011, 01:58 PM

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

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

tracknut

09-16-2011, 04:06 PM

In addition to what's been said, this definition:

.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

iknowyou

09-16-2011, 10:27 PM

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

vikram1vicky

09-17-2011, 07:26 AM

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:

* {
margin:0;
padding:0;
}

:)

Kremlin

09-17-2011, 08:15 AM

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

Kremlin

09-17-2011, 08:19 AM

...and make this habit to add at top of you CSS properties in stylesheet:

* {
margin:0;
padding:0;
}

:)

It'd be nice if these were the default values imo. Definitely for margin, maybe not for padding though...

vikram1vicky

09-17-2011, 08:56 AM

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/

:) :)

Kremlin

09-17-2011, 10:26 AM

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.

iknowyou

09-17-2011, 01:44 PM

thanks for the replies guys will try it out tomorrow.

again thanks a bunch