Hello all....

 

Getting closer to finishing up my first site. Thanks to bumfluff my gallery works!

 

Now one last items is to get a drop down menu from my navigation for the different galleries. I'm on the alistapart website reading through some of there tutorials but it doesn't seem to work. I tried this one Hybrid CSS Dropdown without the border though... but it didn't work and ended up with some bad coding affecting both Safari and Foxfire in different ways. Both not working at all. Can someone review my code to see what I need to add or delete so that under my gallery tab I get 3 subnavs for logos, products and photography?

 

Here is what I have for my navigation:

 

	  <ul id="nav">
	<li><a href="index.html" title="home">company</a></li>
	<li><a href="aboutus.html" title="about us">about us</a></li>
	<li><a href="services.html" title="services">services</a></li>
  <li><a href="gallery.html" title="gallery">gallery</a>
		<ul>
		<li><a href="logos.html" title="logos">logos</a></li>
		<li><a href="products.html" title="products">products</a></li>
		<li><a href="photography.html" title="photography">photography</a></li>
		</ul>
	</li>
	<li><a href="clients.html" title="clients">clients</a></li>
	<li><a href="contact.html" title="contact us">contact us</a></li>
  </ul>
</div>

 

Here is my CSS:

 

}
#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #1E4164;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
width: 130px;
}
#nav li a:hover {
color: #E66D21;
text-decoration: none;

}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
width: none;

}
#nav ul li {
position: relative;

}
#nav li ul {
position: absolute;
left: 129px;
top: 0;
display: none;

}
#nav li:hover ul, li.over ul {
display: block;

 

Thanks,

Dave

R_d0g

After a little tweaking it's kind of working but now the question is how do I get it to be positioned next to the main navigation? My main navigation is center page but the drop downs are at the top of the page?

Have you got a live site for us to see?

Have you got a live site for us to see?

 

Not yet but I can zip it and email it?

Of course you can.

Of course you can.

 

Do you have an email or should I just place it on here as an attachment?

 

Oh, BTW- thanks!

Email address should be on my profile page or you can post it here as an attachment (probably easier)

Email address should be on my profile page or you can post it here as an attachment (probably easier)

 

Here you go.

vinylrocketcreativegrp4.zip

Here's the changed css:

@charset "UTF-8";
/* CSS Document */

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#wrapper {
width: 780px;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
text-align: left;
}
#header {
margin: 0px;
padding: 0px;
height: 100px;
width: auto;
background-color: #f1f1f1;
}
#container {
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-attachment: scroll;
background-image: url(back.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
height: 1%;
width: auto;
}
#left {
margin: 0px;
width: 160px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
}
#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #1E4164;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
width: 130px;
}
#nav li a:hover {
color: #E66D21;
text-decoration: none;

}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
width: none;

}
#nav li ul {
position: absolute;
top:325px;
left:200px;
visibility:hidden;

}
#nav li:hover ul{
visibility:visible; 
top:325px;
left:200px;
}
#center {
height: 375px;
width: 504px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
line-height: 1.8em;
}
h1 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#right {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
height: auto;
width: 160px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
text-align: center;
padding-right: 0px;
padding-left: 0px;
background-color: #FFFFFF;
margin: 0px;
}

I've changed from using display:none; to visibility:hidden and I've adjusted the positioning of the nested sub nav.

You also had a few small typos in your code.

It seems to be working on Firefox and IE7.

However, it won't work in IE6 because you are using li:hover and IE6 only applies hover to link elements (ie a:hover)

Let me know how you get on

Thanks ElanMan!

 

It does work better but not quite right at least when I check it. What still happening is:

 

Safari:

The subnavs are directly under the navigation. When I roll my mouse over gallery the subnavs appear directly under the main navigation area. So the last line in my main navigation is "contacts" then the text "logos" appears directly under.

 

Firefox:

When I roll my mouse over the text "gallery," the subnavs appear to the left about 100px?

 

Weird?

 

I do appreciate the help!

I changed

 

#nav li:hover ul{
visibility:visible; 
top:325px;
left:200px

to

 

#nav li:hover ul{
visibility:visible; 
top:325px;
left:390px

 

Works great in safari but Firefox it's kind of over towards the left see screen shots:

 

Firefox

 

Safari

Very strange.

I've now checked in Firefox, IE7, Opera and Safari for Windows and they all appear the same on my machine

I just checked Opera to and this is what I got

 

 

