Member Avatar for Bensirpent07

Hello, as you can see here [link removed] You see that the text "Weblup" is sort of ofset to the other <li> elements. Now I do know that it is a different text size but it's basically the same size as the others due to padding. So I want to know how to make it all line up. Also just to let you know Weblup will be more to the left too, so I'm just throwing that out there. I do know the reason it's out of line is because of text-size. So any advice? HTML AND CSS INCOMING!!!

HTML

<!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>Weblup | Bringing Your Business To Life!</title> <link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/header-background.css" /> <link rel="stylesheet" type="text/css" href="css/header-menu.css" /> <link rel="styelsheet" type="text/css" href="css/css-reset.css" /> </head> <body> <div id="menus"> <ul class="menu"> <li id="logo">WEBLUP</li><li id="active">HOME</li><li>ABOUT</li><li>CONTACT ME</li><li>JOBS</li><li>NEED A WEBSITE?</li><li>GALLERY</li> </ul> </div> </body> </html>

CSS

@charset "utf-8";
/* CSS Document */
ul.menu li{
display: inline;
color: white;
padding: 5px 10px;
font-family: 'Dosis', sans-serif;
font-weight: 500;
letter-spacing: -1px;
font-size: 20px;
}
ul.menu li:hover{
display: inline;
background-color: white;
color: #669934;
padding: 5px 10px;
font-family: 'Dosis', sans-serif;
font-weight: 500;
letter-spacing: -1px;
font-size: 20px;
}
ul.menu li#active{
display: inline;
background-color: white;
color: #669934;
padding: 5px 10px;
font-family: 'Dosis', sans-serif;
font-weight: 500;
letter-spacing: -1px;
font-size: 20px;
}
li#logo{
color: white;
padding: 0px 10px;
font-family: 'Dosis', sans-serif;
letter-spacing: -1px;
font-size: 30px;
}
ul.menu{
float: right;   
}

div#menus{
width: 958px;   
margin: 0 0;
}
Edited by happygeek because: removed link
  • 2 Contributors
  • 6 Replies
  • 163 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Bensirpent07
Member Avatar for JorgeM

if you apply position:relative; top: 0.1em, it lines up. I'm sure there are other approaches as well depending on what you are trying to achieve.

Member Avatar for Bensirpent07

Ok I'll have to try this method... now this is just a question, may I ask what the top: 0.1em does?

Member Avatar for JorgeM

Since the element now had relative positioning, you are telling the browser to move it down away from its top edge.

Member Avatar for Bensirpent07

Ah ok this did align it thank you. But now it seems I can't figure out how to center. I tried centering the div and ul elements but they don't seem to go in the middle. You can tell I haven't had much experience with lists and tables as much as a should haha. Also this is another question of interest, I have a css reset but for some reason body is automatically getting an 8px margin from the user style sheet.

Member Avatar for JorgeM

There are a few ways to handle this. since your div takes up 100% of the width, you can just style the div#menus with text-align: center

Member Avatar for Bensirpent07

Thanks a bunch :D you helped a lot, 1000 brownie points to you! I'll have to keep doing some research into my HTML and CSS that's for sure haha. If you want to see it's coming along you can visit [link removed] . It will get updated from time to time, and should get improved. Thank you for helping me with my navigation bar :D

Edited by happygeek because: link removed
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.