PDA

View Full Version : How to make a layout in CSS



johnh2009
Oct 12th, 2009, 10:50 PM
Hey guys and girls :) Im very new to CSS, trying to go through the Lynda.com tutorial but struggling a little.

My question is this:

How can i create the following design layout in CSS? I understand some parts like header and footer but not sure of the rest

http://img169.imageshack.us/img169/356/10284479.png

I have no Idea...

Any help / Advice / Tutoring will be greatly appreciated


Thanks in Advance


Johnh2009


EDIT: I am one of those sinners that code in Tables :S many people have told me this is bad so im working on CSS...save me please :)!

oesxyl
Oct 12th, 2009, 10:57 PM
Hey guys and girls :) Im very new to CSS, trying to go through the Lynda.com tutorial but struggling a little.

My question is this:

How can i create the following design layout in CSS? I understand some parts like header and footer but not sure of the rest

http://img169.imageshack.us/img169/356/10284479.png

I have no Idea...

Any help / Advice / Tutoring will be greatly appreciated


Thanks in Advance


Johnh2009


EDIT: I am one of those sinners that code in Tables :S many people have told me this is bad so im working on CSS...save me please :)!

first link I find with google for "three column layout with css":

http://matthewjamestaylor.com/blog/perfect-3-column.htm

but look first to the second in the same search, :)

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

best regards

johnh2009
Oct 12th, 2009, 11:05 PM
thanks :) i didnt know the "terminology" of this layout i.e the name so i never googled myself.

I have to admit im finding this daunting, im very tempted to go back to tables but as i mentioned i know tables are not the way to go for design...

tspek
Oct 12th, 2009, 11:06 PM
thanks :) i didnt know the "terminology" of this layout i.e the name so i never googled myself.

I have to admit im finding this daunting, im very tempted to go back to tables but as i mentioned i know tables are not the way to go for design...

I would suggest this book
http://www.amazon.com/Build-Your-Site-Right-Using/dp/0980455278/ref=sr_1_1?ie=UTF8&s=books&qid=1255381567&sr=8-1

johnh2009
Oct 12th, 2009, 11:10 PM
ok so i did as the chap said in the first link you gave and copied his source code, i think i can edit that easily enough...the next question i have is how to do the thing in the middle of my poorly drawn layout pic with the pic and the text wrapping around it...everytime i add a pic the text goes to the bottom of the pic instead of starting at the top, going down the smaller side then carrying on underneath it..

I recall Wrapping when ive done documents for work however i dont know if the same rules apply to websites

oesxyl
Oct 12th, 2009, 11:26 PM
thanks :) i didnt know the "terminology" of this layout i.e the name so i never googled myself.

I have to admit im finding this daunting, im very tempted to go back to tables but as i mentioned i know tables are not the way to go for design...
sorry, was not my intention to "punish" you that you don't use google, :)


ok so i did as the chap said in the first link you gave and copied his source code, i think i can edit that easily enough...the next question i have is how to do the thing in the middle of my poorly drawn layout pic with the pic and the text wrapping around it...everytime i add a pic the text goes to the bottom of the pic instead of starting at the top, going down the smaller side then carrying on underneath it..

I recall Wrapping when ive done documents for work however i dont know if the same rules apply to websites
there are few resources you probably need:

http://alvit.de/handbook/#csslayouts
http://htmldog.com/guides/cssadvanced/
http://www.cssbasics.com/
http://www.csszengarden.com/?cssfile=/033/033.css&page=0
http://www.456bereastreet.com/archive/200602/writing_crossbrowser_css/

and probably many, many others, :)

best regards