...

View Full Version : Trouble positioning divs in a header



stuartw
11-01-2008, 12:59 PM
Please could you help me with a problem I am having positioning divs in the header of a page I am working on? It is probably a really elementary thing, but I just can't see a way to do it!

The code is attached in a zip file: 6819

The problem I am having is getting the orange bar containing the Search box to move to the bottom of the green header bar. It should be similar to the header at http://www.yorkshiredales.org.uk, but I can only get it next to the 'A's for changing the text size at the top of the header bar. Would the solution simply be to position the search div using css - margins and padding?

Thanks for any help you can give - it is making my head hurt!

Cheers

Stu

oesxyl
11-01-2008, 01:38 PM
Please could you help me with a problem I am having positioning divs in the header of a page I am working on? It is probably a really elementary thing, but I just can't see a way to do it!

The code is attached in a zip file: 6819

The problem I am having is getting the orange bar containing the Search box to move to the bottom of the green header bar. It should be similar to the header at http://www.yorkshiredales.org.uk, but I can only get it next to the 'A's for changing the text size at the top of the header bar. Would the solution simply be to position the search div using css - margins and padding?

Thanks for any help you can give - it is making my head hurt!

Cheers

Stu
can you post a link to your page? usualy people, including me, do not download attached files.

regards

stuartw
11-01-2008, 02:09 PM
can you post a link to your page? usualy people, including me, do not download attached files.

regards

Thanks for the tip - page is at http://www.sillytrouts.me.uk/ydnpa-home-page.htm

Cheers

Stu

oesxyl
11-01-2008, 02:16 PM
Thanks for the tip - page is at http://www.sillytrouts.me.uk/ydnpa-home-page.htm

Cheers

Stu


<div class="header-top-bar-lower"> <br/> <br/> <br/>
</div>

try to remove br tags, all of them.

best regards

oesxyl
11-01-2008, 02:36 PM
Thanks for the tip - page is at http://www.sillytrouts.me.uk/ydnpa-home-page.htm

Cheers

Stu
you have some problem with clearing floats. After you remove br tags, you must fix them else the layout will be broken.

try to put a global reset as first line in your css file:

* { margin: 0; padding: 0}
this way you don't need to set a margin and padding 0 in rest and will remove the browser default setings for them

best regards

effpeetee
11-01-2008, 02:36 PM
This brings it down in IE7.


.headerSearchBox {
width: 210px;
color: #ffffff;
background-color:#c2510f;
float: right;
margin-top:25px;
font-size: 80%;
font-weight: bold;
padding: 2px 0px 0px 0px;
}

Frank

abduraooft
11-01-2008, 03:27 PM
Change the html markup order of headerSearch and textswitch divs in such a way that the textswitch comes first and the other next. After that add clear:right; to #headerSearch in CSS.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum