PDA

Click to See Complete Forum and Search --> : link go down and not to the side ?

chris9902
10-24-2003, 10:19 AM
i am making a site and am not really very good with CSS.

i have a logo pic up top then under it i want 6 links going left-2- right.

but when i try to do it they go down and not to the side

this is the code; (ignore the colors they are for testing)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#logo {
position:absolute;
width:700px;
height:80px;
top:20px;
left:0px;
background-color:#999999;
border-top:5px solid #000;
}

div#nav {
position:absolute;
width:700px;
height:25px;
top:105px;
left:0px;
background-color:#555555;
}

div#nav a:link {
display:block;
background-color:#000099;
text-decoration: none;
border: 1px solid #ff0000;
width:100px;
height:20px;
}

div#nav a:visited {
display:block;
background-color:#000099;
text-decoration: none;
border: 1px solid #ff0000;
width:100px;
height:20px;
}

div#nav a:hover {
display:block;
background-color:#000000;
text-decoration: none;
border: 1px solid #ff0000;
width:100px;
height:20px;
}

body {
background-color:#f4f4f4;
}
</style>
</head>

<body>
<div id="logo"></div>
<div id="nav"><a href="yaoo.com">yahoo</a></div>
</body>
</html>
can you help me:)
MotherNatrsSon
10-24-2003, 10:34 AM
Try changing display: block to display: inline or removing the display attribute altogether.

MNS
pyro
10-24-2003, 10:42 AM
Also try cascading your CSS... It'll be much shorter, cleaner, and easier to read. If you declare a value in a parent element, the will cascade to child elements. If elements have the same styles, use the same definitions, etc.
spufi
10-24-2003, 10:46 AM
Taken from my own site. I use XHTML, so that's why the <br> and <img> tag are slightly different. I added a space for the special character code so it would show up.

.menu {
text-align:center;
}
.menu a {
text-decoration:none;
font-size:100%;
font-weight:bold;
}
.menu a:link, .menu a:visited {
color:#FF6600;
}
.menu a:hover {
text-decoration:none;
color:#FFF;
}

<div class="menu">
<img src="images/msbBanner.gif" width="325px" height="50px" alt="Matthew Brown" /><br />
<a href="index.html">Home</a> & #183;
<a href="words/index.html">Words</a> & #183;
<a href="pics/index.html">Pics</a> & #183;
<a href="geek/index.html">Geek Stuff</a> & #183;
<a href="links.html">Links</a> & #183;
<a href="about.html">About</a>
</div>
chris9902
10-24-2003, 11:12 AM
ok but i want my text links to have a box style.

if i use inline and not block they lose the width app.

:mad:

and explain what you mean PYRO becuase i don't understand who i can make that CSS smaller
pyro
10-24-2003, 11:22 AM
What I mean is that when elements use the same CSS, you only need to define it once. For your links, just use the define your properties for the a elements, and then only change the background-color in the a:hover. Take a look at the following code, which also fixes the problem you were asking about:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#logo {
position:absolute;
width:700px;
height:80px;
top:20px;
left:0px;
background-color:#999999;
border-top:5px solid #000;
}

div#nav {
position:absolute;
width:700px;
height:25px;
top:105px;
left:0px;
background-color:#555555;
}

div#nav a {
float: left; /*This fixes the problem you were asking about*/
display:block;
background-color:#000099;
text-decoration: none;
border: 1px solid #ff0000;
width:100px;
height:20px;
}

div#nav a:hover {
background-color:#000000;
}

body {
background-color:#f4f4f4;
}
</style>
</head>

<body>
<div id="logo"></div>
<div id="nav"><a href="http://www.yahoo.com">yahoo</a>
<a href="http://www.w3c.org">W3C</a>
</div>
</body>
</html>
chris9902
10-24-2003, 12:14 PM
ah ok

thanks i will do that:)
pyro
10-24-2003, 12:17 PM
Sure thing... :)