Positionig menu elements in percentage doesn't work

**American horizo** · 02-28-2013 11:36 AM

Hi, i've a simple code of a web page formed by a body, a menu and nested titles inside the menu..
What i want is that elements inside to te menu are vertically positioned at centre of it, so, margin-top of title should is 50%

The problem is that the code doesn't work, and seems that percentage always refers to the body height element instead of menu height..
My doubt is: positions setted in percentage, always refers to direct parent of an element, or deep hierarchies are not supported, so, it alway refers to the body?

PHP Code:




<body>



<div id="menu">

   <div id="info">INFO</div>

</div>



</body>





questo è il CSS

PHP Code:




html, body

{  

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

  

}





#menu

{

   position:relative;

   top: 0; 

   left: 0; 

   background: rgba(0, 102, 206, 0.5);

   min-width: 100%;

   min-height:4%;

   max-height:4%;

   color:#FFF;

   float:left;

 

}



#menu div#info

{

   margin-left:7%;

   margin-top:50%;

   float:left;

 

}

**wmwong** · 02-28-2013 12:17 PM

There is no easy way to do vertical alignment in HTML or CSS. Unlike horizontal alignment where you can do "width: 100px; margin: 0 auto;", there is no equivalent for vertical alignment. My suggestion would be to add padding on the top and bottom that are equivalent. This would centre your title vertically. Something like "#info { padding: 10px 0; }"

Also, your #menu CSS has position relative with top 0 and left 0. Unless you plan on changing the values for top and left or plan to position an inner element absolutely, these 3 lines probably aren't needed.

And since info is an id, you can just specify "#info" instead of "#menu div#info".

**American horizo** · 03-05-2013 04:58 AM

thanks

And since info is an id, you can just specify "#info" instead of "#menu div#info".

i just wrote that for keep clear the hierarchy

Thread: Positionig menu elements in percentage doesn't work

Thread Tools

Display

Positionig menu elements in percentage doesn't work

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions