PDA

View Full Version : navigation and CSS



Charisma
Mar 3rd, 2012, 03:53 PM
I have this navigation and it was centered perfect until i decided to delete a link, and now i can't center it. can someone help?


#container {
height:330px;
margin:0 auto;
width:610px;

}

ul#list-nav {

/*margin:20px;*/

margin:20px auto 0;

padding:0;

list-style:none;

/*width:525px;*/

width:505px;

}

ul#list-nav li {

/*display:inline;*/

float:left;

}

ul#list-nav li a {

text-decoration:none;

padding:5px 0;

width:100px;

background:#333;

color:#fff;

/*float: right;*/

display:block;

text-align:center;

border-left:1px solid #fff;

}

ul#list-nav li a:hover {

background:#666;

color:#000;

}

#about {
margin:0 auto;
width:848px;
}

#sites {
height:auto;
margin:0 auto;
width:848px;
}




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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Style-Type" content="text/css">

<title>Cj Web Consulting - Home</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div id="container">
<div id="banner">

<img src="images/newbanner.jpg" width="610" height="330" alt="banner" >
</div>

<ul id="list-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</div>

</body>

</html>

dan-dan
Mar 3rd, 2012, 04:30 PM
Move width:100px; from ul#list-nav li a to ul#list-nav li and change the 100px to 25%.

Charisma
Mar 3rd, 2012, 04:40 PM
Thank you very much
:)

Charisma
Mar 3rd, 2012, 06:54 PM
I ran into a problem. I realized my logo was to big, and now it screwed up my navigation again. This is what i have now.


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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Style-Type" content="text/css">

<title>Cj Web Consulting - Home</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div id="container">
<div id="banner">

<img src="images/newbanner.jpg" width="300" height="162" alt="banner" >
</div>

<ul id="list-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</div>

</body>

</html>




#container {
height:162px;
margin:0 auto;
width:300px;

}

ul#list-nav {

/*margin:20px;*/

margin:20px auto 0;

padding:0;

list-style:none;

/*width:525px;*/

width:505px;

}

ul#list-nav li {

/*display:inline;*/

float:left;

}

ul#list-nav li a {

text-decoration:none;

padding:5px 0;

width:100px;

background:#333;

color:#fff;

/*float: right;*/

display:block;

text-align:center;

border-left:1px solid #fff;

}

ul#list-nav li a:hover {

background:#666;

color:#000;

}

#about {
margin:0 auto;
width:848px;
}

#sites {
height:auto;
margin:0 auto;
width:500px;
}

dan-dan
Mar 3rd, 2012, 07:11 PM
I don't get why you changed what you did back to what caused the problems.

Again:
Move width:100px; from ul#list-nav li a to ul#list-nav li and change the 100px to 25%.

Also now that you changed the width of the banner you need to change the width oful#list-nav. Change the width there to width:100%;.

You might find it easier to work with % rather than px. That will help keep everything relative to each other.