Menu with Classes for Each SubMenu, Spacing not Correct

HTML & CSS
21

I also FTP’d my styles to the web domain, and nothing received new styles! It displays plain links…

But i still can’t get that blasted Div to make its appearance back onscreen from its -8000em distance.

22 
#pMenu div{
	[b]left:-999px;[/b]
	position:absolute;
	
	/*second gradient*/
	background: #fcfff4; /* Old browsers */
	background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* W3C */
}

[b]#pMenu li:hover div,[/b]
#pMenu a:focus+div {
	[b]left: 0;[/b]
}

When you state 0 (or “auto” on smart, non-IE browsers), that’s referenced from the positioned ancestor (our li with position: relative on it).

That’s how positioning works. The parent (the li) is position:relative, which without lefts or tops or any coordinates, sits exactly where it was before, but has become a positioned ancestor for its children.
The div is one of its children. The anchor is another of its children. When we set position: absolute on the div, the div is removed from the document flow (suddenly, none of the other elements can “see” it… they won’t get out of its way, and it can’t bump anyone down the page… as if we turned it into an actual Post-it note and stuck it on the monitor), and it believes by default (in most browsers anyway) that its top left corner should sit at its positioned parent’s top left corner. That means, the div’s left: 0; top: 0 should be the same as the top left corner of the li.

So when we pull that div -whateverunits to the left, that’s pulling it -whateverunits away from that point. So setting it to 0 should set the div back at its positioned parent’s (the li) left edge. Setting instead the right side to 8000em is going to confuse the browser: if the left side is -8000em to the left, and the right side is supposed to be 8000em to the right, then the div should have to stretch to 16000em wide! Which it can’t since I think you set a width somewhere (if you didn’t, you should. Absolutely positioned elements like to shrink-wrap to their content. I set a width on my divs in this case).

23

Your Advice is :smiley:gReAt:D.

Now, that I have my div onscreen when it’s supposed to be there and not, this is starting to come together. I have 2 questions more about styling:

  1. With absolute positioning on the child div, the menu hugs the bottom lettering, impeding the bottom portion of the block with gradient. I am trying to move the div down about 8-10px to be in the right spot just under the block.

  2. With my <h2> tags, I want to push them up a bit to be closer to the top of the div, but when I use padding attributes, it only puts distance between the <h2> and the nested <ul> and doesn’t move up.

Here’s my CSS so far:


/********************/
/*PERSONAL NAV MENU**/
/********************/
#pMenu{
	padding-bottom:23em;
	padding-left:8em;
}

#pMenu a{
	text-decoration:none;
}

#pMenu li{
	list-style:none;
	float:left;
	margin-right:1em;
	position:relative;
}

#pMenu li a{
	color: #FFF;
	text-shadow:1px 1px 1px #000;
	width:auto;
	padding-left:4%;
	padding-right:4%;
	padding-top:.2em;
	padding-bottom:.2em;
	border:.2em groove #0F0;
	text-shadow:1px 1px 1px #000;
	font-size:20px;
	
	/*begin main gradient*/
	background: #a90329; /* Old browsers */
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
	/*end main gradient*/
}

	#pMenu a:hover, #pMenu a:focus, #pMenu a:active {
          color:#FF0;
		  
		  /*begin hover gradient top level*/
		  background: #a0030b; /* Old browsers */
		background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); 		/* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, 			color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); 				/* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
        }
	
#pMenu div{
	left:-999em;
	position:absolute;
	
	/*second gradient*/
	background: rgb(96,108,136); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); 	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}

#pMenu li:hover div, #pMenu a:focus+div{
	left:0;
	border:.1em solid #003;
}

#pMenu div a{
	text-decoration:none;
	color:#0C0;
	text-shadow:2px 2px 2px #000;
	background:none;
	filter:none;
	border:none;
	font-size:1em;
}

#pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
	color:#0F0;
	background:none;
	filter:none;
	border:none;
}

#pMenu h2{
	text-align:left;
	font-size:1em;
	text-shadow:1px 1px 1px #000;
	padding-top:-.4em;
	padding-left:.3em;
}


/******************/
/*End Personal Nav*/
/*****************/

HTML:


