Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Css Rollover Buttons! Pulling My Hair Out!

    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!
    Last edited by meupatdoes; 08-09-2005 at 03:50 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    How is this?
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It does center in IE6 for PC. What version of IE does it not center in. IE5.5?
    Last edited by _Aerospace_Eng_; 08-09-2005 at 06:12 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •