CSS - Navigation Sub-menus Showing Up Behind Floated Element...

I have two navigation menus on my site. One that is horizontal across the top and the second is vertical along the left side. Both of these have rollover effects.

I would like to code this with as few lines as possible. So far, I only have the code for the left-side navigation menu. What else should I add for the horizontal menu?

Code:

#navbar ul{
	list-style:none;
	margin:0; /* removes indent in IE and Opera */
	padding:0; /* removes indent in Mozilla and Netscape 7 */
	border:none;
	list-style-type:none; /*turns off display of bullet */
	}

#navbar li{
	border-bottom:1px solid #003366;
	margin:0 /*dictates the space between navbar items */
	}

#navbar li a {
	display: block;
	padding: 5px 0 5px 5px;
	border-left: 10px solid #1958b7;
	border-right: 0px solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	width: 100%
	}

#navbar li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 0px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	}

I'm a bit stumped as far as what I'm doing wrong. Big surprise, eh?

Basically, I made a dropdown navigation menu (tested in FF 3.6.8 and IE 8)...works great. I used an unordered list to do so (and jquery).

Well, the problem is, when I add another list to the page, it adopts some of the same properties as my menu

I do have an ID for the navigation menu, so I'm not sure what's going on here. Any help, thoughts, or ideas would be DEEPLY appreciated!

You can find the sample at:
http://www.myztacia.com/animated-menu2.html
I figured it was easier to post the link than force you to create the webpage yourself

Helllo all:
I am having difficulty getting a navigation list to display as separate boxes. I get one large box with all the clickable links therein. I want one box with each link place on it. Here is my HTML code for the list:
<ul id="nav">
<li><a href="hey therel">flight1</a></li>
<li><a href=" Eaglesoft">Eaglesoft</a></li>
<li><a href="state police"">State Police</a></li>
</ul>

Here is the associated style rule:#nav{font-family:arial;border-styleutset; padding:10px;list-style-type:none;

color:#000066;position:absolute;top:2.5in;left:9in;

background-color:#ffff00;width:2.7in;text-align:center;display:block;}
Can anyone tell me why this list is being parked in one box rather that three separate boxes. The name of my text editor is CoffeeCup. Please understand that I realize that the above html coding does not creat a link..this forum blocked my links..thanks

In Firefox, I've got a right div that is not repsonding to an auto width in FF.

I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing.

I've included a screen shot of the problem, any help is greatly appreciated.

- K

CSS Code
Code:

#MainContainer
{
	float: 	left;
	width: 	auto; 
}

#Main
{
	margin-right: 0.2em;
}

#MainContent
{
	padding: 0.5em 0.5em 0.5em 0.5em;
}


#SidebarContainer
{
	float: 	right;
	width: 	250px;
	 	
border-top: 1px solid #C0C0C0;
	padding-top: 5px;
	clear: right;

}

#Sidebar
{	
	padding-bottom:	    5px;
	background:     	#ADADAD;
	background-image:   url(../images/SidebarBackground.jpg);
	background-repeat:  no-repeat;
	clear:left;
}

#SidebarContent
{
	margin: 0.2em 0.2em 0.2em 0.2em;
}

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!

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

Hello,

I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one.

My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content.

I placed:
Code:

<br style="clear: both;">

after the content <div> which usually does the trick but it's not working for some reason...

And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus.

This happens in IE only.

Any ideas?

Page html/css:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	background-color: #f9dcb3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#cRightPaneBot	{
	background-color: #D9E0EA;
	border: 1px solid #9DA7B5;
	margin: 23px 0px 0px 0px;
	padding: 15px 10px 15px 15px;
	/*
    width: 673px;
	height: 238px;
	*/	
}

.cLeftPane	{
    margin: 0px 20px 0px 0px;
	border: 1px solid #9DA7B5;
    overflow: hidden;
	float: left;
    background-color: #F5F7FB;
	height: 223px;
    /*
    */
}

h1  {
    font-size: 1.5em;
    /*
	display: inline;
	*/
}

.breakAfter {
    margin: 0px 0px 10px 0px;
}

</style>
</head>

<body>
<div id="cRightPaneBot">
	<h1 class="breakAfter">My Title</h1>
	<div class="cLeftPane" style="width: 200px;">
		hello
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna. 
	</div><br style="clear: both;">
</div>
</body>
</html>

Aaaah!
another problem...

now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div.

when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value).

what now?
thanks

As always IE woes...

Anyway I have a design that I'm currently reworking into a css/div positioned site.

I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about.

The HTML is:
Code:

<div id="container">
  <div id="top"></div>
  <div id="brands">
   ....stuff here....
  </div>
  <div id="slides"></div>  <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
  <div id="vert_nav">
     ....stuff here....
  </div>
</div>

CSS
Code:

/* CSS Document */

html, body {
  background: #000000;
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
}

#container {
  width: 760px;
  padding: 0px;
  margin: 0px;
}

#top {
  width: 760px;
  height: 239px;
  background: url(../images/top.jpg) top left no-repeat;
}

#brands {
  width: 760px;
  height: 31px;
}

#slides {
  width:  667px;
  height:  350px;
  float: left;
  background: url(../images/slides.jpg) top left no-repeat;
T}

#vert_nav {
  width: 93px;
  height: 350px;
  float: right;
}

should.jpg is how the page is supposed to look.

shouldnt.jpg is how it is appearing in IE.

Hi, I'm having a familiar problem:
with this page

The the content on a contained and floated div is over running it's containing div.

I have had this problem before and using something like: Code:

#innerwrap:after {
	content:".";
	display:block;
	clear:both;
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Has worked before, but this time it's not.

