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=http://www.webdeveloper.com/forum/archive/index.php/"yaoo.com">yahoo</a></div>
</body>
</html>
can you help me
Try changing display: block to display: inline or removing the display attribute altogether.
MNSAlso 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.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=http://www.webdeveloper.com/forum/archive/index.php/"images/msbBanner.gif" width="325px" height="50px" alt="Matthew Brown" /><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"words/index.html">Words</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pics/index.html">Pics</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"geek/index.html">Geek Stuff</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links.html">Links</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html">About</a>
</div>ok but i want my text links to have a box style.
if i use inline and not block they lose the width app.
and explain what you mean PYRO becuase i don't understand who i can make that CSS smallerWhat 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.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.com">yahoo</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org">W3C</a>
</div>
</body>
</html>ah ok
thanks i will do thatSure thing...
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=http://www.webdeveloper.com/forum/archive/index.php/"yaoo.com">yahoo</a></div>
</body>
</html>
can you help me
Try changing display: block to display: inline or removing the display attribute altogether.MNSAlso 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.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=http://www.webdeveloper.com/forum/archive/index.php/"images/msbBanner.gif" width="325px" height="50px" alt="Matthew Brown" /><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html">Home</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"words/index.html">Words</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pics/index.html">Pics</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"geek/index.html">Geek Stuff</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links.html">Links</a> & #183;
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html">About</a>
</div>ok but i want my text links to have a box style.
if i use inline and not block they lose the width app.
and explain what you mean PYRO becuase i don't understand who i can make that CSS smallerWhat 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.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.com">yahoo</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org">W3C</a>
</div>
</body>
</html>ah ok
thanks i will do that
Sure thing...