PDA

Click to See Complete Forum and Search --> : CSS navigation help

absolutmgd13
10-07-2007, 12:57 PM
Hey whats up?

Im somewhat new to css and i've got a little bit down. But i need some help with my navigation.

heres my addy:
http://www.matthewdesmond.com

if you look now i just have text links at the top as my nav but im trying to implement css tabs there. here is my code for the tabs that im trying to fit into that area..the height doesnt matter it can be larger, but the with can be no bigger than 809:

css:

img {
border: none;
}
#tabs {
float:left;
width:500px;
background:#E3ECF3;
font-size:93%;
line-height:normal;

}
#tabs ul {
margin:0;
padding:2px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("../images/nav/tableft5.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("../images/nav/tabright5.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}



#tabs2 {
float:left;
width:175px;
background:#E3ECF3;
font-size:93%;
line-height:normal;

}
#tabs2 ul {
margin:0;
padding:2px;
list-style:none;
}
#tabs2 li {
display:inline;
margin:0;
padding:0;
}
#tabs2 a {
float:left;
background:url("../images/nav/tableft5.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs2 a span {
float:left;
display:block;
background:url("../images/nav/tabright5.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs2 a span {float:none;}
/* End IE5-Mac hack */
#tabs5 a:hover span {
color:#FFF;
}
#tabs2 a:hover {
background-position:0% -42px;
}
#tabs2 a:hover span {
background-position:100% -42px;
}


div:

<div id="tabs">
<ul>
<li><a href="#" title="home"><span>Home</span></a></li>
<li><a href="#" title="about"><span>About Me</span></a></li>
<li><a href="#" title="services"><span>Services</span></a></li>
<li><a href="#" title="portfolio"><span>Portfolio</span></a></li>
<li><a href="#" title="resume"><span>Resume</span></a></li>
<li><a href="#" title="contact"><span>Contact</span></a></li>
</ul>
</div>
<div id="tabs2">
<ul>
<li><a href="#" title="links"><span>Links</span></a></li>
<li><a href="#" title="news"><span>News</span></a></li>
<li><a href="#" title="search"><span>Search</span></a></li>
</ul>
</div>


i've tried and cant get it to fit in there correctly can anybody help!?

-Matt
Centauri
10-07-2007, 07:08 PM
Adding clear:both to the #contenttitle div should force this div below the floated elements in the menu and allow the room.
absolutmgd13
10-07-2007, 11:49 PM
i tried that.. im using SSI to get my nav in there with its own seperate stylesheet...(i.e. <!-- #include file... blah blah) i cant get it in that line but its off to the left and throws off all of my other alignments...i've attached a screenshot of the effects
Centauri
10-08-2007, 01:35 AM
what exactly is in your nav.html file?
absolutmgd13
10-08-2007, 09:43 AM
<html>
<body>
<div id="tabs">
<ul>
<li><a href="#" title="home"><span>Home</span></a></li>
<li><a href="#" title="about"><span>About Me</span></a></li>
<li><a href="#" title="services"><span>Services</span></a></li>
<li><a href="#" title="portfolio"><span>Portfolio</span></a></li>
<li><a href="#" title="resume"><span>Resume</span></a></li>
<li><a href="#" title="contact"><span>Contact</span></a></li>
</ul>
</div>
<div id="tabs2">
<ul>
<li><a href="#" title="links"><span>Links</span></a></li>
<li><a href="#" title="news"><span>News</span></a></li>
<li><a href="#" title="search"><span>Search</span></a></li>
</ul>
</div>
</body>
</html>
Centauri
10-08-2007, 10:13 AM
There should be NO html or body tags in this file - ONLY the menu code.
absolutmgd13
10-08-2007, 10:46 AM
no ****..you are awesome. thanks.. i completely forgot abot that SSI rule. Thanks!
absolutmgd13
10-08-2007, 10:54 AM
my question now is...why wont it show up? on my index page

matthewdesmond.com
Centauri
10-08-2007, 10:57 AM
...and your main html file needs to have a .shtml file extension - ie: index.shtml
absolutmgd13
10-08-2007, 10:58 AM
how come? even with the .shtml, it doesnt show up
Centauri
10-08-2007, 11:08 AM
SSI is a server-side action, and the .shtml file extension tells the server to parse the file for SSI commands before sending it out to the browser. You didn't leave an "index.html" file on the server whilst you tried the "index.shtml" file did you? The hosting server does support SSI ?
absolutmgd13
10-08-2007, 11:13 AM
yes it supports SSI...no i removed the original html file then uploaded the shtml
Centauri
10-08-2007, 07:47 PM
Can you post the exact syntax of your include line?
absolutmgd13
10-08-2007, 09:06 PM
<!-- #include files="nav.html" -->
Centauri
10-08-2007, 09:19 PM
I think you will find the syntax should be<!--#include file="nav.html" -->No space between the "-" and "#" and non-plural "file"