Member Avatar for ben.matthews18

hi,
i am trying to vertical align the text in a block; here's my current html and css -

html -

<ul>
   <li><a href="index.php">Home</a></li>
   <li><a href="aboutme.php">About me</a></li>
   <li><a href="portfolio.php">Portfolio</a></li>
   <li><a href="comingsoon.php">Coming soon</a></li>
   <li><a href="contact.php">Contact me</a></li>
</ul>

CSS -

#nav ul{
    margin:0px;
    padding:0px;
    overflow:hidden;
}

#nav li{
    display:inline;
    padding:0px;
    list-style:none;
}

#nav li a:link{
    font-family:Calibri;
    font-size:18px;
    text-decoration:none;
    text-align:center;
    vertical-align:middle;
    color:#FFF;
    display:block;
    height:40px;
    width:122px;
    float:left;
    margin-left:10px;
    margin-top:30px;
    background-color:#263D46;
}

#nav li a:visited{
    color:#FFF;
    background-color:#263D46;
    text-decoration:none;
}

#nav li a:hover{
    color:#FFF;
    background-color:#528396;   
    text-decoration:underline;
}

#nav li a:active{
    color:#FFF;
    background-color:#263D46;
    text-decoration:none;
}

any help would be appreciated :) thanks

  • 2 Contributors
  • 1 Reply
  • 192 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

First, your CSS is targetting an element with an ID = "nav". You didnt include that in the post so I am not sure if you had that element "wrapping" in your source code. In any event, see the HTML code i pasted below. I "wrapped" your unordered list within a div assigned the id = "nav". That fixes the issue with regard to targetting your elements.

Second, if you want to target li elements, you have to go through the DOM tree properly. For example, "nav" element --> ul --> li. In your code you went from "nav" to li. copy and paste the code I provided below and see if you have any other questions.

<html>
<head>
<title></title>
<style type="text/css">
#nav ul{
    margin:0px;
    padding:0px;
    overflow:hidden;
}
#nav ul li{
    display:inline;
    padding:0px;
    list-style:none;
}
#nav ul li a:link{
    font-family:Calibri;
    font-size:18px;
    text-decoration:none;
    text-align:center;
    vertical-align:middle;
    color:#FFF;
    display:block;
    height:40px;
    width:122px;
    float:left;
    margin-left:10px;
    margin-top:30px;
    background-color:#263D46;
}
#nav ul li a:visited{
    color:#FFF;
    background-color:#263D46;
    text-decoration:none;
}
#nav ul li a:hover{
    color:#FFF;
    background-color:#528396;   
    text-decoration:underline;
}
#nav ul li a:active{
    color:#FFF;
    background-color:#263D46;
    text-decoration:none;
}
</style>
</head>

<body>
 <div id="nav">
  <ul>
   <li><a href="index.php">Home</a></li>
   <li><a href="aboutme.php">About me</a></li>
   <li><a href="portfolio.php">Portfolio</a></li>
   <li><a href="comingsoon.php">Coming soon</a></li>
   <li><a href="contact.php">Contact me</a></li>
  </ul>
 </div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.