|
CSS - Sliding Doors Navigation And Php Includes
So my webpage is using a sliding doors type navigation bar while also implementing a php includes in the content area. One of the problems here is on showing the "selected" or "you are currently here" state of a navigation button.
Normally, it seems you would simply specify the class of the li element that corresponds to the page the user is on as "selected". However in this case, the navigation code is in the index.php and therefore constant and unchanging. So how would I implement this feature on my website? I've tried using javascript to manually change the styles, but either thats not possible or I have no idea what I'm doing. I realize my post may not be very clear as I am not sure how else to explain it. I will gladly clarify. Thanks! Similar TutorialsI am constructing a website using the sliding doors navigation (http://www.alistapart.com/articles/slidingdoors/ and http://www.alistapart.com/articles/slidingdoors2/). I have gone through both articles to successfully create the sliding doors naviagiton that I require. My header image that I wish to place behind the navigation is 780px wide by 263px high. Therefor, I will be placing this navigation at the bottom (baseline) of this image. I have increased my header div size to fit the image (780px x 263px). Then I have padded the navigation to try to make it position on the bottom of the image (padding-top: 236px). Unfortunatly, doing this give a 1px padding difference for IE and Firefox. IE shows it up fine, but Firefox does not. Firefox makes it look like its spaced 1px to many. If i decrease the padding to 235px, Firefox looks fine but IE displays it with 1px to less...I dont want to have to result to browser dependant css, but all hacks are welcome. Heres the code: Code:
body {
text-align: center;
background-color: #7999E4
}
#header{
width: 780px;
background: url('images/head.gif') repeat-x bottom;
font-size: 93%;
line-height: normal;
height: 263px;
padding: 0;
margin:0;
border:0;
}
#main {
background-color: #ffffff;
width: 780px;
height: 500px;
}
#nav2 {
background-color: #e7e7e7;
width: 100%;
border-bottom: 1px solid #000;
height: 20px;
}
#header ul {
margin: 0;
padding:0;
padding-top: 236px;
padding-left: 10px;
list-style: none;
}
#header li {
display:inline;
margin:0;
padding:0;
}
#header a {
float: left;
background: url('images/left_both.gif') no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
border-bottom: 1px solid #765;
text-decoration: none;
}
#header a span{
float: left;
display: block;
background: url('images/right_both.gif') no-repeat right top;
padding: 5px 15px 4px 6px;
font-weight: bold;
color: #765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a span{float: none;}
/* End IE5-Mac hack*/
#header a:hover span{
color: #333;
}
#header #current a{
border-width: 0;
background-position: 0% -150px;
}
#header #current a span{
background-position: 100% -150px;
padding-bottom:5px;
color: #333;
}
#header a:hover {
background-position:0% -150px;
}
#header a:hover span {
background-position:100% -150px;
}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link title="Style" href="style2.css" type="text/css" rel="STYLESHEET">
</HEAD>
<BODY>
<center>
<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>Properties</span></a></li>
<li><a href="#"><span>Quick Searches</span></a></li>
<li><a href="#"><span>Holidays</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<div id="main">
<div id="nav2"></div>
</div>
<div id="footer">
</div>
</body>
</html>
My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation. Not sure if I'm allowed to post links, so below are some code snippets and I've also attached a screenshot. The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought. CSS: Code:
/* horizontal main menu navigation */
#nav {
float:left;
width: 100%;
background: yellow; /*temporary color just for visual cue */
}
#nav ul {
margin: 0;
padding: 0 0 0 300px;
list-style: none;
}
#nav ul li {
float: left;
margin: 0;
padding: 0;
font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
background: url(images/tab_right.gif) no-repeat top right;
}
#nav a {
float: left;
display: block;
margin: 0 10px 0 0;
padding: 5px 2px;
color: #fff;
text-decoration: none;
background: #284d73 url(images/tab_left.gif) no-repeat top left;
}
HTML: Code: <div id="nav"> <ul> <li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li> <li id="t-about"><a href="#" title="About Us">ABOUT US</a></li> <li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li> <li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li> <li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li> </ul> <!-- end #nav --> </div> Problem is two fold: 1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing... 2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing... If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?). Thanks for any suggestions! luispunchy In the past year or two I've been playing with CSS layout techniques, and have grown to the point where I consistently use CSS instead of tables. I'm all for it. But as much as I love them, some of the trendy practices seem to be a little impractical - particularly sliding doors, sprites and the suckerfish dropdowns. With sprites, I can see the benefits of having fewer HTTP requests and having all rollover images in one file. With suckerfish dropdowns, it's definitely nice to have the navigation and subnavigation organized into lists. Sliding doors can certainly save a lot of bandwidth and load time, and make editing graphical navigation much easier. I'm sure all of these are terrific from SEO and accessibility standpoints, too. But the code for these techniques seems extremely convoluted and bloated. My personal experience with suckerfish dropdowns and sprites both are that they require hacks to get them to work smoothly in browsers as recent as IE6. After all is said and done, there's actually more code required to attain the same functionality that could be achieved using HTML and JavaScript. I'm curious to see what input everyone has. I'd love to justify styling unordered lists into sliding door dropdown nav tabs with sprite backgrounds, just because I have so much fun doing it. But is it really practical? Hi, does anyone know how to do sliding doors where the "a" element is active rather than the "li"? I'm using drupal, and it makes the "a" element active, and I'm having a hard time porting the code over... 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! Hey Everyone! I'm having issues with a custom sliding panel showing correctly in IE. It works EXACTLY as I'd like in Firefox, but breaks in Internet Explorer. I tried different positioning items, and tweaking everything I could think of, but it would appear that I'm stumped. knockoutsadvertising[dot]com/gaptest/ In the right hand sidebar, clicking 'Learn More' will open the panel. There's a link within the panel to close it again. Any help on how to get this thing positioned correctly in IE would be awesome. Brad Problem: I have a moderately simple site with .css and .js includes. Trouble is when I serve them thru Apache my page doesn't use them... In a browser, not thru Apache, they work fine so the links are good, but I would like to be able to serve them to myself for testing. I've heard that the server has no effect on external css and js but I don't have this prob in any browser unless it goes thru Apache. Specs: OS X Apache 1.3 Thanks for any info you can fire at me. Hi There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Here's the CSS: Code: #tabnav {
float:left;
width:100%;
background:#FFFFFF url("tab_background.png")
repeat-x bottom;
line-height:normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 13pt;
}
#tabnav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#tabnav li {
float:left;
background:url("tab_inactive_right.png")
no-repeat right top;
margin:0;
padding:0;
}
#tabnav a {
display:block;
background:url("tab_inactive_left.png")
no-repeat left top;
padding:8px 15px 4px;
}
#tabnav a:link{
color:293356;
text-decoration: none;
}
#tabnav a:hover{
color:596eba;
text-decoration: none;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabnav a {float:none;}
/* End IE5-Mac hack */
#tabnav #current {
background-image:url("tab_active_right.png");
}
#tabnav #current a {
background-image:url("tab_active_left.png");
padding-bottom:5px;
}
HI Could someone take a look at this code. I am using dreamweaver, but that shouldn't matter as i have written most of this myself. The only bit that works is that the text "LINK" appears as blue, like it should everything else is in the wrong colour, font, size, etc. However the text appears how it should in dreamweaver, but not in IE or Netscape? its only a sample of my code, so its not too long. Ideas? Thanks in advance. This is my CSS code:- ttext { FONT-SIZE: 16px; COLOR: #0066FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } btext { FONT-SIZE: 12px; line-height: 20pt; COLOR: #0066FF; font-family: Verdana, Arial, Helvetica, sans-serif;} A:link { text-decoration: none; COLOR: #0066FF;} A:active { text-decoration: none; COLOR: #0066FF;} A:hover { text-decoration: underline; COLOR: #0066FF;} A:visited { text-decoration: none; COLOR: #0066FF;} This is my HTML:- <html> <head> <title>CSS_TEST</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="CSS_TEST.css" rel="stylesheet" type="text/css"> </head> <body> <ttext>This is the title for my CSS Test Page</ttext> <P></P> <btext> THIS IS WHERE THE BODY OF TEXT WILL BE </btext> <P></P> <A HREF="http://www.agreatwebsite.co.uk/">Link</A> </body> </html> PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } 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;
}
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. 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! 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>
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/ 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. 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? hatchetradio.com/radio/ if you take a peek, you'll see the navigation is under the entire layout. I'm not quite sure why, any help? Hello, I want to create Vertical Navigation menu with pure CSS. Navigation menu will have main menus name. When user click on any of main menu, it should open list of sub-menu under same navigation(menubar). i mean like tree naviation but sub-menus should open under same menus. Navigation menu is vertical menus. Example: please go to : http://www.projectseven.com/tutorials/navigation/swapclassmenu/index.htm Under Overview:How it works section: Please click on See the finished SwapClass menu link. In that page they have left hand side vertical nav-menu with sub-menus open under same navbar. I want to create like above example. Is there any tutorials or open source for this? Thank you, tec Hi, Please can you take a look at my navigation bar on my site http://www.prohost.ie - on Internet Explorer it looks just about fine but in Opera the links go outsite of the <div> that theyre in. Please could anyone help with this? Also does anyone know how to get the content div center aligned in Opera like it is on IE. It has a text-align:center attribute set in its outer div but it only seems to work on IE. Anyone know a way round this? thanks |
|||||||