I'm having to specify a unique class and heitht for the #main box or use <br/>. It would be nice not to have to do this.

Can anybody advise me what to look into please.

Thanks
James

Before I state the problem, let me say that I am working towards properly validated html and css. There are a couple tables in my design that I put in just to show the boss something pretty! They will be gone soon.

I have 3 places on the page where I'm using images as links to effect behavior with javascript or forms.

My menu's going down the left side of this template has +/- "buttons" to toggle nested lists on and off. By using margin-top:-14px they are lining up slightly higher then needed in FF, slightly lower then needed in IE and way to high in Safari. If i set the margin-top to 0, then I get it lined up nicely in safari and IE and FF are off. The images inside of the <li>'s

This is the css code I believe to be relevent

css Code:
Original - css Code .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } div.redbox img.plusminus { float:right; margin:-16px 3px 0 0; padding:0 0 0 0; height:10px; }

  

 .clearfix:after {


     content: ".";


     display: block;


     height: 0;


     clear: both;


     visibility: hidden;


 }


  


 div.redbox img.plusminus {


   float:right;


   margin:-16px 3px 0 0;


   padding:0 0 0 0;


   height:10px;


 } 

html Code:
Original - html Code <li id="item1" class="border-bottom clearfix"> <a href="/store/category/50">T-SHIRTS</a> </li> <li id="item2" class="border-bottom clearfix"> <a href="/store/category/51">PANTS</a> <a onclick="toggle('item2');"><img src="/images/closed.gif" alt="closed image" class="plusminus" class="plusminus" id="img_item2" /> </a> <ul id="ul_item2" class="closed"> <li class="sidebarsub"> <a href="/store/subcategory/325">PROTECTIVE</a> </li> </ul> </li>

  
<li id="item1" class="border-bottom clearfix">
        <a href="/store/category/50">T-SHIRTS</a>
    </li>

    <li id="item2" class="border-bottom clearfix">
        <a href="/store/category/51">PANTS</a>
        <a onclick="toggle('item2');"><img src="/images/closed.gif" alt="closed image" class="plusminus"  class="plusminus"  id="img_item2" />
</a>
            <ul id="ul_item2" class="closed">
                <li  class="sidebarsub">
                    <a href="/store/subcategory/325">PROTECTIVE</a>
                </li>

            </ul>
    </li>

Is this a common thing in CSS that there might be a tutorial out there on how to fix it?

I've looked at using overflow and that doesn't seem to fix the problem.

the link for the page...
Template
Thanks for having a look

sure i read an article on this somewhere but cant remember where, the problem is this

Code:

<div class="floated and cleared right">
stuff
</div>

<div class="fixed width" >
<img class="floated left">
lots of text
<div>

related to my previous layout post. the problem is that the img (infact any floated element, cleared or not) falls below the right floated div! (red box in attatched gif)

if i float and clear the first div left then the img is in the correct place within it but the div itseld drops below the right floated div

help!

I've never run into this before, but I have the following document structure and the right div's top margin is about 10px below the left in FF and Opera.(aligns fine in IE-AMAZING, but true) Every other time I have simply set the margin and padding both to 0px of my floated divs and it has brought it to the same height as my left div:

NOTE: I apologize, I don't have a link, this is being developed off line right now.

CSS code:

Code:

/* You guessed it, my container div */
div.container {
    clear: both; /* clears two divs above it */
    text-align: right;
    width: 100%;
}

/* Left div */

div.left {
    margin: 0px;
    padding: 0px;
    width: 49%;
}

/* Right div */

div.right {
    float: right;
    margin: 0px;
    padding: 0px;
    width: 49%;
}

xhtml markup:

Code:

<div class="container">

	    <fieldset class="info">

		<legend>Get Information For Your Next Trip Here!</legend>	

		    <p>
			Before you venture out on your next road trip, get your directions here.
		    </p>

		    <form action="myform.php" method="get">

			<div class="right">

			    <ul class="none">

				<li><img src="images/end.png" class="mapimg" alt="Enter Where Your Trip Will End" title="Enter Where Your Trip Will End" /> <label for="address2">Address/Intersection:</label> <br />
				    <input type="text" class="fbgcolor" id="address2" name="2a" size="35" maxlength="80" /></li>
				<li><label for="city2">City:</label> <br />
				    <input type="text" class="fbgcolor" id="city2" name="2c" size="35" maxlength="50" /></li>
				<li><label for="state2">State:</label> <label for="zip">Zip:</label> <br />
				    <input type="text" class="fbgcolor" id="state2" name="2s" size="2" maxlength="2" /> 
				    <input type="text" class="fbgcolor" id="zip2" name="2z" size="10" maxlength="10" /></li>
				<li><input type="submit" value="Get Directions" /></li>

			    </ul>

			</div>

			<div class="left"> 

			    <ul class="none">

				<li><img src="images/start.png" class="mapimg" alt="Enter Where Your Trip Will Begin" title="Enter Where Your Trip Will Begin" /> <label for="address">Address/Intersection:</label> <br />
				    <input type="text" class="fbgcolor" id="address" name="1a" size="35" maxlength="80" /></li>
				<li><label for="city">City:</label> <br />
				    <input type="text" class="fbgcolor" id="city" name="1c" size="35" maxlength="50" /></li>
				<li><label for="state">State:</label> <label for="zip">Zip:</label> <br />
				    <input type="text" class="fbgcolor" id="state" name="1s" size="2" maxlength="2" /> 
				    <input type="text" class="fbgcolor" id="zip" name="1z" size="10" maxlength="10" /></li>

			    </ul>

			</div>	

		    </form>
	
	    </fieldset>

<!-- End Container Div -->
	</div>

Both my code and css validate just fine.

Any ideas or good links?