help with inline list over graphic background 1

[PushCode]

Hi, my code is displaying my inline list improperly. As it is now, it's showing the left image and the nav bar background properly but then there is a line break and then it displays the inline list, then another line break and finally the right image.

It should be left image, inline list over the nav background, right image...all on the same line.

Here's my code

/* the css */
div#nav {
	height:32px;
	width:950px;
}
#navong {
	float:right;
	background-image:url(../img/nav_ong_bg.gif);
	background-repeat:repeat-x;
	height:32px;
	max-width:674px;
}
#navong li
	{
	display: inline;
	list-style-type: none;
	padding: 0 20px 0 0;
	margin: 0px;
}
<!-- the html -->
<div id="nav">
	<div id="navong">
		<img src="assets/img/nav_ong_lft.gif" width="4" height="32" alt="leftside orange navbar" style="text-align:left;" />
		<ul id="navmenu">
			<li><a href="#app.webroot#">Home</a></li>
			<li><a href="#app.webroot#about">About Us</a></li>
			<li><a href="#app.webroot#mgr">Account Manager</a></li>
			<li><a href="#app.webroot#contact">Contact Us</a></li>
		</ul>
		<img src="assets/img/nav_ong_rgt.gif" width="4" height="32" alt="rightside orange navbar" style="text-align:right;" />
	</div>
</div>

Anyone see where I'm going wrong here? Thanks!

 

[BillyRayPreachersSon]

You need to set your UL to be display inline as well.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[PushCode]

Thanks, that did the trick!

 

[PushCode]

Now I'm having problems with the link css. My links are supposed to be white, bold, no underline with hover/visited/active effects. But none of those are working. They're just showing up as black text with underlines.

/* the css */
#navong {
	float:left;
	background-image:url(../img/nav_ong_bg.gif);
	background-repeat:repeat-x;
	height:32px;
	max-width:675px;
}
#navong ul {
	display:inline;
}
#navong li
	{
	display: inline;
	list-style-type: none;
	padding-right:20px;
}
#navmenu a {
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
}
#navmenu a:hover {
	color:#FFF3D0;
	text-decoration:none;
}
#navmenu a:active {
	color:#FFE599;
	text-decoration:none;
}
#navmenu a:visited {
	color:#FFFFFF;
	text-decoration:none;
}

<!-- the html -->
<div id="navong">
		<img src="assets/img/nav_ong_lft.gif" width="4" height="32" alt="leftside orange navbar" style="text-align:left;" />
		<ul id="navong">
			<li><a id="navmenu" href="#app.webroot#">Home</a></li>
			<li><a id="navmenu" href="#app.webroot#about">About Us</a></li>
			<li><a id="navmenu" href="#app.webroot#mgr">Account Manager</a></li>
			<li><a id="navmenu" href="#app.webroot#contact">Contact Us</a></li>
		</ul>
		<img src="assets/img/nav_ong_rgt.gif" width="4" height="32" alt="rightside orange navbar" style="text-align:right;" />
	</div>

Any ideas? Thanks!

 

[traingamer]

You cannot have multiple ids of "navmenu". You may wish to try classes.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[BillyRayPreachersSon]

You also have multiple IDs of "navong"... Assuming you fix those so that the UL has the class of "navong", this would also work:

#navong a,
#navong a:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
#navong a:hover {
    color: #FFF3D0;
}
#navong a:active {
    color: #FFE599;
}

Note that I've swapped the pseudo classes to be in the correct order (visited should come before hover & active), and saved a whole rule in the process (the :visited block didn't need to be repeated)

As a pointer, your original CSS wouldn't have worked anyway, as you were targetting anchors inside something with an ID of #navmenu, when your anchors had an ID of menu, not their parent / ancestor.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[PushCode]

Thanks for the help so far. It's coming together.

I have two more issues I can't figure out. One is that all of the links are aligned at the bottom of the navong div. I need them to be aligned in the vertical middle...which I thought would be the default. Even if I put padding or margin space on the bottom of the link css, they still show up at the very bottom. Not sure what's going on there.

The other issue is that I'd like the navong div to be stretchable, which is how I've tried to set it up...but it's not stretching. It shows up at a minimal width regardless of browser window size.

Here's the current code:

/* the css */
#navong {
	float:left;
	background-image:url(../img/nav_ong_bg.gif);
	background-repeat:repeat-x;
	height:32px;
	max-width:675px;
}
#navong ul {
	display:inline;
}
#navong li
	{
	display: inline;
	list-style-type: none;
	padding-right:20px;
}
#navong a,
#navong a:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
#navong a:hover {
    color: #FFF3D0;
}
#navong a:active {
    color: #FFE599;
}

<!-- the html -->
<div id="navong">
		<img src="assets/img/nav_ong_lft.gif" width="4" height="32" alt="leftside orange navbar" style="text-align:left;" />
		<ul>
			<cfoutput>
			<li><a href="#app.webroot#">Home</a></li>
			<li><a href="#app.webroot#about">About Us</a></li>
			<li><a href="#app.webroot#mgr">Account Manager</a></li>
			<li><a href="#app.webroot#contact">Contact Us</a></li>
			</cfoutput>
		</ul>
		<img src="assets/img/nav_ong_rgt.gif" width="4" height="32" alt="rightside orange navbar" style="text-align:right;" />
	</div>

 

[Vragabond]

Having text-align on the img tag will help with nothing. You should remove it. I suppose you're talking about the two images at the beginning and end of the menu. Try vertical-align on those -- img should support vertical-align, although I remember seeing different results across browsers.

Failing that, you could try padding -- margin won't work because images are inline and have no margin -- padding at the appropriate end should prop the image in your direction.

Last but not least, you could try controlling the line-height on the div to achieve more of a vertically centered text and images.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[PushCode]

Actually, I'm talking about the text not the images. The images align just as they should. The text links are aligned at the bottom, no matter what I do.

 

[Vragabond]

Options 2 and 3 would work with text as well.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[PushCode]

I took off the text-align from the img tags, then experimented with aligns and paddings for the text but nothing was working. I could either only get it on the top or bottom...nowhere in between.

What I ended up doing was putting in three more divs, one left for the left img, one middle for the text links, and one right for the right img. That solved the problem. Now with a little top padding on the middle div, the text links appear vertically centered.

Thanks for all the help everyone.