Weird?

 

I'm checking them out on:

 

Safari 3.1.1

Firefox 2.0.0.14

Opera 9.2.1

So the problem is that the subnav is not being contained within my container like my main navigation menu. It's basically starting the measurement off the top corner. Moving the browser window bigger and smaller is moving the subnav to the right and left. I thought that everything on my CSS style would be contained where I needed it to be but I guess that's not the case, beginners mistake.

 

Is there a way to fix that position where I need it?

 

ElanMan- Thanks for the help today.

Right, after another look, you have a lot of errors with your html (no body or head tags for a start).

I should have checked this at the start but assumed it was ok.

I'll fix it up and make it valid and post it back here for you.

Here is the html that is now validated:

 <!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 name="description" content="Vinyl Rocket Creative Group is a San Diego based Creative Group providing creativity and design for both new and established businesses to reach their full potential. Allow us to become your inhouse art department." />
<meta name="keywords" content="vinyl rocket creative group, san diego, corporate identity, branding, image building, packaging, logo design, photography, graphic design, brochures, product catalogs, creative, marketing, advertising," />
<title>Vinyl Rocket Creative Group</title>
<link href="lightbox2/css/styles.css" rel="stylesheet" type="text/css" />
<link href="assets/css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
 <div class="top"><img src="assets/images/toplogo.gif" alt="Vinyl Rocket Creative Group Logo" width="780" height="152" /></div>
  <div class="top"><img src="assets/images/VRCGbar.png" alt="VRCG Top Bar" width="780" height="64" /> </div>
  <div id="container">
 <div id="left">
   <ul id="nav">
	 <li><a href="index.html" title="home">company</a></li>
	 <li><a href="aboutus.html" title="about us">about us</a></li>
	 <li><a href="services.html" title="services">services</a></li>
	 <li><a href="gallery.html" title="gallery">gallery</a>
		  <ul>
		 <li><a href="logos.html" title="logos">logos</a></li>
		 <li><a href="products.html" title="products">products</a></li>
		 <li><a href="photography.html" title="photography">photography</a></li>
		 </ul>
	 </li>
	 <li><a href="clients.html" title="clients">clients</a></li>
	 <li><a href="contact.html" title="contact us">contact us</a></li>
   </ul>
 </div>
 <div id="center">
   <h1>| COMPANY</h1>
   <p>Vinyl Rocket Creative Group is located in San Diego, California. We are committed to providing high-quality design solutions for our clients' identity, print, and web needs. Allow our creative services to launch your new or established business to the next level. No job is too big or too small. Expert service and successful results.



   We are designers with over 17 years experience, we can help you create a distinctive corporate identity, attract attention and build credibility. We can clearly communicate your message, effectively promote your business, product, service or event. Allow Vinyl Rocket Creative Group be your inhouse art department.</p>
   <p> If you are interested in how Vinyl Rocket Creative Group can help you create a more polished identity, print, or web project, please contact us today.</p>
 </div>
 <div class="clearer"> </div>
  </div>
  <div id="bottom"><img src="assets/images/bottombar.png" alt="VRCG Bottom Bar" width="780" height="63" /></div>
  <div id="footer">
 <div class="clearer"></div>
 <p>©2008 Vinyl Rocket Creative Group; All Rights Reserve: Designed by VRCG</p>
  </div>
</div>
</body>
</html>

 

I've also changed your css.

I won't post all of the code just the parts I've changed.

First, I've positioned the list item relatively.

#nav li {position:relative;}

This means that the nested list, when positioned absolutely, takes its position with reference to the list item.

 #nav li ul {
 position: absolute;
 top:0px;
 left:6em;
 visibility:hidden;

}
#nav li:hover ul{
 visibility:visible; 
 top:0px;
 left:6em;
}

 

Notice that I've positioned it 6em from the left. This means that if the text is enlarged, the nested list will still clear the parent list item.

I hope that makes sense. Give it a whirl and see how it goes

ElanMan..... OH MAY FREAKIN G-D.... you just performed an minor miracle...LOL

 

I have been going over this over and over and nothing seemed to work. It does now! It's a little mind boggling how much stuff you have to learn to build a quality web site.

 

I can't thank you and bumfluff enough for taking the time to help someone you don't even know.

 

Compared to other web forums, in my eyes, this is definitely the best!

 

Thanks,

Dave

R_d0g

I'm really pleased that you got it sorted out!