12 replies [Last post]
davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 45 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

I wanted to add a box with a background color to this page:
http://www.shootmycars.net
http://www.shotmycars.net/screen.css

I can't quite figure out how to add the style .navbox to the vehicle list. Under Available Vehicles:
I wanted to put the list in a pale blue box so it stands out from the yellow background. Am I suppose to make it a class? I have the style under ul.navbox but I'm can't figure out how to connect the css to the html?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 51 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

do you mean like this: <ul

do you mean like this:

By the way, you're missing the closing tags from all your list items.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Is .navbox the style you

Is .navbox the style you want to add?

If so:

Try adding .navbox to the ul container

  • 1974, TR6, White exterior, Shadow Blue interior.

    You can also style that ul element if need be.

    Or just style the ul using descendent syntax i.e:

    .newbox ul {background:blue;}

    Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Again Tyssen! I am slow

Again Tyssen! I am slow today.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 45 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Thank you both! It's

Thank you both! It's starting to make more sense!

Check it now... http://www.shootmycars.net
Still not sure about the background color, I'll have to play with it some more.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You could try zebra striping

You could try zebra striping the list entries, subtle shading just to block each line, alternated lighter/darker shades using two classes 'odd', 'even' on the li elements, might be worth trying.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 45 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

What is the css for zebra

What is the css for zebra striping of shading? I'm open to new ideas.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Nothing especially clever

Nothing especially clever just:

ul.navbox li.odd {background: #adc2da}

ul.navbox li.even {background: #C4DDF8}

add the classes to the li elements it was just food for thought.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 45 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Thanks, I'll play around

Thanks, I'll play around those styles.

How do I correct the list in IE7? I see that the second car has part of the line on an extra line. It's OK in Firefox.
http://www.shootmycars.net

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Firstly you must correct

Firstly you must correct your markup errors (extra closing 'p')

Open up both browsers (FF, IE) to same size, lay one over top of other with bottom one a bit lower so that you can see both boxes, compare; you will notice that the lines do not line up to the left in the same way, this will likely be due to FF and IE handling the ul indent differently FF uses padding-left on the ul and IE uses margin-left you essentially need to ensure that both browsers are forced to use the same values to indent, I'll leave you to figure that out though, but maybe kill padding and work with margins? your choice really.

While you have the browsers up observe that overall the layout is aligned differently in the browsers so you may want to check through a few values.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 45 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

But margins are for the

But margins are for the outside of the border list area and padding is for inside between the border and the text. Why can't IE7 get it right? I don't see how to make them work the same since margin and padding do different things.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's not a case of IE7

It's not a case of IE7 getting it wrong. The ul element and it's children require an indent to mark them as a set of bullet points when embedded within text, the W3C property specification states that user agents may employ either padding or margins to achieve this, the choice is left to the them consequently both FF and IE decided on opposing properties.

Yes they do do different things padding and margins yet in this case they achieve the same visual effect, but this is the reason these values are zeroed out to begin with so that things are uniform and the browser defaults removed , then we can set about choosing which method we would best like to use for all.

Best thing is to zero out all you margins and padding until you have the lines starting at extreme left hand edge then introduce margin left or padding left on the lists.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 45 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Will do. Thanks.

Will do. Thanks.