PDA

View Full Version : Error



jamesk
Jan 31st, 2010, 08:04 PM
Hey,

I am designing a new site for a client, now I want the navigation bar above the main home page box, but It's coming out wrong. I would like both Home navigation links to be on the same line, but I can't work it out :-\

CODE:

<html>
<head>
<title>SJK Furniture Agencies</title>
<style type="text/css">
.main {
border-bottom: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
background-color: CDDCDD;
width: 50%;
font-family: Verdana;
font-size: small;
}
.nav {
width: 100%;
background: #CDDCDD;
border: 1px solid #404040;
color: #404040;
display: block;
margin-top: 8px;
padding: 5px 4px 4px 10px;
text-transform: none;
font-family: verdana;
font-size: small;
text-decoration: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.nav:hover,.active {
width: 100%;
background:#f8f9fa;
border:1px solid #404040;
color:#303030;
font-family: verdana;
font-size: small;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.title_page {
width: 50%;
font-family: verdana;
font-size: X-Large;
border: 1px #303030 solid;
background-image:url('title.png');
color: #FFFFFF;
font-weight: bold;
}
.nav_box {
width: 10%;
}
</style>
</head>
<body style="color: #000000; background-color: #EEFEEF">
<body>
<div align="center">
<img src="sjklogo.png">
<div align="center"><div class="nav_box"><a class="nav" href="#">Home</a></div><div class="nav_box"><a class="nav" href="#">Home</a> </div>
<div class="title_page">Welcome...</div>
<div class="main">test</div></div></body>

http://i48.tinypic.com/fm5she.jpg

Excavator
Jan 31st, 2010, 08:36 PM
Hello jamesk,
There are several problems here. You have no DocType - see the link about DocTypes in my sig below. I would recomend an HTML or XHTML Strict.

You are missing a closing tag for a div.
You're using deprecated <center> tag.

Your nav buttons don't go side by side for two reasons.

there is no room for a 100% wide button to have another button beside it
you're not floating your butttons

Try floating them like this -

.nav_box {
width: 200px;
margin: 0 auto;
overflow: auto;
}
.nav {
width: 80px;
float: left;
background: #CDDCDD;
border: 1px solid #404040;
color: #404040;
display: block;
margin-top: 8px;
padding: 5px 4px 4px 10px;
text-transform: none;
font-family: verdana;
font-size: small;
text-decoration: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

<div align="center">
<img src="sjklogo.png">

<div class="nav_box">
<a class="nav" href="#">Home</a>
<a class="nav" href="#">Home</a>
</div>

<div class="title_page">Welcome...</div>
<div class="main">test</div></div></div>


You still need a DocType!! You should have a look at the links in my sig about validation, they will help you a lot.