Need help with vertical alignment

I have an unordered list and am having trouble centering each list item vertically within the #nav space which is 34px high.

I used the global element thingy (*) to set margin and padding to 0 for all elements, and am going crazy on this one.

Visually I want to vertically adjust the green dotted box items within the red dotted box item which is 34px high. (Look for the /* Why doesn’t this work?? */ comment!!)

Here is my code…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--
		<link type="text/css" rel="stylesheet" href="Menus_05_Dropline_ChicagoTribune.css">
		-->
		<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Tahoma, Verdana, Century Gothic, Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #FFF;
	text-align: center;				/* Center for IE */
	font-size: 100%;
}

h1, h2 {
	margin: 1em 0em;
}

#navwrap {
	position: relative;
	width: 80%;
	height: 100px;
	margin: 0px auto;
  padding-bottom: 0px;			/* Landing Pad for Dropline */
	background: #E6E6FF;			/* Blue Gray (Lighter) */
	border: 1px dotted red;
}

#nav{
	list-style: none;
	width: 100%;
  height: 34px;							/* 37px total with top padding (img height) */
	border: 1px dotted red;
}

#nav li {
	float: left;
	width: 25%;
	text-align: center;
}


#nav li a{
	display: block;
	text-decoration: none;
	font-weight: 900;
	color: #4682B4;						/* Steel Blue (Darker) */
  vertical-align: bottom;		/* Why doesn't this work?? */
	border: 1px dotted green;
}

#nav li a:hover,
#nav li.current{
	background: #4682B4;			/* Steel Blue (Darker) */
	color: #FFF;
}


ul#nav li.current a:hover {color:pink;}
ul#nav li.current ul{
	left: 0;
	z-index: 1;
	top :auto;}
	/* display the submenu for the current page in case js is disabled*/


#navwrap ul#nav ul li a{
	font-size: 80%;
	color: #000;
	width: auto;
	height: auto;
	display: inline;
	padding: 0 5px;
	border-right: 1px solid #000;
}


p{
	width: 35em;
	padding-top: 25px;
	margin-left: auto;
	margin-right: auto;
}



		</style>
	</head>
	<body>
		<h1>Drop Down Menu</h1>
		<h2>based on the <a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">suckerfish</a> menus</h2>
		<div id="navwrap">
			<ul id="nav">
				<li><a href="#">NEWS</a></li>
				<li><a href="#">POLITICS</a></li>
				<li><a href="#">BUSINESS</a></li>
				<li><a href="#">SPORTS</a></li>
			</ul>
		</div>
		<p>The important thing about the drop down menu is that the subnav menus are displayed on each page by default.</p>
		<p>If js is disabled or hover not suported then the site is navigable by using the top links alone.</p>
	</body>
</html>

Thanks,

Debbie

Vertical-align does not apply to a block displayed box. :slight_smile:

For vertical aligning the link text within the box, try “line-height:34px”.

Sorry, I’m not following you.

Where is my code wrong?


#nav{
	list-style: none;
	width: 100%;
  height: 34px;							/* 37px total with top padding (img height) */
	border: 1px dotted red;
}

#nav li {
	float: left;
	width: 25%;
	height: 100%;
	text-align: center;
}

#nav li a{
	display: block;
	text-decoration: none;
	font-weight: 900;
	color: #4682B4;						/* Steel Blue (Darker) */
  vertical-align: bottom;		/* Why doesn't this work?? */
	border: 1px dotted green;
}

#nav styles my Unordered List, and sets the height to 34px. (I suppose UL is a “block” item, right?

#nav li styles each List Item and make each 25% of the total UL width. It also sets each LI to 100% height - which sorta seems redundant since I said UL is 34px high?! (Is LI a “block” item?)

#nav li a styles the “News Section” text in each LI. Not sure why I have display: block here?!

I am confused because visually I want #nav li a to be vertically centered between #nav li ?!

Debbie

Hi,

Erik was saying do this:


#nav li a {
   [B] line-height:34px;
    height:34px;[/B]
}


That will make the line height equal to the height and the text will be vertically centered by default. You can only use that method where you don’t want text to wrap to another line.

