|
CSS - Son Of Sucker Fish Navigation Issues
http://www.link-space.com/send.com/nav/template.htm
Thats the current html file that I have Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="slogan">Welcome to SEND.com your GIFT Headquarters!</div>
<div id="logo" title="SEND.com"><a href="index.htm"></a></div>
<h1>The International Gift Network</h1>
<div id="phone"></div>
<div id="navBox">
<ul id="primaryNav">
<li><a href="#">Liqour Gifts</a>
<ul>
<li><a href="#">Custom Gift Baskets</a></li>
<li><a href="#">Armagnac</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Bourbon</a></li>
<li><a href="#">Brandy</a></li>
<li><a href="#">Canadian Whiskey</a></li>
<li><a href="#">Cognac</a></li>
<li><a href="#">Cordials & Liqueurs</a></li>
<li><a href="#">Drink of the Month Club</a></li>
<li><a href="#">Gin</a></li>
<li><a href="#">Irish Whiskey</a></li>
<li><a href="#">Liquor Baskets</a></li>
<li><a href="#">Rum</a></li>
<li><a href="#">Scotch-Blended</a></li>
<li><a href="#">Scotch-Single Malt</a></li>
<li><a href="#">Tequila</a></li>
<li><a href="#">Unique Liquor Gift Bottles</a></li>
<li><a href="#" class="last">Vodka</a></li>
</ul>
</li>
<li><a href="#">Wine Gifts</a>
<ul>
<li><a href="#">Custom Gift Baskets</a></li>
<li><a href="#">Champagne</a></li>
<li><a href="#">Champagne Gift Baskets</a></li>
<li><a href="#">Sparkling Wines</a></li>
<li><a href="#">Wine-Red</a>
<!--<ul>
<li><a href="#">Barolo</a></li>
<li><a href="#">Bordeaux</a></li>
<li><a href="#">Burgundy</a></li>
<li><a href="#">Cabernet Sauvignon</a></li>
<li><a href="#">Grenache</a></li>
<li><a href="#">Malbec</a></li>
<li><a href="#">Nebbiolo</a></li>
<li><a href="#">Pinot Noir</a></li>
<li><a href="#">Sangiovese</a></li>
<li><a href="#">Syrah / Shiraz</a></li>
<li><a href="#">Tempranillo</a></li>
<li><a href="#">Zinfandel</a></li>
</ul>-->
</li>
<li><a href="#">Wine-White</a>
<!--<ul>
<li><a href="#">Chardonnay</a></li>
<li><a href="#">Riseling</a></li>
<li><a href="#">Pinot Grigio</a></li>
<li><a href="#">Dauvignon Blanc</a></li>
<li><a href="#">Viognier</a></li>
<li><a href="#">White Blend</a></li>
</ul>-->
</li>
<li><a href="#">Dessert Wines</a></li>
<li><a href="#" class="last">Port Wines</a></li>
</ul>
</li>
<li><a href="#">Flower Gifts</a>
<ul>
<li><a href="#">SEND Leis</a></li>
<li><a href="#">SEND Orchids</a></li>
<li><a href="#">SEND Protea</a></li>
<li><a href="#" class="last">SEND Wreaths</a></li>
</ul>
</li>
<li><a href="#">Gourmet Gifts</a>
<ul>
<li><a href="#">SEND Gift Baskets</a></li>
<li><a href="#">SEND Cakes</a></li>
<li><a href="#">SEND Caviar</a></li>
<li><a href="#">SEND Cheesecakes</a></li>
<li><a href="#">SEND Chocolates</a></li>
<li><a href="#">SEND Cookies</a></li>
<li><a href="#">SEND Fruits</a></li>
<li><a href="#">SEND Kosher</a></li>
<li><a href="#">SEND Liqueur Cakes</a></li>
<li><a href="#">SEND Rum Cake</a></li>
<li><a href="#" class="last">SEND Salmon</a></li>
</ul>
</li>
<li><a href="#" class="last">Specialty Shops</a>
<ul>
<li><a href="#">SEND African</a></li>
<li><a href="#">SEND Airplanes</a></li>
<li><a href="#">SEND Armoury</a></li>
<li><a href="#">SEND Birdhouses</a></li>
<li><a href="#">SEND Bridal</a></li>
<li><a href="#">SEND Chess</a></li>
<li><a href="#">SEND Chimes</a></li>
<li><a href="#">SEND Cigar</a></li>
<li><a href="#">SEND Egpytian</a></li>
<li><a href="#">SEND Executive Gift</a></li>
<li><a href="#">SEND Footstools</a></li>
<li><a href="#">SEND Leather</a></li>
<li><a href="#">SEND Lighthouses</a></li>
<li><a href="#">SEND Museum Jewelry</a></li>
<li><a href="#">SEND Music Boxes</a></li>
<li><a href="#">SEND Nautical</a></li>
<li><a href="#">SEND Picnic</a></li>
<li><a href="#">SEND Stained Glass</a></li>
<li><a href="#">SEND Ties</a></li>
<li><a href="#">SEND Vases</a></li>
<li><a href="#" class="last">SEND Weathervanes</a></li>
</ul>
</li>
</ul>
</div>
<ul id="secondaryNav">
<li><a href="#">Gift Certificates</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Live Support</a></li>
<li><a href="#" class="last">My Account</a></li>
</ul>
<div id="search"></div>
</div>
</div>
</body>
</html>
Thats the current css file that I have Code: @charset "utf-8";
/* neutralize browser styles */
body, html {
margin:0;
padding:0;
}
/* neutralize browser spacing for vertical elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
margin: 0;
padding: 0;
}
/*Container*/
#container {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
}
#header {
width:770px;
height:117px;
background: url(../images/header.jpg) no-repeat;
}
#header #slogan {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
color:#6A6A61;
font-weight:bold;
position:absolute;
top: 1px;
left: 26px;
}
#header #logo a {
background:url(../images/send.gif) no-repeat;
width:139px;
height:24px;
position:absolute;
top: 24px;
left: 26px;
}
#header h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-color: #3E606F;
font-weight:bold;
position:absolute;
top: 52px;
left: 26px;
}
#header #phone {
background:url(../images/phone.gif) no-repeat;
width:135px;
height:10px;
position:absolute;
top: 28px;
left: 604px;
}
#header #navBox {
border: 1px solid #DADADA;
width:513px;
height:26px;
background:#fff;
position:absolute;
top:80px;
left:17px;
}
#header #primaryNav,
#header #primaryNav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#header #primaryNav a {
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
font-weight:bold;
color:#731818;
text-decoration:none;
padding: 4px 18px 5px 19px;
margin: 4px 0 4px 0;
border-right: solid 1px #BDAD73;
}
#header #primaryNav a:hover,
#header #primaryNav a:active {
padding: 8px 18px 9px 19px;
margin:0;
color:#fff;
background-color:#731818;
}
#header #primaryNav a:link.last {
border-right:none;
padding: 8px 18px 9px 19px;
margin:0;
}
#header #primaryNav li { /* all list items */
float: left;
}
#header #primaryNav li ul { /* second-level lists */
margin:0;
padding:0;
position: absolute;
border-left: solid 1px #D2C8A2;
border-right: solid 1px #D2C8A2;
width:100%;
left: -99999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background-color:#FFF;
float: left;
display:block;
width:140px;
}
#header #primaryNav li ul li {
width:140px;
}
#header #primaryNav li ul li a {
margin:0;
padding:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
border-right: none;
}
#header #primaryNav li ul li a:link.last {
margin:0;
padding-left: 8px;
border-bottom: solid 1px #D2C8A2;
}
#header #primaryNav li ul a:hover,
#header #primaryNav li ul a:active {
padding:8px;
margin:0 auto;
color:#fff;
background-color:#731818;
}
#header #primaryNav li:hover ul ul,
#header #primaryNav li:hover ul ul ul,
#header #primaryNav li.sfhover ul ul,
#header #primaryNav li.sfhover ul ul ul {
left:-999em;
}
#header #primaryNav li:hover ul,
#header #primaryNav li li:hover ul,
#header #primaryNav li li li:hover ul,
#header #primaryNav li.sfhover ul,
#header #primaryNav li li.sfhover ul,
#header #primaryNav li li li.sfhover ul {
left:auto;
}
#header #primaryNav li:hover,
#header #primaryNav li.sfhover {
background:#333 none repeat scroll 0%;
}
#header #secondaryNav {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
position: absolute;
top:52px;
left:333px;
}
#header #secondaryNav li {
float: left;
}
#header #secondaryNav li a {
padding:2px 16px 2px 16px;
border-right:1px solid #E4D8B1;
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
}
#header #secondaryNav li a.last {
border-right:none;
}
#header #secondaryNav li a:link,
#header #secondaryNav li a:visited {
text-decoration: none;
color:#1D2326;
}
#header #secondaryNav li a:hover,
#header #secondaryNav li a:active {
text-decoration: underline;
}
#header #search {
border-top: 1px solid #DADADA;
border-right: 1px solid #DADADA;
border-bottom: 1px solid #DADADA;
position:absolute;
top:80px;
left:532px;
background:#EAE7E2;
width:223px;
height:26px;
}
Three issues. The menu does not fade away in IE - fixed Once highlighted on the submenu I can't get the text in the main menu to go white The menu "jumps" when I go from the main menu to the submenu Once these issues are resolves I will add in a sub sub menu. Hence son of suckerfish.. Similar Tutorials::EDIT:: -- Problem solved! Thanks for informing me about those two validating websites... Turns out all I needed to do was apply "display:inline-block;" to my 'a' element... I knew it was a simple fix! I'm sure I will be here again for more problems needing solving Okay I've gotten to a point in my design where I'm a bit stumped. I have been working on a three column layout with a fixed header and footer. The entire idea behind the fixed footer is so that my entire promotional press kit and social networks will be available and in view in the footer above the fold at all times for easy access. After a few little tweaks the layout looks good and turned out nicely. However, now I am adding content and navigation and I am having some issues with regards to how it is reacting when my browser window is re-sized and the layout of the far left navigation. Okay so when I shrink the browser window two things happen, I get a horizontal scroll, which isn't too bad, I mean that is normal in a lot of sites but because the footer and header are fixed it looks a little weird. Is there a way to stop this without going fluid? The other thing it does when it is shrunk, the background image in the footer shifts to the right along with the navigation which should not happen if it is fixed right? What is could be causing that? If I have nested div inside the footer div does it need to be declared fixed too or can it be relative because it is a child of the footer? The biggest problem is that my navigation menu on the left will have four links. I would like two links above and two links below. I would like the top left and bottom left to align to the left with space between those two links and the top right and bottom right, which will also align left. How would I accomplish this using the least amount of mark up in the xhtml and the least amount of code in css? Right now they aren't links, I'm just trying to lay it first. What I was thinking, was using a div to hold a footer ul and li class? Would I just apply the class to each link or would I apply the class to two, one div class above holding two links and one div class below or do I even need an extra footer div anyway if I'll be assigning separate classes? I'm confused as to the best way to fix all this, your help would be appreciated, the xhtml validates and so does the css. Here is the link to the testing site: http://www.lonniebruhn.com/sitelab/ Here's a story for you: Over the past few days, I've been experimenting with different bits of CSS to try and create a site - www . ridiculousity . net - and I've run into a snag. If you look at the source code, you'll see that there should be an image at the bottom of the page. This image should be centered by the body tag in my stylesheet (ridiculx.css), but instead it seems suspiciously absent. Additionally, I have a PHP include function calling to a newspost. According to my stylesheet (at least, as far as I can tell) the text should be showing up directly beneath the comic... Instead, it shows up at the far left of my content div. HOWEVER... When I remove the image that is supposed to be at the page's bottom, suddenly the text formats itself correctly. Finally, and regardless of what I do for whatever reason I can't seem to get my background to extend to 100% of the page's height. When it loads, it extends to fill the visible section of the user's browser window, but not beyond it. If anyone can help with any (or all!) of these issues, I'd be very grateful. Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
How is this navigation done on the top of the page? I looked at the CSS and all the javascript. I can't see how the drop down is created? I tried to replicate it and copied the background images. I can get the menu to show and rollovers work. Just the drop down won't work. http://jmadvertising.com/ Hey guys I am currently having an issue with a CSS Navigation. I was wondering if anyone was available to help me out. http://schoolwide.sgajewski.com/menu/ I am currently having an issue with IE 7. It seems to be working in every other browser but the second level of the navigation is offset lower in IE7. The spacing starts off 1 pixel two low and progressively the gap gets wider. Code:
ul.vertical, ul.vertical li {
margin:0;
padding:0;
list-style-type:none;
font-size:100%;
}
ul.vertical {
position:absolute;
z-index:1000;
cursor:default;
width:180px;
left:1em;
top:4.05em;
}
ul.vertical li {
position:relative;
text-align:left;
cursor:pointer;
cursor:hand;
width:180px;
margin:-1px 0 0 0;
padding-bottom:0px!important;
padding-bottom:1px;
float:left;
clear:both;
top:0;
left:0;
}
ul.vertical ul {
z-index:1020;
cursor:default;
position:absolute;
width:197px;
margin:0 0 0 179px;
top:-100em;
left:-1px;
padding:1px 0 0 0;
height:0px;
overflow:hidden;
}
ul.vertical ul li {
width:197px;
}
ul.vertical ul ul {
margin: 0 0 0 179px;
}
@media Screen, Projection {
ul.vertical li:hover > ul { top:0; height:auto; overflow:visible; }
}
ul.vertical a, ul.vertical a:visited {
display:block;
cursor:pointer;
cursor:hand;
background:url(images/bg.jpg);
padding:5px 7px;
font:normal normal bold 0.7em tahoma, verdana, sans-serif;
color:#008000;
text-decoration:none;
letter-spacing:1px;
}
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
background:url(images/bg_over.jpg);
color:#806020;
}
ul.vertical .outtop {background:url(images/bg_over_top.jpg);}
ul.vertical .outbg {background:url(images/bg_over_mid.jpg);}
ul.vertical .outbot {background:url(images/bg_over_bot.jpg);}
ul.vertical ul a,
ul.vertical ul a:hover,
ul.vertical ul a:visited,
ul.vertical ul a:active
ul.vertical ul a:hover,
ul.vertical ul a:focus,
ul.vertical ul a.rollover,
ul.vertical ul a.rollover:visited
{
background-image:none;
}
@media screen, projection {
* html ul.vertical li {
display:inline;
f\loat:left;
background:#ffffff;
}
}
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }
Any help on why this is offset in IE7 would be great. Thanks in advance. Hello, I'm new to the forum and not very good with CSS yet. I'm slowly moving from tables to CSS. I set up a sample page to describe the problem I'm having but the forum won't allow me to post the URL here. I have a vertical CSS "LI" navigation section in the left hand sidebar of this web page and it works perfectly in every Mac browser I try it on (very latest Mac versions of Opera, Firefox, Safari, Chrome, Camino, Omniweb, etc.). There's a white, 1-pixel horizontal spacer/separator line between each link in the left sidebar which is supposed to be 220 pixels wide. It is 220 pixels wide on all the Mac browsers I try it on but for some reason, as soon as I try the web page in IE 7 or IE 8, the white horizontal 1-pixel divider line is shorter and ends up being only 195 pixels wide and throws the whole, nice and "even" look off. I don't understand where the 25 pixels are disappearing to in IE 7 and IE 8. Can anyone offer any insight as to what the fix may be or what I've done wrong? Below is the code I've used to create the navigation. Thanks so much. HTML Code: Code: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</A></li> <li><a href="#">On To Page 2</A></li> <li><a href="#">On To Page 3</A></li> <li><a href="#">On To Page 4</A></li> <li><a href="#">On To Page 5</A></li> </ul> </div> CSS Code: Code: #navlist {
padding-left: 25px;
margin-left: 0;
width: 220px;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid white;
}
#navlist li a {
background: transparent url(../images/list_off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #277eb1;
text-decoration: none;
line-height: 30px;
}
#navcontainer ul li a:hover {
background: transparent url(../images/list_on.gif) left center no-repeat;
color: #da251c;
}
#navcontainer ul li a#current {
background: transparent url(../images/list_active.gif) left center no-repeat;
color: #999999;
}
I have a nice little vertical navigation block that I would like to use in multiple pages within the same website. I would like to use the nav block without repeating the code, but I can't figure out how to do it. I have put the code in navigation.htm. What do I do next? I'm pretty new to CSS, but I've managed to put together a website based from a psd, that validates and everything has gone well. My menu, however, is pretty shoddy. I have everything positioned the way I want it, but what I want to do is convert the lists inside from dropping down to being horizontal parallell to the nav bar itself. From: --- --- --- --- | | To: _ _ _ --- --- --- --- The site is here. Ignore the issues with the absolute positioning; its because of the ads at the top, and it doesn't affect the nav bar. I am desperatefor some help, it is ridiculous to figure out. Anyone who can help me, I would be crazy grateful. Thanks, Tom Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
/*BEGINNING OF CSS*/
body{
padding: 0px;
background-color: #000000;
font-family: Verdana;
color: #FFFFFF;
text-align: center;
}
div.container {
margin: 0 auto;
padding: 0px;
width: 1024px;
text-align: left;
}
div.left {
float: left;
}
div.right {
float: right;
}
div.logo {
margin: 0 auto;
background-position: top center;
text-align: center;
}
div.header {
text-align: center;
padding-top: 0px;
}
div.navigation {
background-color: #000000;
background-image: url(http://i39.tinypic.com/igm16v.jpg);
overflow: auto;
}
div.content {
background-color: #000000;
background-image: url(http://i39.tinypic.com/2ce2qus.jpg);
overflow: auto;
height: 525px;
margin: 0 auto;
}
div.footer {
background-color: transparent;
background-image: url(http://i39.tinypic.com/2vjsbrp.jpg);
overflow: auto;
height: 290px;
padding: 0px;
margin: 0 auto;
}
p.head {
text-align: left;
font-size: 24px;
}
p.content {
position: relative;
font-size: 12px;
}
a.main {
text-decoration: none;
font-size: 18px;
padding: 8px;
color: #FFFFFF;
background-color: transparent;
}
a.sub {
font-size: 16px;
line-height: 150%;
text-align: left;
text-decoration: none;
color: #999999;
background-color: transparent;
}
a.plain {
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
background-color: transparent;
}
a.plainfoot {
text-decoration: none;
font-size: 12px;
color: #959595;
opacity: 90%;
background-color: transparent;
border-bottom: 1px solid #0d0f10;
opacity: 100%;
}
#nav, #nav ul {
margin: 0 auto;
padding: 0px;
list-style: none;
}
#nav a.main {
display: block;
margin-left: 5px;
}
#nav a.sub {
display: block;
width: 150px;
margin-left: 5px;
}
#nav li {
float: left;
width: 5em;
}
#nav li ul {
position: absolute;
width: 1em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li ul {
position: absolute;
padding: 7px;
width: 1em;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
font-family: lucida grand;
}
h1.footer {
position: relative;
font-size: 18px;
color: #123712;
margin-bottom: 0%;
margin-left: 50px;
}
p.footer {
font-size: 12px;
color: #909090;
margin-left: 50px;
max-width: 200px;
text-decoration: none;
}
h1.main {
font-size: 28px;
font-weight: 200;
margin-left: 140px;
padding: 0;
text-shadow: #959595;
}
p.content {
font-size: 12px;
color: #FFFFFF;
line-height: 130%;
margin-left: 140px;
max-width: 450px;
text-decoration: none;
}
div.date {
background-color: transparent;
background-image: url(http://i39.tinypic.com/xnc3de.jpg);
background-repeat: no-repeat;
padding: 0px;
margin-top: 17px;
margin-left: 0px;
}
h1.main2 {
font-size: 28px;
font-weight: 200;
margin-left: 140px;
text-shadow: #959595;
}
p.content2 {
font-size: 12px;
line-height: 130%;
margin-left: 140px;
max-width: 450px;
text-decoration: none;
}
div.date2 {
background-color: transparent;
background-image: url(http://i39.tinypic.com/xnc3de.jpg);
background-repeat: no-repeat;
padding: 0px;
min-height: 100px;
margin: 0px;
}
div.sidebar {
background-color: transparent;
background-image: url(http://i41.tinypic.com/2r76kpu.jpg);
background-repeat: no-repeat;
background-position: top right;
padding: 0px;
min-height: 200px;
margin-top: 15px;
margin-right: 15px;
}
div.datetext1 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: 200;
color: #FFFFFF;
left: auto;
top: 382px;
padding-top: 262px;
padding-left: 44px;
}
div.dateid1 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 24px;
font-weight: 300;
color: #123712;
left: auto;
top: 382px;
padding-top: 281px;
padding-left: 47px;
}
div.datetext2 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: 200;
color: #FFFFFF;
left: auto;
top: 382px;
padding-top: 44px;
padding-left: 44px;
}
div.dateid2 {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 24px;
font-weight: 300;
color: #123712;
left: auto;
top: 382px;
padding-top: 63px;
padding-left: 47px;
}
div.sidebarhead {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 18px;
font-weight: 200;
color: #123712;
text-align: center;
left: auto;
top: 400px;
padding-top: 15px;
padding-left: 630px;
}
div.sidebartext {
position: absolute;
background: transparent;
font-family: verdana, sans-serif;
font-size: 10px;
color: #FFFFFF;
line-height: 130%;
text-align: left;
max-width: 168px;
left: auto;
top: 400px;
padding-top: 50px;
padding-left: 610px;
}
/*END OF CSS*/
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<title>Obsidian Recording Front Page</title>
</head>
<body>
<div class="container">
<div class="left">
<img src="http://i39.tinypic.com/14j6nsz.jpg" alt="left column"/>
</div>
<div class="right">
<img src="http://i40.tinypic.com/b4yir5.jpg" alt="right column"/>
</div>
<div class="logo">
<img src="http://i40.tinypic.com/2u77lua.jpg" alt="logo"/>
</div>
<div class="header">
<img src="http://i41.tinypic.com/1178qo6.jpg" alt="header"/>
</div>
<div class="navigation">
<ul id="nav">
<li><a class="main" href="http://www.obsidianrecording.com">Home</a></li>
<li><a class="main" href="#">Music</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/featured">Featured</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/artists">Artists</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/artists/thisisthefall">My Band</a></li>
</ul>
</li>
<li><a class="main" href="http://www.obsidianrecording.com/design">Design</a></li>
<li><a class="main" href="#">Store</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/store/recording">Recording</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/store/design">Design</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/store/music">Music</a></li>
</ul>
</li>
<li><a class="main" href="#">About</a>
<ul>
<li><a class="sub" href="http://www.obsidianrecording.com/about/rates">The Rates</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/about/studio">The Studio</a></li>
<li><a class="sub" href="http://www.obsidianrecording.com/about/tomhoneyman">Tom Honeyman</a></li>
</ul>
</li>
</ul>
</div>
<div class="content"
<div class="date">
<div class="sidebar"
<h1 class="main">Cast into Shadows</h1>
<p class="content">The first band ever to record at Obsidian Recording was Cast into Shadows. I'd like to shout out to Donnie, Evan, Josh, Brian, and J.T. for being the first group to come through here and for making a kickass record along the way. You can find more about them in the Artists section of the site.</p>
</div>
</div>
<div class="date2">
<h1 class="main2">Website Launched!</h1>
<p class="content2">After a looong time working on this site, I've finally finished just in time for summer! What you can expect is a lot of updates on what artists who record here are doing, free downloads, cool videos of their shows, special rates just for people who visit the site, and more. If you'd like to contact me, all my information and more is in the About section of the site. <br /><br /> Thanks for visiting, and I hope you enjoy!</p>
</div>
<div class="datetext1">Jun</div>
<div class="dateid1">1</div>
<div class="datetext2">Jun</div>
<div class="dateid2">7</div>
<div class="sidebarhead">New Website!</div>
<div class="sidebartext">Welcome to the all-new Obsidian Recording site! I will regularly update with news, special rates, videos, featured free downloads, and more.</div>
</div>
<div class="footer">
<br /><br /><br />
<h1 class="footer">Recent Projects</h1>
<p class="footer"><a class="plainfoot" href="www.obsidianrecording.com/artists/castintoshadows">Cast into Shadows</a><br /><br /><a class="plainfoot" href="http://www.obsidianrecording.com/artists/thisisthefall">This is the Fall</a></p>
</div>
</div>
</body>
</html>
hi, i was wondering if anyone knw any links to ultra super dooper cool websites for css navigations. I want to learn how to do ace ones. I have already googleed about, I found the sliding doors on ALA an stuff but i need that little bit more cool tutorials prefrably!! I did find one cool one athttp://www.bulkherbstore.com/ thanks tom. Hello. So I'm trying to make my html more semantic, so I'm trying to avoid divs and spans as much as possible. I'm trying to make an unordered list navigation, but it shows up really choppy in IE7. However, the moment I change it from <ul id="navigation"> to <div id="navigation">, it works perfectly. Just for semantics sake I'd like to see if I could keep the ul working. Here's the html code, it validates xhtml strict so you don't have to worry about that. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <title>Eagle Steel Buildings</title> </head> <body> <div id="wrapper"> <img id="banner" src="images/global/banner.jpg" alt="Eagle Steel Building"/> <ul id="navigation"> <li><a href="" class="selected">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Our Work</a></li> <li><a href="">Free Quote</a></li> <li><a href="">Contact Us</a></li> </ul> <h1>Steel Building Construction</h1> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ultrices tortor. In lectus turpis, porta in mollis et, feugiat ac ligula. Vivamus arcu mauris, accumsan id mollis eu, blandit sed odio. Donec id magna nec quam aliquam scelerisque quis in metus. Ut pharetra lorem nec neque condimentum at viverra leo euismod. Fusce vitae orci sed enim bibendum viverra sodales id elit. Fusce lectus purus, rutrum rhoncus consequat non, porta et nisi. Proin vitae est odio. Donec erat orci, mollis id viverra condimentum, feugiat nec est.</p> <form id="quoteform" action="quote_home.php" method="post"> <fieldset> <label for="name">Name</label><input type="text" name="name" id="name" /> <label for="date">Date</label><input type="text" name="date" id="date" /> <label for="phone">Phone</label><input type="text" name="phone" id="phone" /> <label for="email">Email</label><input type="text" name="email" id="email" /> <label for="location_zip_code">Location Zip Code</label><input type="text" name="location_zip_code" id="location_zip_code" /> <label for="width">Width</label><input type="text" name="width" id="width" /> <label for="length">Length</label><input type="text" name="length" id="length" /> <label for="sidewall_height">Sidewall Height</label><input type="text" name="sidewall_height" id="sidewall_height" /> </fieldset> </form> </div> </body> </html> And here's the CSS, also validated. Code:
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Begin Page Styles */
.btest{border:1px solid #FFFFFF;}
body {
background: #CCCCCC URL('../images/global/steelbg.jpg') top left;
margin: 0px;
padding: 0px;}
#wrapper{
margin: 0px auto;
width: 1010px;
height: 1000px;
background: URL('../images/global/wrappershadow.png') repeat-y;}
#banner{
display: block;
margin: 0px auto;
width: 1000px;
height: 250px;
}
#navigation{
display: block;
margin: -2px auto 0px;
width: 1000px;
height: 38px;
list-style-type:none;
background: #000000 URL('../images/global/navbg.png') no-repeat;}
#navigation a{
float: left;
height: 39px;
line-height: 2.3em;
margin-top:3px;
padding-left: 13px;
padding-right: 13px;
font-size: 1.0em;
font-family: Verdana, serif;
text-decoration: none;
font-weight: bold;
color: #CCCCCC;
text-align: center;}
#navigation a:hover, #navigation a.selected{
text-decoration: underline;}
#navigation a.selected{
color: #ff0000;}
I have not finished styling the rest of the page, I am only concerned with the navigation right now. I appreciate your time and effort! Hi all, I have a very simple question.. my mouseover is ALMOST working properly. However when you mouse over the box colour changes, but the text only changes when you are DIRECTLY over the text. How can I fix this? Check the communities drop down for an example of my problem. Here is my temp site URL: edit: I can't post links yet?!?! PM me for link Thanks! Howdy all, and thanks for reading. I have a mainly CSS-based design, and I'm trying to continue that and stay away from tables, but the DIVs just don't want to cooperate on one area. Please visit the Virtual Tour section of this web site, click on any of the areas, and you will see the navigation at the bottom of the window that pops up. The stylesheet is local. It's especially bad in IE. I thought that maybe margins would help it, but the top and bottom seem to do nothing. I know that I could just put another DIV for the second row since I'm already defining the window width, but I'm using a database query for this, and the number of results could change often. I'd rather not resort to tables, but I may have to. Any help would be appreciated. -colin http://invalidheart.org/test/about.html i can't get my black 1px border to show on the left and right side of my menu in IE, i can't put border-left 1px solid, etc. because they are blocks and it adds them in between too and messes it up.. it works in firefox but no ie, any ideas? Hi all, I have a small problem with the new design for my website and after trying things for like 30 minuts and asking some other people I decided to give up and try here. It's probably going to be something very simple but I just can't figure out what Website: URL CSS: URL Explaination pictu URL The first part is how it shows in Internet Explorer, the second shows Firefox and the third how it is supposed to be. I hope somebody can help me with this. Thx in advance. Greetings, Sjoerd The Problem: I want my logo (a gif image) to justify to the left but padding centers it. Is there a way to NOT pad one "cell" in an inline navigation bar using css without affecting the rest which follow (which are padded)? Please email me for urls to see exactly what I'm working with. Many thanks in advance! I have converted this site from HTML to CSS/XML but there is an issue with the navigation. PC's using Firefox and Mac's using IE have the right of 2nd level navigation cut off, while Mac's using Safari does not display 2nd level at all. The site validates for both CSS and XML. The url for site is...http://www.forteinformation.com/Ideas/index.shtml and the style sheet is...http://www.forteinformation.com/Ideas/fortestyle.css Thanks in advance for any suggestions. I want to make a left side navigation menu that nested menus popup beneath the parent menu when click the parent menu, submenus will be closed when clicks parent menu again How can do that using css and html? |
|||||||