Do I use List Items or Table?

I like this layout and I want to recreate this.

Should I be using Tables like how they have done it, or should I use List items?

http://www.olivegarden.com/home

Thanks!

 

I am doing something like this

<div id="main-section">
<ul id="first-row">
<li>
<a href="outlets.com">
<img src="" />
<span id="outlets"></span>
</a>
</li>
<li>
<a href="pricing.com">
<img src="" />
<span id="pricing"></span>
</a>
</li>
</ul>

<ul id="second-row">
<li>
<a href="promotions.com">
<img src="" />
<span id="promotions"></span>
</a>
</li>
<li>
<a href="sg-hotpot.com">
<img src="" />
<span id="sg-hotpot"></span>
</a>
</li>
</ul>

<ul id="third-row">
<li>
<a href="gift-certificates.com">
<img src="" />
<span id="gift-certificates"></span>
</a>
</li>
<li>
<a href="contact-us.com">
<img src="" />
<span id="contact-us"></span>
</a>
</li>
</ul>

 

Neither mate. We don't use tables for layouts like that anymore. Also a List Item's intended purpose is NOT make such a layout/structure.

You will need to use <div> blocks with proper Classes and IDs for styling them, if you want to do it the right way.

 

Got it, thanks. Let me try using normal div elements.

 

Uhm, if it's tabular data, use tables... if it's a list of choices, use a list... otherwise try to find some other semantic level tag or existing tags you'd have there ANYWAYS BEFORE diving for the DIV.

Though what part of that page are you even referrring to as 'using tables' -- the popup form? The menu? Really the HTML for that site is utter and complete gibberish.

The only table I'm seeing in the code is for the idiotic halfwit perfect width massive image bullshit that I'd NEVER put on a website in the first damned place due to the headaches it would be in terms of making it semi-fluid, elastic or responsive. It's the typical train wreck of PSD jockey bullshit that makes websites less useful to visitors, so I'd probably go with "none of the above" and axe that entire visual concept as "not viable for web deployment".

Though if I WERE to be forced into doing it, that appears to be a list of choices, so yes, I'd use a UL. If its' a list of choices in no particular order, that's UL/LI's job. Those images to me look like content, so they'd be IMG not background (NOT that any modern site has much business using the blasted halfwit "STYLE" attribute, but considering they piss all over the page with the STYLE tag as well...)

I swear, sites like that are so ineptly developed and such inaccessible train wrecks I really wonder how the **** these people got their jobs and much less keep them. Admittedly, I say the same thing about Olive Garden's chef's so...

 

Hi Deathshadow,

Yes, you're spot on. I was referring to the 3 rows of 2 boxes per row tables.

Ahh yes, I'm having major problems with 1. Making both the images, and the horizontal text box at the bottom of the image responsive, and 2. Positioning the text box at the bottom of the image.

Actually, having such images in a website ain't that bad is it? I've been using bootstrap for a while, and while I know you don't quite like bootstrap, it helps to make images responsive for me!

So in this case, you would do UL/LI versus DIVs?

I've done this in HTML (apologies if it doesn't look semantically clean to you)

    <div class="main-box-row">
        <div class="main-box-left"><a href="outlets.com"><img draggable="false" src="http://www.maxnathaniel.com/seoulgarden/img/6.jpg" alt="photo" />
        <div class="text-box">OUTLETS</div></a>
        </div><div class="main-box-right"><a href="pricing.com"><img draggable="false" src="http://www.maxnathaniel.com/seoulgarden/img/6.jpg" alt="photo" />
        <div class="text-box">PRICING</div></a></div></div>

Code (markup):

.main-box-left img, .main-box-right img {
    position: relative;
    display: block;
    max-width: 100%;
}


.text-box {
    position: absolute;
    width: 50%;
    background: #FF9656;
    color: white;
}

Code (markup):

Would UL/LI be better in this case?

Thanks for the heads up about IMG versus background image, I just read it here as well - http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image?rq=1

Do you mind also helping out with how I can insert the horizontal text box (OUR WINE with the grey background) in the image as per here



Thankyou for your help!

 

Hi Deathshadow,

I saw your post in the other thread, i will reply you over there. Thanks!

 

list items are better and preferred

 

thanks, yes, I used list items