<!-- begin Personal navigation menu -->
<ul id="pMenu">
	<li><a href="http://www.atlantareviewgroup.com/health.php">health</a>
    		<div>
        		<h2><u>weight loss</u></h2>
               		  <h3>fitness</h3>
                      		<ul>
                       		  <li><a href="#">under construction</a></li>
                            </ul>
                      <h3>dieting</h3>
                      		<ul>
                       		  <li><a href="#">under construction</a></li>
                            </ul>
   
            	<h2><u>skin care</u></h2>
                   <ul>
               		  <li><a href="#">under construction</a></li>
        	       </ul>
			</div>
    </li>    
	<li><a href="http://www.atlantareviewgroup.com/insurance.php">insurance</a>
   		  <div>
            	<h2><u>property insurance</u></h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2><u>auto insurance</u></h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2><u>health insurance</u></h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2><u>annuities</u></h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
       	   			</ul>
           </div>
   	   </li>

	<li><a href="http://www.atlantareviewgroup.com/general.php">general</a>
   		  <div>
        		<h2><u>electronics</u></h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2><u>style &amp; fashion</u></h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2><u>food/dining</u></h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
                    </ul>
            	<h2><u>cars/auto</u></h2>
                	<ul>
               		  <li><a href="#">under construction</a></li>
       				</ul>
            </div>
   	    </li>

	<li><a href="http://www.atlantareviewgroup.com/dating.php">dating</a>
    		<div>
            <ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
            </div>
    	</li>
	
	<li><a href="http://www.atlantareviewgroup.com/education.php">education</a>
    		<div>
            <ul>
        		<li><a href="#">under construction</a></li>
        	</ul>
            </div>
    	</li>                    	
</ul>
	<!-- end Personal navigation menu-->
24

Notice: I have solved both my problems using margin-top :slight_smile:

25

From the last post, I have attempted to move the <h3> units up a little bit closer to the <h2> either with padding-top or margin-top, but it won’t budge. Here’s the CSS I added for h3:


#pMenu h3{
	text-align:center;
	text-shadow: 1px 1px 1px #000;
	font-size:.8em;
	margin-bottom:.1em;
	padding-top:.1em;
}

Why won’t it move as I want it to go up?

26

In this case I’d put (temporarily) a class on one of the divs just so you can style that one to remain on-screen while you play with the stuff inside.

Then I’d use something like Firebug to see if there’s a bottom margin on the h2 (if you didn’t zero or override browser default margins on h2’s, the you might have some default margin-bottom on them… you could also try setting #pMenu div h2’s margin-bottom to 0 to see) or if it’s a default line-height.

So you could either set the div h2’s margin-bottom to 0 and see what that does… or if that’s not enough you could then also try
#pMenu div h2+h3 {
/so we’re styling h3’s who come directly after h2’s inside that div/
margin-top: -.2em; /or whatever, play with it/
}

The negative padding didn’t work earlier because padding can’t have a negative number according to the specs, but you can have negative margins.

27

Now, I’ve tried to give the div’s more width, and it threw off my text alignment. All of the <a> tags get bunched up, one on top of another, and the <h2>'s come off from their text alignment.

Current CSS:


/********************/
/*PERSONAL NAV MENU**/
/********************/
#pMenu{
	padding-bottom:23em;
	padding-left:8em;
}

#pMenu a{
	text-decoration:none;
}

#pMenu li{
	list-style:none;
	float:left;
	margin-right:1em;
	position:relative;
}

#pMenu li a{
	color: #FFF;
	text-shadow:1px 1px 1px #000;
	width:auto;
	padding-left:4%;
	padding-right:4%;
	padding-top:.2em;
	padding-bottom:.2em;
	border:.2em groove #0F0;
	text-shadow:1px 1px 1px #000;
	font-size:20px;
	
	/*begin main gradient*/
	background: #a90329; /* Old browsers */
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
	/*end main gradient*/
}

	#pMenu a:hover, #pMenu a:focus, #pMenu a:active {
          color:#FF0;
		  
		  /*begin hover gradient top level*/
		  background: #a0030b; /* Old browsers */
		background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); 		/* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, 			color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); 				/* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
        }
	
#pMenu div{
	left:-999em;
	position:absolute;
	margin-top:.5em;
	width:20em;
	border:.1em solid #003;
	
	/*second gradient*/
	background: rgb(96,108,136); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); 	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}

#pMenu li:hover div, #pMenu a:focus+div{
	left:0;
}

#pMenu div a{
	text-decoration:none;
	color:#0C0;
	text-shadow:2px 2px 2px #000;
	background:none;
	filter:none;
	border:none;
	font-size:1em;
	text-align:left;
	padding-left:.2em;
}

#pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
	color:#0F0;
	background:none;
	filter:none;
	border:none;
}

#pMenu h2{
	text-align:left;
	font-size:1em;
	text-shadow:1px 1px 1px #000;
	margin-top:.3em;
	margin-bottom:.1em;
	padding-left:.2em;
	padding-top:.2em;
}

#pMenu h3{
	text-align:left;
	text-shadow: 1px 1px 1px #000;
	font-size:.8em;
	margin-bottom:.1em;
	margin-top:.1em;
	padding-top:.1em;
}


/******************/
/*End Personal Nav*/
/*****************/
28

Absolutely the ONLY thing you changed between working and not working was the
width: 20em;
on the div?

29

The only other thing I know I changed at the time was I set the border inside of #pMenu div. I think I also put text-align:left; for the h2’s and h3’s, too.