PDA

View Full Version : Resolved Need list-based navbar help



sabatier
Jul 13th, 2010, 09:32 PM
I'm in the final throes of putting my revised websites live -- one umbrella for all. I've nearly but not quite debugged this navigation bar. I'm coding on Mac OSX in Firefox and the site has been seen in Safari and Windows-based IE so I hope you see what I do. Note that there are some minor issues on the page that I'm still working with, like some artwork and its alignment.

The URL below shows one segment of the web of sites with the navbar I'd like to use. I have a couple of problems with it that I can't troubleshoot, however. For me, the left corner of the navbar still shows a white rectangle that I can't shake. I need the navbar black throughout without eliminating the white border lines in the navbar or my white backgrounding of other elements on the page.

http://www.arterialsprayglasscompany.com/arterialspray/index.html

Also, on hover it jumps around so that the banner graphic jumps down the height needed to display the subordinate links. How can I fix this so that the graphic doesn't jump? I fixed some other jumping issues by ensuring that both levels of the list used to create the navbar had the same padding, but this one escapes me.

The last sites I created were in the late 90s, so this is a first full implementation of CSS for me over a website. Might be a little messy in there -- the styles are shown in the HEAD element.

Thanks for your help.

skywalker2208
Jul 13th, 2010, 09:59 PM
The URL below shows one segment of the web of sites with the navbar I'd like to use. I have a couple of problems with it that I can't troubleshoot, however. For me, the left corner of the navbar still shows a white rectangle that I can't shake. I need the navbar black throughout without eliminating the white border lines in the navbar or my white backgrounding of other elements on the page.

remove the float_right class from the div. The code is below. To me I don't see why you have the div with float_right class.



<div class="float_right">
<div class="nav">
<ul>
<li><A HREF="http://www.studiomecanique.com/index_new.html">HOME</A></li>
<li><a HREF="http://www.studiomecanique.com/studiomecanique/index.html">STUDIOMECANIQUE</A></li>
<li><A HREF="http://www.studiomecanique.com/katherine/index.html">KATHERINE ENOS</A>
<ul>
<li><A HREF="http://www.studiomecanique.com/katherine/enos_films.html">Films</A></li>

<li><A HREF="http://www.studiomecanique.com/katherine/enos_gallery.php?jgall_dir=Katherine+Enos%2F">Photography</A></li>
</ul>
</li>
<li><A HREF="http://www.studiomecanique.com/barry/index.html">THE PHOTOGRAPHY OF BARRY KAPKE</A>
<ul>
<li><A HREF="http://www.studiomecanique.com/barry/kapke_gallery.php?jgall_dir=Barry_Kapke%2F">All Galleries</A></li>
<li><A HREF="http://www.studiomecanique.com/barry/kapke_gallery.php?jgall_dir=Barry_Kapke%2FFrance%2F">France</A></li>
<li><A HREF="http://www.studiomecanique.com/barry/kapke_gallery.php?jgall_dir=Barry_Kapke%2FNudes%2F">Nudes</A></li>
</ul>
</li>
<li><A HREF="http://www.arterialsprayglasscompany.com/arterialspray/index.html">ARTERIAL SPRAY GLASS COMPANY</A>

<ul>
<li><A HREF="http://www.arterialsprayglasscompany.com/arterialspray/arterial_gallery.php?jgall_dir=Arterial+Spray+Glass+Company%2F">Glass Gallery</A></li>
</ul>
</li>
<li><A HREF="http://www.studiomecanique.com/pomegranates/pomegranates_index.html">POMEGRANATES WEBZINE</A></li>
<li><A HREF="">CONTACT</A></li>
</ul>
</div>
</div>





Also, on hover it jumps around so that the banner graphic jumps down the height needed to display the subordinate links. How can I fix this so that the graphic doesn't jump? I fixed some other jumping issues by ensuring that both levels of the list used to create the navbar had the same padding, but this one escapes me.


The only thing I can think of that you can do is use z-index with the position element have the sub menu hover over the banner when the user mouses over.

With the display element you are hiding the whole block element so that it doesn't take up space on the page. When you remove the display: none then the block element shows up and will shift elements. The css style visibility hides the contents of the block, but still maintains the elements dimensions.

SB65
Jul 13th, 2010, 10:03 PM
The left hand white rectangle is because you have the div floated right:


<!-- Site Navigation Bar --->

<div class="float_right">
<div class="nav">


Jut removing the float sorts out that.

Not quite sure what you want to happen to the drop down menu. If you want it on top of the main header, then the following changes do the trick in FF at least (haven't checked IE):


.nav li{position:relative}

.nav li ul{position:absolute;top:100%}

Here we're using absolute positioning to put the drop down menu on top of the items below.

You might also want to check out the validation errors here (http://validator.w3.org/check?uri=http://www.arterialsprayglasscompany.com/arterialspray/index.html).

sabatier
Jul 13th, 2010, 10:40 PM
Thanks SB65 and skywalker2208.

I tried to use absolute positioning on the graphic and got weird effects so abandoned that as a way to stop the graphic's jumping. I'll try it on the navbar and see if that does the trick. Thanks.

About the <DIV> element that right-aligns the navbar, yeah, I put that in this morning because I hadn't been able to right-align the navbar any other way. It wasn't aligned left before (might have been aligning along the left margin of a wrapper) and I prefer the right alignment. Before the alignment looked bad anyway, with space on the left and more space on the right. I experimented with floating right in some of the list styles before but that seemed to cause a lot of other side effects. Is there another fix I should have considered?

Thanks also for sending the validator link. I'm using Taco HTML editor and the syntax checker sure isn't bringing up some of those errors. I've sure got more work to do on that point.

sabatier
Jul 13th, 2010, 10:54 PM
SB65, following your lead on the setting you made in the .nav li ul style (use of the top property, which I haven't been using at all but will now investigate), I also tried removing the DIV that floated the navbar right and then instead changed the float property in the .nav li ul style to float right. And it worked. I have to reverse the ordering of the links in the navbar, but looks like this is the fix:

http://www.studiomecanique.com/arterialspray/index.html

Thanks a bunch. Now I'll look into those validation errors.