...

View Full Version : Css Rollover Buttons! Pulling My Hair Out!



meupatdoes
08-09-2005, 04:46 AM
About a week or so ago I posted here asking for help with the positioning of my CSS Rollover Buttons.

Unfortunately, it's still not working.

Here's the link to where I am testing it: http://www.rhapsodyinlyss.com/1111.html

The Problem:
The strip of buttons hangs in the middle of the page and I need it to start at the left side of where that semi-transparent bar at the bottom of the image is.

(By the way, don't mind the link text. It's just what I copy/pasted from a tutorial)

Please, peek at my source code...if anyone can help me fix this I will be eternally grateful!

Oh, and here's a rough sketch of what it is that I am trying to accomplish overall:
http://www.rhapsodyinlyss.com/idea.jpg

Thanks!

_Aerospace_Eng_
08-09-2005, 05:38 AM
How is this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
p {
padding:10px;
margin:0;
}
#container {
width:759px;
margin:auto;
}
#navcontainer {
font-size:10px;
line-height:21px;
height:177px;
background-image:url(header.jpg);
border-bottom:1px solid #000;
}
#navcontainer ul {
margin:0;
padding:152px 0 0 2px;
list-style:none;
}
#navcontainer ul li {
float:left;
filter:alpha(opacity=80);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
-khtml-opacity:0.80;
text-align:center;
}
#navcontainer ul li a, #navcontainer ul li a:link {
text-decoration:none;
padding:0.2em 1em;
color:#FFF;
background-color:#036;
display:block;
width:131px;
}

#navcontainer ul li a:hover {
color:#FFF;
background-color:#369;
}
#other {
width:175px;
float:left;
}
#blog {
margin-left:175px;
border-left:1px solid #000;
}
#footer {
clear:both;
background-color:#036;
padding:5px;
text-align:center;
color:#FFF;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
<div id="other"></div>
<div id="blog">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer">&copy; Copyright 2005</div>
</div>
</body>
</html>

hemebond
08-09-2005, 05:46 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>65517</title>
<style type="text/css">
#header
{
background:transparent url(http://www.rhapsodyinlyss.com/header.jpg) top left no-repeat;
position:relative;
height:177px;
width:759px;
}
#header h1
{
display:none;
}
#header ul
{
position:absolute;
padding:0 0 0.2em 0;
margin:0;
bottom:0;
left:0;
}
#header li
{
display:inline;
}

#header li a
{
text-decoration:none;
padding:0.2em 1em;
background-color:#036;
color:#fff;
}
#header li a:hover
{
color:#fff;
background-color:#369;
}
</style>
</head>
<body>
<div id="header">
<h1>Rhapsody In Lyss</h1>
<ul>
<li><a href="">Milk</a></li>
<li><a href="">Eggs</a></li>
<li><a href="">Cheese</a></li>
<li><a href="">Vegetables</a></li>
<li><a href="">Fruit</a></li>
</ul>
</div>
</body>
</html>

meupatdoes
08-09-2005, 06:45 AM
IT WORKS!!!!
THANK YOU SO MUCH!

You're going to hate me but...
I have only one teeny problem...I tested it in IE and the page is centered to the left (but not in Mozilla) I want ot make it accessible to both browsers so how would I get it centered for IE?

Thanks again

_Aerospace_Eng_
08-09-2005, 07:08 AM
It does center in IE6 for PC. What version of IE does it not center in. IE5.5?

meupatdoes
08-09-2005, 08:01 AM
Yes, it's v. 5.5 for PC. I hardly ever use IE but I wanted the site to be cross browser friendly all the same. I prefer Mozilla FF myself and it looks PERFECT in that.

I cannot thank you enough!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum