css alternate list background problem

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

skeeterbug - 26 Dec 2004 03:42 GMT

not sure what i'm doing developing on xmas... but i guess we all have
our own demons! -lol-

i'm using the following css to style my horizontal menu...

/* STYLE HORIZONTAL MENU */

#hmenu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#hmenu li
{
float: left;
margin: 0 0.15em;
padding: 0;
text-align: center
}

#hmenu li a
{
background: url(../images/hmenu.gif) #fff bottom left repeat-x;
height: 1.3em;
line-height: 1.3em;
float: left;
width: 7.5em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Commented backslash hack hides rule from IE5-Mac \*/
#hmenu li a
{
float: none
}
/* End IE5-Mac hack */

/* KEEP HMENU FROM WRAPPING */

#hmenu
{
width: 50em;
}

on the php side, i have a <ul> in a <div="hmenu">.

everything works great except i want the ends of this list to have a
different background b/c they aren't links - they portray other
information (ie, contact phone number and current page name).

i've tried setting .blueback in my css document and putting
class="blueback" in the <a> and in the <li> with no luck.

i tried a.blueback and li.blueback.

no luck.

does anyone have any ideas? the css will reveal i'm using an image as
my main background and it continues to display no matter what i try.
tia...

...and merry christmas! :-)

Reply to this Message

Neal - 26 Dec 2004 07:00 GMT

> not sure what i'm doing developing on xmas... but i guess we all have
> our own demons! -lol-
>
> i'm using the following css to style my horizontal menu...

Happy ho-ho to you. What I want for Xmas is a URL to an examplr of your
problem. That will really speed up the process.

Jingle jingle.

Reply to this Message

Skeets - 26 Dec 2004 07:20 GMT

neal, the code isn't up b/c it has fallen and can't get up! ;-)

happy new year!!!

here is my html:

<div id="hmenu">
<ul>
<li><a class="white"><span><?php print $currentpage ?></span></a></li>
<li><a href="elistings.php">Email Listings</a></li>
<li><a href="listings.php">Online Listings</a></li>
<li><a href="mortgage.php">Mortgage Area</a></li>
<li><a href="drawing.php" class="red"><span>Enter To
Win!</span></a></li>
<li class="blueback"><a
class="white"><span>858-733-2886</span></a></li>
</ul>
</div>

here is my css:

li.blueback {background-color: #0d2474;

}

a.red span { color: #f00;
text-decoration: none;
}

a.white span { color: white;
text-decoration: none;

/* STYLE HORIZONTAL MENU */

#hmenu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#hmenu li
{
float: left;
margin: 0 0.15em;
padding: 0;
text-align: center
}

#hmenu li a
{
background: url(../images/hmenu.gif) #fff bottom left repeat-x;
height: 1.3em;
line-height: 1.3em;
float: left;
width: 7.5em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

Reply to this Message

Neal - 26 Dec 2004 07:50 GMT

> neal, the code isn't up b/c it has fallen and can't get up! ;-)
>
> happy new year!!!
>
> here is my html:

Oh jeez, I'd be doing a disservice by wading through this. It simply won't
do.

Let me point out ways to improve, please.

> <a class="white"><span><?php print $currentpage ?></span></a>

Why add a span? Why not style the a instead? The span unnecessarily
complicates your markup. And your CSS as a result. Please fix that up.

Geocities has free webspace. use that if you have access to nothing
better. Really, the ability to click and see is going to yield you more
responses than your current mess.

> here is my css:
>
> li.blueback {background-color: #0d2474;
>
> }

If you define background-color, always also define color.

> a.red span { color: #f00;
> text-decoration: none;
> }
>
> a.white span { color: white;
> text-decoration: none;

Close with }? Did you? That's why a URL is preferred...

And text-decoration: none? How do I know there's a link?

Please don't post more code. Get something online, post the URL. Please.

Reply to this Message

Andrew Thompson - 26 Dec 2004 08:03 GMT

> ..Get something online, post the URL. Please.

For more tips on preparing a test case..
<http://www.spartanicus.utvinternet.ie/help_us_help_you.htm>

Signature

Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

Reply to this Message

Skeets - 26 Dec 2004 08:08 GMT

fair enough. i will set out to get it online tomorrow after i get some
sleep and get the links up to speed so that my site is consistently
brkern and not jsuper jacked up. i used span b/c i was having a
problem styling those <li>s. i agree it doesn't make much sense if i
can figure out the styling.

good point about the links. usability is on my list to improve.

i appreciate the interest in helping - thank you.

> > neal, the code isn't up b/c it has fallen and can't get up! ;-)
> >
[quoted text clipped - 36 lines]
>
> Please don't post more code. Get something online, post the URL. Please.

Reply to this Message

skeeterbug - 26 Dec 2004 23:15 GMT

here's a link...

http://www.geocities.com/operationsengineer1/

i want the two side menu locations to have a solid dark blue background
and white text since they aren't going to links - they will display
information (current page and phone number).

i tried creating class

.blueback {background-color: blue;}

and call that class in <a class="blueback"> and <li class="blueback">
for the appropriate list items. it didn't do what i hoped it would.

i think this may have something to do with the id i'm calling.

any help would be appreciated.

> not sure what i'm doing developing on xmas... but i guess we all have
> our own demons! -lol-
[quoted text clipped - 64 lines]
>
> ...and merry christmas! :-)

Reply to this Message

Jim Moe - 27 Dec 2004 07:04 GMT

> here's a link...
>
> http://www.geocities.com/operationsengineer1/

Change
li a .blueback {background: blue bottom left repeat-x;}
to
#hmenu li.blueback, #hmenu a.blueback {color: white; background: blue
bottom left repeat-x;}

Signature

jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Gus Richter - 27 Dec 2004 14:39 GMT

>> here's a link...
>>
[quoted text clipped - 5 lines]
> #hmenu li.blueback, #hmenu a.blueback {color: white; background: blue
> bottom left repeat-x;}

Actually, this is all that is needed:
#hmenu a.blueback {...
or:
#hmenu ul li a.blueback {...
whereas this contributes nothing that I can see:
#hmenu li.blueback {...

Perhaps someone can explain the /reason/ as to why these don't work:
a.blueback {...
li a.blueback {...
ul li a.blueback {...

Signature

Gus

Reply to this Message

kchayka - 27 Dec 2004 17:02 GMT

>>> http://www.geocities.com/operationsengineer1/
>
[quoted text clipped - 5 lines]
> li a.blueback {...
> ul li a.blueback {...

#hmenu has higher specificity than the more generic selectors, so the
existing rule

#hmenu li a {background: url(hmenu.gif) #fff bottom left repeat-x;...}

takes precedence. As an override, I would suggest
#hmenu li a.blueback {...}

and put it right after the first rule, mostly because it may make it
easier to read/follow, and subsequently easier to maintain.

Signature

Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Reply to this Message

Gus Richter - 27 Dec 2004 19:31 GMT

>>Perhaps someone can explain the /reason/ as to why these don't work:
>>a.blueback {...
[quoted text clipped - 11 lines]
> and put it right after the first rule, mostly because it may make it
> easier to read/follow, and subsequently easier to maintain.

Ah yes, thank you very much.

Signature

Gus

Reply to this Message

skeeterbug - 28 Dec 2004 21:50 GMT

thanks for all the help everyone.

> >>> http://www.geocities.com/operationsengineer1/
> >
[quoted text clipped - 20 lines]
> Reply email address is a bottomless spam bucket.
> Please reply to the group so everyone can share.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2004

css alternate list background problem