|
CSS - Help-site Navigation Bar
Hey, I'm a beginner just starting out and I ran into a problem building Site Navigation Bars for a practice-website.
I would like a Navigation Bar that goes horizontally across the header, as well as a separate navigation bar that goes vertically down my sidebar. I had several questions regarding this endeavor. My current CSS code for my header div#header { width: auto; height: 100px; background: #ffffff url(DSC09762.jpg); padding: 5px; border-bottom: #000000 1px solid; } What I would like to add: ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } 1) How would I properly nest the latter part of the CSS code to the original? 2) Since I want to customize the design of the list that goes vertically down my side bar as well...I am concerned that I have to add an ID or Class Specification to each list. Am I correct in thinking this? Any tips regarding the preferred method? Help is much appreciated. Thanks! Similar TutorialsHello, I sincerely apologize ahead of time for what I think to be the craziness of this request, but I'm about to go bonkers. I have a website set up for a guild through guildomatic and I have some customizations applied courtesy of another, more css-savvy individual. He used a "custom css" and some JavaScript to do some skinning so that his theme looked like another theme. I've made further tweaks using my good ol'fashioned try try until you succeed mentality (some C++/Perl experience) but there is one problem that I just can't wrap my head around. There is a navigation bar (including login/logout/register links) inside a table tagged "crumb" that no matter what I do I cannot get it centered so that it stays in the correct position when the window changes size. I would like for the "crumb" to show up above the banner and centered (the banner is centered too) so that they move with eachother whether your viewport is large or small. Am I completely missing something here or is there a rule that I'm not following? I've tried applying the "auto" setting to the right and left margins in various different levels of the structure and figure I either haven't found the right combination or I'm going about this the wrong way. I have tried disabling the custom CSS and JS to make sure they aren't interfering and I still can't make this happen so far. Any help would be greatly appreciated. Thanks for reading! -Ryan Here's the code: Code:
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:100000001;"></div>
<div id="root">
<table id="root_table">
<tr id="adminConsoleContainer">
<td colspan="1">
<table class="controls">
<tr>
<td class="notices"></td>
<td class="configure">
<ul class="nav controls">
<li>
<img alt="Upgrade" class="raw_icon" src="(URL address blocked: See forum rules)" title="Upgrade" />
<a href="(URL address blocked: See forum rules)=2481105406&cep=b69e9d1e6f0577c6d79da3f5d9b8e910">Add Services</a>
</li>
<li>
<img alt="Administrator Console" class="raw_icon" src="(URL address blocked: See forum rules)" title="Administrator Console" />
<a href="/console">Administrator Console</a> </li> </ul> </td> </tr> </table> </td> </tr> <tr> <td id="banner">
<div class="ggcode">
<table cellpadding=0 cellspacing=0 width="1050" style="margin-left:auto;margin-right:auto;">
<tr>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
<td style="text-align:left;vertical-align:top;background-image:url((URL address blocked: See forum rules));background-repeat:repeat-x;">
<img style="align:top; padding-top:0px; width:970px; height:229px" src="(URL address blocked: See forum rules)">
</td>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
</tr>
</table>
<script type="text/javascript" src="(URL address blocked: See forum rules)"></script>
</div>
</td>
</tr>
<tr>
<td >
<table id="crumb">
<tr>
<td id="nav">
<div class="ggcode">
<div id="menuSection">
<a href="/">Home</a> - <a href="/forums">Forums</a> - <a href="/members">Roster</a> - <a href="/raids">Raids</a> - <a href="/items">Items</a> - <a href="/raids/attendance">Attendance</a> -
<a href="/dkp">TOPP</a> - <a href="(URL address blocked: See forum rules)">Logs</a>
</div>
</div>
</td>
<td id="user_welcome"> Welcome, Valcore. <a href="/user/logout">Log out</a><br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
I aim to create my own wordpress theme eventually, but for now I have been trying to customize free open source themes made by others. I have a test one set up at http://www.theepicnetwork.com/gfn My query here is that I am trying to make that navigation menu function as a dropdown menu, but I can't seem to do it. I managed to make it Wordpress 3.0 compatible so I can edit the menu items through the wp admin cp. But i just need to successfully give it a drop down function. Here is all my code. ------- NAV MENU CSS Code: /* Navigations*/ #nav { position:relative; padding:0; margin:0 auto; height:68px; width:1002px; background:url(images/nav_bg.png) no-repeat center top; } #nav ul { position:absolute; z-index:1; top:0; left:50px; width:900px; height:65px; padding:0; margin:0; list-style:none; } #nav li { float:left; margin:0; padding:0; list-style:none; } #nav a { display:block; padding:27px 20px; float:left; border:none; font:bold 12px Myriad Pro, Helvetica, Arial, sans-serif; color:#fff; text-transform:uppercase; } #nav a:hover{ color:#f0ff21; background:url(images/nav_over.gif) repeat-x center top; }
INTENDED DROPDOWN CSS - I copied this from one of my other sites. Code: #dropmenu, #dropmenu ul {margin-top:0px; margin-left:3px;padding:0px; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#0A7B05; font-weight:bold;} #dropmenu a {display:block; padding:6px 1em; color:#000; border-right:0px solid #000; text-decoration:none; background:transparent url(images/menu-button.png);font-weight:bold;} #dropmenu a:hover {background:transparent url(images/menu-button-hover.png); color:#fff;} #dropmenu li {float:left; position:relative;} #dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;} #dropmenu ul a {border:1px solid #000;} #dropmenu li ul {border-top:0px solid #000; width:14.1em;} #dropmenu li ul a {width:12em; height:auto; float:left; border-bottom:1px solid #000;} #dropmenu ul ul {top:auto;} #dropmenu li ul ul {left:12em; margin:0px 0 0 10px;} #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;} #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
HEADER.PHP MENU LAYOUT Code: <div id="nav"> <ul id="dropdown"><li><a href="<?php echo get_option('home'); ?>">Home</a></li> <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?> </ul> </div>
----- any help will be appreciated 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! 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! 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. 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. 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/ 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? 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 Hi, I'm new to CSS and am trying to deign a navigation bar for a website. The problem that i face is trying to size the headings a little larger than the sub catagories. The code is as follows for the style sheet i have tried this: body{ font-family: Arial,sans-serif; color: #FFFFFF; line-height: 1.1; margin: 0px; padding: 0px; } a{ color: #FFFFFF; text-decoration: none; } a:link{ color: #FFFFFF; text-decoration: none; } a:visited{ color: #FFFFFF; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } b{ color: #FFFFFF; text-decoration: none; } b:link{ color: #FFFFFF; text-decoration: none; } b:visited{ color: #FFFFFF; text-decoration: none; } b:hover{ color: #FFFFFF; text-decoration: underline; } #navBar ul b:link, #navBar ul b:visited {display: block;} #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #0033CC; font-size: 70%; background-color: #112059; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ background-color: #0033CC; } #sectionLinks2{ position: relative; margin: 0px; padding: 0px; border-bottom: 1px solid #0033CC; font-size: 130%; background-color: #112059; } #sectionLinks b { display: block; border-top: 1px solid #cccccc; padding: 2px 0px 2px 10px; /*font-size: 130%;*/ } #sectionLinks b:hover{ background-color: #0033CC; } and i have the following code in the htm page: <STYLE> BODY { scrollbar-arrow-color:094588; scrollbar-shadow-color:f0f0f0; scrollbar-face-color:f0f0f0; scrollbar-highlight-color:094588; scrollbar-darkshadow-color:094588; .style1 {font-size: 16px; background-color: #112059; background-color: #FFFFFF; } a:hover { color: #FFFFFF; } .style1 {color: #FFFFFF} b:hover { color: #FFFFFF; }.style1 {color: #FFFFFF} </STYLE> <div id="navBar"> <div id="sectionLinks"> <div id="sectionLinks2"> <h3 class="style1">Menu</h3> <ul> <li><b href="index.htm">Home</b></li> <li><b href="product.htm">Products</b></li> <li><a href="index.htm">Computer Systems</a></li> <li><a href="products.htm">Components/Peripherals</a></li> <li><a href="#">Laptops</a></li> <li><a href="#">Refurbished</a></li> <li><b href="services.htm">Services</b></li> <li><a href="#">PC Repairs</a></li> <li><a href="#">Upgrades</a></li> <li><a href="#">Home Networking</a></li> <li><a href="#">In-home training</a></li> </ul> </div> </div> </div> However this only allows hyper links to work that are defined under a href not the larger b href as I so want, I know this is complicated and long winded but can anyone lend some usefull solution to my problem? Yours greatfully. I have a navigation done in CSS. I would like to have each button of the navigation have a left AND right border. This is something I've growled about for a long time, because I can't figure out the best way to do it other than haveing an empty link at the end of the list. Here's what I currently have... Code: <div id="nav"> <ul> <li><a href="#" title="Link 1" >Link 1</a></li> <li><a href="#" title="Link 2" >Link 2</a></li> <li><a href="#" title="Link 3" class="active" >Link 3</a></li> <li><a href="#" title="Link 4" >Link 4</a></li> <li><a href="#" title="Link 5" class="navlast">Link 5</a></li> </ul> </div> The class="navlast" puts a right border on the last list item, so that they all have a left and right border. The CSS to present this is as follows... Code:
#nav {
width: 760px;
float: left;
border-top: solid 1px #A1A1C1;
border-bottom: solid 1px #A1A1C1;
background-image: url(../i/navbg.gif);
background-repeat: repeat-x;
margin: 0;
padding: 0;
}
#nav ul {
margin: 0 0 0 25px;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
margin: 0;
}
#nav ul li a:link, #nav ul li a:visited {
display: block;
padding: 4px 20px;
color: #333;
font-weight: bold;
border-left: solid 1px #CCD0DF;
text-decoration: none;
}
#nav ul li a:hover {
text-decoration: none;
background-color: #F7F9FA;
color: #333;
}
#nav ul li a.navlast {
border-right: solid 1px #CCD0DF;
}
#nav ul li a.active {
text-decoration: none;
background-color: #F7F9FA;
color: #333;
}
The active class is set so that the page that is currently being looked at will be marked by that link looking like it's hovered state (in this case it's link 3). The only downfall to this is that the last list item can't have 2 classes, and to add the .active class styles to the .navlast list item will result in link 5 being highlighted all the time. I'm probably making this way too complicated, but is there anyone that might have a suggestion as to how I can get each link list item to have a border and still mark each page as being the one that is currently being viewed? 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? 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 Hey, i made a header in with some space to get a navigation line over. So i put it in its place with css but when i zoom in or out it won't stay in the middle like evrything else, i tried evrything, display:block, margin:0px, position:absolute Hello, im just new in CSS I've been wondering how did facebook did the navigation bar there.. the address bar (or maybe bookmarks bar) is really close to facebook's navigation bar and the navigation follows as I scroll can you please explain to me how did they do that? I want to do it on my site too... thank you! Hi, I have problem with my code here and need someone to tell me what i am doing wrong here is the url www.epicindex.com/newmain.shtml on the left hand side there is a link called history and when i select Husker power you will see the page for husker power now when you move your mouse on the history link it shows the sub links but those sub links are hidden behind the pic can someone tell me what i am doing wrong here is the code for the page for husker power Code:
<!-- #Include virtual="/webcontent/doctype.txt" -->
<html>
<head>
<!-- #Include virtual="/tagsm.htm" -->
<!-- #Include virtual="/webcontent/cssinclude.htm" -->
<title>EPIC Performance</title>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/nav.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/verticalnav.js">
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="lefthandnav">
<!-- #Include virtual="/webcontent/lefthandfile.htm" -->
</div>
<div class="righthandnav">
<!-- #Include virtual="/webcontent/righthand.htm" -->
<h1>History of Talent Identification Index</h1>
<p class="imageleft"><img src="/images/histhusker.jpg"></p>
<p>Left :<b>Tom Osborne</b><br/> 255 wins as Nebraska Head Football coach<br/> Three National Championships</p>
<p>
Right:<b>Bob Devaney</b><br/>
101 wins as Nebraska HEad Football Coach<br/>
Two National Championships
</p>
</div>
</div>
</body>
</html>
and here is the code for the css Code:
body
{
margin: 0;
padding: 0;
font-family: arial;
color: #000;
}
#wrapper {
width: 900px;
height:605px;
}
.lefthandnav
{
float: left;
width: 145px;
background-color:white;
padding:0px 5px 0px 0px;
}
.righthandnav
{
float: left;
width: 745px;
background-color:white;
padding: 0px 0px 0px 5px
}
.headerimgleft
{
height:75px;
padding:0px 0px 5px 0px;
}
.clearing
{
clear:both;
}
.headingtitle
{
font-weight: bold;
font-size: 15;
text-align:center;
}
.topline
{
margin: 0;
padding: 0;
width:94.3%;
margin:0px;
color: #CC0000;
background-color: #CC0000;
height: 5px;
}
.bl {background: url(bl.gif) 0 100% no-repeat #e68200;}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; text-align:center;padding:5px}
.clear {font-size: 1px; height: 1px}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
padding:5px 0px 0px 0px;
}
#menu dl {
float: left;
width: 8.7em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: bold;
background: #CC0000;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 145px; /*WIDTH OF MAIN MENU ITEMS*/
background-color:#CC0000;
text-align:center;
}
.glossymenu li{
position: relative;
background-color:#CC0000;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
.glossymenu li a{
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
.sponsordiv
{
background-color:#CC0000;
}
.sponsortexthead
{
text-decoration:underline;
font-weight:bold;
text-align:center;
}
.firstimage
{
float:left;
}
.secondfirstimage
{
float:left;
}
.thirdimage
{
float:left;
}
.mainpageholder
{
width:730px;
padding:30px 10px 10px 10px;
}
h1 {
color: #386cae;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 150%;
font-weight: bold;
margin: 20px 0 0 0;
padding:25px 0px 0px 0px;
}
.imageleft {
float: left;
margin: 10px 20px 10px 0;
position: relative;
}
.imageright {
float: right;
margin: 10px 0 10px 20px;
position: relative;
}
.noting {
background-color: #f7f5f6;
color: #000;
font-size: 80%;
margin-top: 10px;
padding: 5px 15px 0 5px;
border: 1px groove #000;
}
.noting p {
margin-top: 0;
}
i would appreciate any help i have spent a lot of time trying to figuring out what i am doing wrong thanks, todd 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. Hello all, Not sure if this is a CSS or Javascript question.. I have a page which has an external CSS sheet, with a part for the @media print styling. On this page I'm also using (throughout my site) a javascript navigation bar. The idea is that when user clicks on a print-button, the whole navigation bar disappears, before printing. The Javascript seems however to add additional DIVS when loading the page which are without any ID, class or nametag, so I tried to get to this "navigationbar-div" via CSS selector combinations - just to find out that apparently CSS cannot select these divs (- maybe because they were added by javascript at runtime???). No matter what I try, it's like CSS doesn't "see" there's additional divs there.. I've also tried to select the concerning DIVs through DOM, but apparently this is still buggy even for modern browsers, so I rather not touch it.. Is there anyway I can get rid of the Javascript navigation bar in my print stylesheet? Thanks for your help! |
|||||||