SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centre a ul vertically inside a div

    Hi everyone,

    I have a ul inside a div and need to center it vertically within the div. The css currently is as follows:

    Code:
    div#nav_main {
    position: absolute;
    top: 101px;
    right: 0;
    width: 812px;
    height: 37px;
    background-color: #be1e2d;
    padding-left: 10px;
    }
    
    div#nav_main h3 {
    position: absolute;
    top: -9999px;
    }
    
    div#nav_main ul {
    height: 37px;
    line-height: 37px;
    background-color: #969;
    }
    
    
    div#nav_main li {
    display: inline;
    width: auto;
    height: 37px;
    margin-right: 0.5em;
    padding-right: 0.75em;
    border-right: 1px solid #fff;
    font-weight: bold;
    text-align: center;
    background-color: #FF3;
    }
    
    div#nav_main a {
    line-height: 20px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background-color: #0F0;
    }
    I wondered if someone could tell me how to do this?

    Thanks in advance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'd need to see the html that goes with that or a link to the page.

    Looking at the css is seems that your ul is already centred. The div is 37px high and the ul is 37px high therefore it is already centred (assuming you have removed the top and bottom margins form the ul).

    I think we need a little more information.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply,

    The following is the html for the page.

    I thought that if I made the ul the same height as the div that it would center but it doesn't.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled</title>
    
    <link href="css/screen.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="outerWrapper">
      <div id="branding">
    
      <h1><a href="index.php">Site</a></h1>
      <p id="tagline">Tagline goes here</p>
      
      <div id="enquiries">
        <h2>Enquiries &amp; Bookings</h2>
        <p>000 000 000</p>
      </div>
      <div id="nav_main">
        <h3>Site areas </h3>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Amenities</a></li>
          <li><a href="#">Tarrifs</a></li>a
          <li><a href="#">Local Attractions</a></li>
          <li><a href="#">Contact Us</a></li>
          <li id="last"><a href="#">Location Map</a></li>
          </ul>
      </div>
    </div>
      <div id="content_main">
        <div id="content_wrapper">
      <ul>
        <li id="about_us"><h3>About</h3>
          <p class="first_para">Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
          <p><a href="#">Learn more…</a></p></li>
        
        <li id="amenities"><h3>Amenities</h3>
          <p class="first_para">Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
          <p><a href="#">Learn more…</a></p></li>
        
        <li id="attractions"><h3>Local Attractions</h3>
          <p class="first_para">Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
          <p><a href="#">Learn more…</a></p></li>
        
            <li id="bookings"><h3>Bookings</h3>
          <p class="first_para">Lupitia tatquis eic tecto ipicate ctenducia quatibusdae dolorro velecaeribea verio maiorep eritium auda cullect ectatius que in ratiur ma vel int es reium, cor reius et volore plabore cus iust aruptatem vendam volorpo rporporio</p>
          <p><a href="#">Learn more…</a></p></li>
        
      </ul>
        </div>
      </div>
      <div id="site_info">
        <p>© 2010, All Rights Reserved.&nbsp; &nbsp;<a href="#">Privacy policy</a> &nbsp; &nbsp;|&nbsp; &nbsp;<a href="#">Terms and conditions</a></p>
        <h4 id="brochure"><a href="#">Download brochure</a></h4>
      </div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to clarify, I'm trying to get the links which are inside the li elements which are inside the ul to center vertically. I thought that if I centered the ul then the others would be centered too but this has happened.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    We must be looking at different things because the anchors are perfectly centred within the ul with a 9px space above and below in firefox and IE.

    The ul itself is offset because you haven't reduce the top and bottom margins as I mentioned in my first post.

    I think you must mean something else but I'm not sure what

  6. #6
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah - it's actually working now. Could have been because I commented out some code earlier and forgot to uncomment.

    Could I ask another question? How do I set the links globally? I've found that if I specifically set a rule for a particular as follows that this works but only for the links in that div:


    Code:
    div#content_main a:link, div#content_main a:visited  {
    	color: #be1e2d;
    }
    
    div#content_main a:hover, div#content_main a:active  {
    	color: #3e6233;
    }
    So then I need to set another lot of rules for say the site_info at the bottom of the page separately.

    Is there a way to just set the links for the whole site?

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Well, closer to the top of your stylesheet, you could have

    a {
    styles;
    }

    a:visited {
    styles;
    }/*only mention if you want visited styles*/

    a:focus, a:hover, a:active {
    styles;
    }

    then your current styles will override the global styles because they are more specific:
    div#content_main a:link, div#content_main a:visited

    "a" alone can set styles for all the :pseudoclass versions, which is nice because then you only need to mention the :pseudoclass versions for what you want different.

    Like if the only difference between regular and hovered/focussed links is an underline, then "a" has all the styles and then :hover and :focus have just the line about the text-decoration.

  8. #8
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's perfect. Thanks so much.


Bookmarks

Posting Permissions

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