www.webdeveloper.com
Results 1 to 3 of 3

Thread: Positionig menu elements in percentage doesn't work

  1. #1
    Join Date
    Jan 2013
    Posts
    83

    Thumbs down Positionig menu elements in percentage doesn't work

    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
    {  
        
    width100%;
        
    height100%;
        
    margin0;
        
    padding0;
      
    }


    #menu
    {
       
    position:relative;
       
    top0
       
    left0
       
    backgroundrgba(01022060.5);
       
    min-width100%;
       
    min-height:4%;
       
    max-height:4%;
       
    color:#FFF;
       
    float:left;
     
    }

    #menu div#info
    {
       
    margin-left:7%;
       
    margin-top:50%;
       
    float:left;
     


  2. #2
    Join Date
    Feb 2013
    Posts
    9
    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".

  3. #3
    Join Date
    Jan 2013
    Posts
    83
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles