Building a semantic layout!

[co.ador]

Guys I have design this layout on photoshop and I want to build a semantic html code. I have a habit of using tables and td but I know it is not the most correct way semantically speaking. I want to get in the habit of semantics.

 

The layout is as below...

 

 

 

 

Website link...

 

http://img182.imageshack.us/img182/2109/layoutr.gif

[sticks464]

You should be able to customize this layout for what you want. Use view source to see the code.

[co.ador]

I made this layout myself I brought it here for a coding contribution from you guys..

 

I made it in photoshop.

[co.ador]

i have come with this html code which i hope semantically speaking is well structure if not give me hand guys.

 

 

<ul id="orangerectangular">

<li><a href="#"><img src="../images/Blog.gif" alt="Blog" /></a></li>

<li><a href="#"><img src="../images/About.gif" alt="About" /></a></li>

<li><a href="#"><img src="../images/Contact.gif" alt="Contact" /></a></li>

<li><a href="#"><img src="../images/Whatever1.gif" alt="Whatever 1" /></a></li>

<li><a href="#"><img src="../images/Whatever2.gif" alt="Whatever 2" /></a></li>

<li><a href="#"><img src="../images/Somethingelse.gif" alt="Something else" /></a></li>

</ul>

<div id="store logo"><div>

<ul id="DarkGreenRectangular">

<li><a href="#"><img src="../images/Review.gif" alt="Review" /></a></li>

<li><a href="#"><img src="../images/Photos.gif" alt="Photos" /></a></li>

<li><a href="#"><img src="../images/Friends.gif" alt="Friends" /></a></li>

<li><a href="#"><img src="../images/Music.gif" alt="Music" /></a></li>

</ul>

 

<div id="videoplayer"><p>I have a web page with several videos selectable from a menu (johnedmark.com). I would like to be able to have some explanatory text appear below the currently selected video, and then have that text change when the user selects a different video. (I've tried putting brief explanations in the menus themselves, but they really don't have enough room, and although I could make them larger, they will soon get so big as to not function well as menus.)

 

Is there any way to do this?</p><div>

 

<ul id="smallthumbs">

<li><a href="#"><img src="../images/pic1.gif" alt="pic1" /></a></li>

<li><a href="#"><img src="../images/pic2.gif" alt="pic2" /></a></li>

<li><a href="#"><img src="../images/pic3.gif" alt="pic3" /></a></li>

<li><a href="#"><img src="../images/pic4.gif" alt="pic4" /></a></li>

    <li><a href="#"><img src="../images/pic5.gif" alt="pic5" /></a></li>

</ul>

 

<div id="largethumb"></div>

[sticks464]

I made this layout myself I brought it here for a coding contribution from you guys..

So you want someone to show you the code for the photoshop layout so you can insert your unordered list where you want them.

There's nothing semantically wrong with your list.