Jump to content

div problem


divinedesigns1
 Share

Recommended Posts

i have been messing around with a new style of design *new to me* but my logo keep pushing down my header images, and i would like to know how i can make the logo hang over the header and not push the images down or the header div down

<div id="menu"><div id="top" style="width:100%; height:50px; background-color:#090;"><div class="menu" style="width:1024px; height:50px; margin:0px auto; text-align:center;"><div class="nav" style="width:780px; margin:0px auto; height:50px;"><div class="buttons" style="height:50px; color:#fff; width:80px; line-height:50px; text-align:center; float:left; margin-left:10px;"><a href="">HOME</a></div><div class="buttons" style="height:50px; color:#fff; width:80px; line-height:50px; text-align:center; float:left; margin-left:10px;"><a href="">ABOUT</a></div><div class="img" style="height:208px; color:#fff; width:360px; text-align:center; float:left; margin-left:10px; position:relative;"><a href=""><img src="DDS1 2012 logo.png" width="306" height="208" border="0" /></a></div><div class="buttons" style="height:50px; color:#fff; width:80px; line-height:50px; text-align:center; float:left; margin-right:20px;"><a href="">SERVICES</a></div><div class="buttons" style="height:50px; color:#fff; width:80px; line-height:50px; text-align:center; float:left; margin-left:10px;"><a href="">PROJECTS</a></div></div></div></div></div><div id="header" style="width:100%; height:200px; position:relative; z-index:0;"><img src="RA-Banner.jpg" width="1024" height="225" /></div>

the red text are the codes for the logo which is pushing down the header, i used absolute and relative but those did not work for the logo div, instead it moved the div out of placed, any help or tips would be appreciated

Link to comment
Share on other sites

You could make your menu div position:absolute; top:0; left:0;, make sure it is z-index: above the header div.

thanks

Link to comment
Share on other sites

Don't use position absolute on menu big headache will like occur, its difficult to understand what you really want? IF you want to make the logo image not occupy any space and not interfere with other menu items, take it out the flow using position: absolute on it instead OR its container parent elements with at least top and left properties defined, BUT you MUST also use position: relative; on #menu to contain it.

 

Edit:

Edited by dsonesuk
Link to comment
Share on other sites

Don't use position absolute on menu big headache will like occur, its difficult to understand what you really want? IF you want to make the logo image not occupy any space and not interfere with other menu items, take it out the flow using position: absolute on it instead OR its container parent elements with at least top and left properties defined, BUT you MUST also use position: relative; on #menu to contain it.

 

Edit:

alright, ill try your way once i get home, since astralaaron way worked

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...