html css list styling

tsoparno

Any help would be gratefully received. I'm trying to create a list in a list for the products on the page. I need the headings goin across but the items in the list vertical. If I can get one product correct then I can use the same format for the rest of the products on the page. I'm tearing my hair out with over a week now trying to get this right!

http://i1134.photobucket.com/albums/m615/tsoparno/webexample2.jpg

Liam Byrne

tsoparno wrote: »

Any help would be gratefully received. I'm trying to create a list in a list for the products on the page. I need the headings goin across but the items in the list vertical. If I can get one product correct then I can use the same format for the rest of the products on the page. I'm tearing my hair out with over a week now trying to get this right!

http://i1134.photobucket.com/albums/m615/tsoparno/webexample2.jpg

Add "float:left" to the CSS of the elements of the list

If you're targetting IE6, also add "display:inline" or else that stupid heap of crap will double your margins for no reason.

Cork24

why not place a Table inside the Div Tag, and then use Nested Lists you use CSS to style the Table and the List.

Liam Byrne

Cork24 wrote: »

why not place a Table inside the Div Tag, and then use Nested Lists you use CSS to style the Table and the List.

The less unnecessary code the better, particularly when it comes to tables.

Cork24

well if he wants every thing lined up i would use them

Liam Byrne

Cork24 wrote: »

well if he wants every thing lined up i would use them

The OP is better off learning the best way to do it, not just something that will achieve it that is bad practice.

sheesh

so if i get this right
navbar is the navbar is a div called navbar

prorange is an item on the navbar (a list item)

and all the stuff below that is another list

I would set the width of the list
by setting the width of the
div.navbar ul li ul li{
width: 100px;
display:block;
}
then position the individual sub menus

Cork24

yes you are right its best to know how to do thing right,

their is no right or wrong way when it comes to div vs Tables

Div are better yes when it comes to CSS styling but their is nothing wrong with Tables that are set inside tables,

i have no problem setting Tables inside a Div Tag.

tsoparno

Thanks for the input guys. The tables are a no go(for this project) and I've had to change how I laid it out, cause i just couldn't get the nested lists to work out the way i wanted too. Think I'm getting closer to the finish, at last!

sheesh

Cork24 wrote: »

well if he wants every thing lined up i would use them

don't you understand!!


Tables are evil :eek:


(unless displaying tabular data)

tsoparno

sheesh wrote: »

don't you understand!!


Tables are evil :eek:


(unless displaying tabular data)

Your not my lecturer by any chance

Cork24

Div Tagging

you have your Div container

inside that Div you will have your Div "Header" Div "Nav" Div "Body" and Div "Footer"

inside the Div "Body" you can have 3 Divs left Center and Right Divs

but working since Divs are in a Line it can be hard to get Div layout the way we can picture them..

it is good to Draw out the way you want the Site to look like before going into web programming.

Cork24

sheesh wrote: »

don't you understand!!


Tables are evil :eek:


(unless displaying tabular data)

what is with Tables are Evil...

the OP wants his Nested list in a Line with them rest he can spend Hours hitting his head off the Wall or he could spend two mins placing a Table "inside the Div" and their we have it a nice layout...


I spent hours messing around with Divs and trying to get them lined up before and i can tell u for some one that would be starting off with CSS its a NightMare.

tsoparno

Cork24 wrote: »

what is with Tables are Evil...

the OP wants his Nested list in a Line with them rest he can spend Hours hitting his head off the Wall or he could spend two mins placing a Table "inside the Div" and their we have it a nice layout...


I spent hours messing around with Divs and trying to get them lined up before and i can tell u for some one that would be starting off with CSS its a NightMare.

Just to clear it up I'm not allowed use tables for this, however what I've been told is that tables are harder to style if someone else has to come back to your code at a later date.

Cork24

style tables isnt that hard just give the table an ID that way the coder know what table the CSS style is looking after..

in that case u need to use CSS did you try

width :Auto ?

sheesh

Cork24 wrote: »

what is with Tables are Evil...

the OP wants his Nested list in a Line with them rest he can spend Hours hitting his head off the Wall or he could spend two mins placing a Table "inside the Div" and their we have it a nice layout...


I spent hours messing around with Divs and trying to get them lined up before and i can tell u for some one that would be starting off with CSS its a NightMare.

they are supposed to be only used for tabular data. The main reason I heard for not doing it is to do with seo, google does not rate tabular date highly.

This is fairly old knowledge so it might not even be true any more as google do not mind pages that do not validate any more the are solely concerned with content.

28064212

Cork24 wrote: »

style tables isnt that hard just give the table an ID that way the coder know what table the CSS style is looking after..

There are numerous reasons not to use tables for non-tabular data. Read the first answer here - http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

Giblet

Take all CSS away and any dimension attributes. Then lay out your html and see how it falls together both visually and semantically.
Tables can seem an easy way to layout some things, but once you start down that route, you are locked into columns on multiple rows having the same dimensions unless you abuse colspan and it just gets worse and worse the more you have to do. The less HTML you use to accomplish a goal means you have more options when you need to extend it later.

In this case, while it looks like having some headers, and a few rows below that, you will start seeing the content within each cell representing more and more complex data and structures, where using cells will just inhibit what you can do.

Oh, and while reflows, in general, don't really make a noticeable difference to a page rendering time (in most cases you would see day to day) The single worst case....
A cell suddenly loading an image and resizing the entire table again (unless it's fixed size).

Liam Byrne

Cork24 wrote: »

yes you are right its best to know how to do thing right,

their is no right or wrong way when it comes to div vs Tables

Div are better yes when it comes to CSS styling but their is nothing wrong with Tables that are set inside tables,

i have no problem setting Tables inside a Div Tag.

Incorrect. Try adding a row or column after the fact, particularly if you have some rowspans or colspans in there.

Not only that, but nested tables will decrease your content-to-code ration, affecting SEO, and will also slow down the site as the browser tries to figure out how to render it.

Best practices are to use tables for their proper purpose - tables.

If you want to use a nail where a screw is more appropriate, go right ahead, but it's not best practice and causes unnecessary headaches later.

sheesh

and finally

(just thought of this)

if you wanted to style the pages for mobile devices (different stylesheets) it would be also be more complicated.