how make this design

[mandriva]

Hello this is my first post here and i know very little about web design. I am keen to learn but just need sending in the right direction.

I have attached a layout i drew in word, how would i create the same layout or similar using CSS/Frontpage. The design doesnt have to take up all the page it would just be nice centred.

Thank for the help

newbie

[karinne]

what have you tried so far!? Got any code?

Have a look at Resources for learning how to use CSS for layout there's a bunch of example layouts to get you started

[Skelbo]

There are quite a number of websites and books to help you learn web design.

W3 Schools is a one of my favorites. It's great resource for learning html and css. Here is the link: http://www.w3scools.com

[deb0and]

Originally Posted by karinne

what have you tried so far!? Got any code?

Have a look at Resources for learning how to use CSS for layout there's a bunch of example layouts to get you started

Hi Karinne

thanks for the link but it doesnt seem to work. I havent tried any code because i dont know any CSS and i cant seem to create tables in that design on frontpage either. I will have a look around on google.

Cheers

Andy

[Kropotkin]

Hi

All the advice above is good.

W3schools in particular I rate too.

You will need to do this using CSS and making use of the float property OR you could use absolute positioning. With positioning you set the exact width, height and position of elements (images and divs - divs are like a block area which can contain text or other elements) . With the float approach everything flows and you can send things to the left or right.

You can use tables for layout but this is deprecated.

You mentioned frontpage; you could do this in the design window using divs and positioning but I would strongly recommend learning how to hand-code CSS and HTML. Having said that if you are just learning a lot of people learn by using FP in design mode and then switching to the code view to see what FP has done.

If you were using divs and absolute positioning you would just think of it as a grid. So for example your main body could be :
[code]
<div style="position:absolute;top:100px;left:120px;widt h:500px;height:500px;overflow:auto;">
main body
</div>
[code]

Then the same sort of thing to the images and menu bar at the top.

Hope that helps gets you started

Justin

[karinne]

Originally Posted by deb0and

Hi Karinne

thanks for the link but it doesnt seem to work. I havent tried any code because i dont know any CSS and i cant seem to create tables in that design on frontpage either. I will have a look around on google.

Cheers

Andy

Link works fine here ... it's also a sticky in this forum.

[karinne]

Originally Posted by Kropotkin

You can use tables for layout but this is deprecated.

Tables for layout is NOT deprecated ... it was NEVER MEANT to be!

Tables are and have always been for tabular data.

[deb0and]

Originally Posted by karinne

Link works fine here ... it's also a sticky in this forum.

Thanks i found the sticky.

[Kropotkin]

Tables for layout is NOT deprecated ... it was NEVER MEANT to be!

*
This is contradictory. What I said is that tables are depreciated for layout. Which they are.
*

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Or are you arguing about the word 'deprecated'?

[1840dsgn]

Or are you arguing about the word 'deprecated'?

Erm i think you'll find Karinne is saying they aren't deprecated!

Because they're not - they're not deprecate for layout - they were never intended fvor layout in the first place. just somr bruight spark thought hey look what I can do with tables and it took off.

They are not deprecated though. They're in the xhmtl strict standards as they always have been from the start - to display tabular data.

The problem is if you tell learners that its deprecated its like saying you can't use it - but you can!

[deb0and]

Oh so if i find the layout is easier to build i should use tables or should i try css?

[1840dsgn]

No no no lol!

Ok the table tag is not deprecated: this means it is still in the standards set by the w3c. BUT it is not meant for layout. So don't use it for layout!

<div> and <span> should be used in the html to set out the page, and you should use an external css stylesheet to add style to the page.

Tables should be used for displaying tabular data - ie a football league table, or research results - anything that you would typically display in a table on a piece of paper really.

Hope that helps.

mike

[karinne]

what Mike said!

[deb0and]

ok i get it

[Kropotkin]

Karinne . The problem is if you tell beginners that tables are not deprecated without explaining what you mean they will think that they can use them for layout as this beginer just did , which would be a bad idea.

If you were just picking up on my very slightly incorrect use of the word 'deprecated' why not say so? In any event I said 'deprecated for layout' which is pretty clear.

It might have been more useful Karrine to explain why tables are not recommened for layout for this beginner.

One main reason for this is that for people who do not see well and who use screen reader devices table based layouts can be confusing.

Of course there are occasions when it is really hard not to use tables... but best not to.