PDA

View Full Version : Help making a box/table.



sam_pears
Apr 1st, 2007, 11:23 PM
I have just started to learn HTML and thought I may as well see how far I get making a website. Now I want to make a box/table (i'm not sure which one it is) that looks like the ones on the homepage of http://www.directoryofpoker.co.uk/. If anyone can give me the code to do this it will be very appriciated.

Thanks.

VIPStephan
Apr 1st, 2007, 11:41 PM
Welcome Sam,

At first let me say that these boxes you showed are done very poorly. You should start on the right foot and know that you must not, under any circumstance, use tables to lay out a page. Tables are for tabular data, not to make boxes or two/three/… column layouts.

Ususally you would structure your page so it’s understandable without styles and then style the elements you’ve used in the HTML through CSS. The most used element to create a box (which, in semantic terms, is just a logical division, a section) is the div element.

E.g. the example from the poker site: You would have a div with a headline, some paragraphs, and iages put inside like that:


<div>
<h1>Headline</h1>
<img src="image.png" alt="Image Description" />
<p>text</p>
</div>

…and you would style it with CSS, the most simple way would be this:


div {border: 1px solid black;}
div img {
float: left;
margin-right: 10px;
}


Rounded corners are a little more tricky and you might wanna learn and stick to the basics at first.
Basically you would put a background image to the div instead of putting a CSS border. But you hve to put some thinking to it before you can start. So at first keep it simple and come back when you’ve learned enough and are ready for that.

Excavator
Apr 1st, 2007, 11:42 PM
Hello sam_pears,
Since your just starting it makes a lot of sense to learn the most current and standardized methods so STAY AWAY FROM TABLES!!! (for layout anyway) Check out the link in my sig below for a good explanation why. In fact, since your just starting, you should take a quick read of all those links.

Sort through some examples I have at http://www.nopeople.com/CSS/, use your browsers View Code to see how they work. If you find one you like feel free to download it and adapt it to your own site.

As far as the code to do a page like you linked to, they did it with tables. Have a look at http://www.adobe.com/, which is just the first one CSS site I found with rounded corners, to see what can be done with CSS/XHTML.

A pretty good CSS tutorial here: http://htmldog.com/guides/cssbeginner/


Good luck and post back with what you've got when you run into trouble!