Vertical-align only applies to “inline elements” (and table cells) and only applies to the alignment of elements within that single line. e.g. if you have different sizes of text in a line you can change their vertical-alignment with respect to each other using the vertical-align properties.

There is no similar function for block elements (more’s the pity).

Block and inline elements are listed here:

Paul, thanks for the explanation.

Say, I am really getting lost here with my main task which to to create a Top Menu with a Dropline.

In this post, you referred me to an old example of yours that I have been trying to figure out.

Where I am getting confused, is all of the similar yet really different approaches to what I am trying to do?! (From my newbie stance, the way you and Rayzur and Eric Watson and Ralph are doing things are fairly different and I’m spinning my wheels?!) :frowning:

Here is the part of your code that led to this thread…


#navwrap {
	position: relative;
	width: 80%;
	height: 100px;
	margin: 0px auto;
  padding-bottom: 0px;			/* Landing Pad for Dropline */
	background: #E6E6FF;			/* Blue Gray (Lighter) */
	border: 1px dotted red;
}

#nav{
	list-style: none;
	width: 100%;
  height: 34px;							/* 37px total with top padding (img height) */
	border: 1px dotted red;
}

#nav li {
	float: left;
	width: 25%;
	height: 100%;
	text-align: center;
}

#nav li a{
	display: block;
	text-decoration: none;
	font-weight: 900;
	color: #4682B4;						/* Steel Blue (Darker) */
  vertical-align: bottom;		/* Why doesn't this work?? */
	border: 1px dotted green;
}

And here is how Rayzur is doing things…


#nav {
    position:relative;
    width: 980px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    background: #E6E6FF;
    border-bottom: 36px solid #4682B4;/*landing pad for dropline*/
}
#nav li {
    float:left;
    font: bold 14px/18px arial, helvetica, sans-serif;
}
#nav a {
    float: left;
    width: 140px;
    padding: 9px 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #4682B4;
}

It seems like Rayzur gets the same end effect but with one less layer. (You have #nav inside #navwrap and he just skips to a #nav)

Can I use his streamlined approach, or is there some rock waiting to fall on me if I do?! :lol:

Rayzur finally whipped up something that is exactly what I wanted here, but before I try to learn his code, I want to understand why your approach seems fairly different and make sure your way isn’t better or whatever. (BTW, isn’t he a sweety?!) :slight_smile:

I want to be a “jedi” like all of you, but with a million different approaches, I never know which is right or best and so it just leads to more “analysis paralysis” on my part! :blush:

Hope you can follow all of this?!

Debbie

Yes Ray is using a thick border-bottom to provide the background rather than an extra div. I believe my old example originally had graphical backgrounds hence the extra div.

Rays version will be fine and is more up to date than mine so I would continue using his version (it needs a little help though if you are supporting IE6 (which I’m sure Ray will address later)).

There are many ways to do the same thing with CSS whch is its beauty but also makes it hard for beginners to grasp. The basics are usually the same but the tools you can use are different.

I think you should just concentrate on one at a time rather than confuse yourself with many. Ray’s, Eric’s and Ralph’s will all be good as they are competent coders but I don;t think you need to confuse yourself by disecting all at this stage.

Just run with Ray’s and know that it will be good.

Oh, okay.

Rays version will be fine and is more up to date than mine so I would continue using his version (it needs a little help though if you are supporting IE6 (which I’m sure Ray will address later)).

There are many ways to do the same thing with CSS whch is its beauty but also makes it hard for beginners to grasp. The basics are usually the same but the tools you can use are different.

I think you should just concentrate on one at a time rather than confuse yourself with many. Ray’s, Eric’s and Ralph’s will all be good as they are competent coders but I don;t think you need to confuse yourself by disecting all at this stage.

Just run with Ray’s and know that it will be good.

Yes, I think all of you guys are STUDS!! :smiley: And I certainly know that Rayzur knows his stuff, but I just wanted to be sure that I was going down the right path!

So I’m glad we agree that following Rayzur’s code for now is the best way to go. And as I get better - if ever?! - maybe I can revisit other ways to do the same thing.

Thanks for everyone’s help so far!

Debbie