| brokenhope |
Nov 27th, 2007 4:31 PM |
Slight Float Problem. Code and Screenshot.
1 Attachment(s)
I cant get the navigation floating on the banner to display correctly, the way I want it to look is in the screenshot, I want it to be fluid, but only fluid further left, and keep the constant margin from the right...
I have been trying to figure out how to accomplish this, I dont think I am on the right track, since I need the single image borders to hug the sides of the text, and the divs just aren't doing it, without specific pixel values that is, which defeats the purpose of it, I need it fluid.
anyways, if you can help it would be a HUGE HELP!!!
index.html
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Elemental Concepts - Programming, Graphics, Tutorials, Anime, and more</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="bannerwrap">
<div id="bannernavwrap">
<div id="bannernavleft"></div>
<div id="bannernavbody"><span>
<a href="index.php">Home</a> -
<a href="contact.php">Contact Me</a> -
<a href="portfolio.php">Portfolio</a> -
<a href="archive.php">Misc. Archive</a>
</span></div>
<div id="bannernavright"></div>
</div>
</div>
</div>
</body>
style.css
:
html {
height: 100%;
}
div {
padding: 0;
margin: 0;
}
a, p, span {
font-size: 1em;
}
a {
text-decoration: none;
}
body {
height: 100%;
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #000;
}
div#wrapper {
width: 727px;
height: 100%;
margin: 20px auto auto auto;
padding: 0px;
text-align: left;
background-color: #1b1b1b;
}
div#bannerwrap {
width: 727px;
height: 151px;
margin: 0;
padding: 0;
background-image: url('images/banner.jpg');
}
div#bannernavwrap {
float: right;
margin-right: 10px;
margin-top: 120px;
height: 23px;
}
div#bannernavleft {
float: left;
width: 9px;
height: 23px;
background-image: url('images/banner_navigation_left_corner_shine.gif');
}
div#bannernavright {
float: right;
width: 9px;
height: 23px;
background-image: url('images/banner_navigation_right_corner_shine.gif');
}
div#bannernavbody {
height: 23px;
margin: 0 9px 0 9px;
background-image: url('images/banner_navigation_bg_shine.gif');
}
#bannernavbody span, #bannernavbody a{
font: bold .9em tahoma, verdana, arial;
color: #fff;
}
#bannernavbody a:hover {
color: #6dcff6;
}
thanks again. |
