homepage Welcome to WebmasterWorld Guest from 50.17.162.174
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Center text in nav bar
bsbrilliantmojo




msg:4479182
 7:11 pm on Jul 26, 2012 (gmt 0)

Hey guys, this is a pretty simple fix, i'm just new to CSS.

MY CSS CODE
<style type="text/css">
body {
overflow-y:scroll;
overflow-x:hidden;
margin-top:0px;
margin-right:15%;
margin-bottom:0px;
margin-left:15%; }
</style>
<style type="text/css">
a {
text-decoration:none}
#nav {
position:absolute;
margin-left:100px;
margin-right:auto;
text-align:center;
width:400px;}
#nav {
width:1100px;
float:left;
margin:0 0 3em 0;
padding:0;
list-style:none; }
#nav li {
float:left; }
#nav {
padding-right:50%;
padding-left:50%;
width:1000px;
float:left;
margin:0 0 3em 0;
padding:0;
list-style:none;
background-color:#ffffff;
border-bottom:1px solid #0c00ff;
border-top:1px solid #ffffff; }
#nav li a {
display:block;
padding:8px 50px;
text-decoration:none;
font-size:18px;
font-weight:bold;
color:#000000;
border-right:1px solid #ffffff; }
#nav li a:hover {
color:#0c00ff;
background-color:#ffffff; }
</style>

MY HTML CODE
<ul id="nav">
<li><a href="1">1</a></li>
<li><a href="2">2</a></li>
<li><a href="3">3</a></li>
<li><a href="4">4</a></li>
</ul>



I'm trying to center the text in the middle of my nav bar, can someone help me?

 

Panthro




msg:4479193
 7:25 pm on Jul 26, 2012 (gmt 0)

There's a few things you'll want to change in your code there, but I can't get to it right this second. But, basically, instead of having that second nav div (#nav), it seems like you're trying to create a ul style called "nav". In that case you would want to use "ul.nav" in the place of that second "#nav" and go from there.

And then in the html you'll want <ul class="nav"> instead.

bsbrilliantmojo




msg:4479225
 8:44 pm on Jul 26, 2012 (gmt 0)

Sorry, i'm really new to CSS can you explain better

birdbrain




msg:4479350
 7:03 am on Jul 27, 2012 (gmt 0)

Hi there bsbrilliantmojo,

and a warm welcome to these forums. ;)

Try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
body {
overflow-y:scroll;
background-color:#f0f0f0;
}
#nav {
width:1100px;
border:1px solid #0c00ff;
padding:0;
margin:0 auto;
list-style:none;
text-align:center;
overflow:hidden;
background-color:#fff;
}
#nav li {
float:left;
width:275px;
}
#nav li a {
display:block;
border:1px solid #0c00ff;
padding:8px 0;
margin:2px;
background-color:#ccf;
font-size:18px;
font-weight:bold;
color:#000;
text-decoration:none;
}
#nav li a:hover {
color:#0c00ff;
}
</style>

</head>
<body>

<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>

</body>
</html>


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved