0

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
3
Views
5 Years
Discussion Span
Last Post by JorgeM
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.