Web Design Forums

HTML and CSS Help

Having problems with these web design scripting? Ask here.

Resources for learning how to use CSS for layout



Site of the Month Nominations
ENTER YOUR SITE NOW!

Reply
 
LinkBack Thread Tools
Old January 5 '07, 02:29 PM (#1)
karinne is offline
\m/ \m/
 
karinne's Avatar
 
Join Date: December 2003
Location: Aylmer QC Canada
Posts: 1,608
karinne is a jewel in the roughkarinne is a jewel in the roughkarinne is a jewel in the roughkarinne is a jewel in the rough
Resources for learning how to use CSS for layout

As the title says, here are a few links I've gathered over the years on "How to use CSS for layouts". This list has links to information on "why" you should use DIV/CSS for layouts and "how" to use them with tutorials and code.

Why
A better way to build your website
Why tables for layout is stupid: problems defined, solutions offered
Ten ways to speed up the download time of your web pages
Nested Tables: About the (ab)use of tables as layout tools in webpages.
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS
Why go table free?
Why avoiding tables (for layout) is important
Throwing Tables Out the Window
Integrated Web Design: The Meaning of Semantics (Take I)

How
BonRouge's layouts
pmob.co.uk layouts
newguyinennis layouts
The Noodle Incident: CSS Boxes
glish.com - CSS Layout technique
bluerobot.com - Layout Reservoir
Alistapart - In Search of the Holy Grail
Alistapart - Creating Liquid Layouts with Negative Margins
Alistapart - Faux Columns

Books
Designingwith Web Standards (2nd Edition) by Jeffrey Zeldman
Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS by Dan Cederholm
CSS Mastery: Advanced Web Standards Solutions by Andy Budd, Simon Collison, Cameron Moll

There's a good start. Feel free to add some more. And let's try to keep this thread with resourceful links. If you have a question, create a thread.

edit
  • 2007-02-21: Added some "why" links
  • 2007-06-06: Added a "how" link

Last edited by karinne; June 6 '07 at 10:42 AM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old January 5 '07, 08:33 PM (#2)
Steax is offline
Cookie Monster
 
Steax's Avatar
 
Join Date: December 2006
Location: Bandung, Indonesia
Posts: 1,208
Steax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to behold
Great resources there, I'll add to them when I get a chance. It looks like you're going on a crusade against tables, heh.

I don't know if drop-down menus are parts of layouts, but I consider them to be, as they are alternatives to common, collumn menu.http://www.htmldog.com/articles/ has plenty of articles, also regarding layouting forms with CSS, and also it shows the Suckerfish script which enables the :hover pseudo for IE.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old January 8 '07, 03:46 PM (#3)
karinne is offline
\m/ \m/
 
karinne's Avatar
 
Join Date: December 2003
Location: Aylmer QC Canada
Posts: 1,608
karinne is a jewel in the roughkarinne is a jewel in the roughkarinne is a jewel in the roughkarinne is a jewel in the rough
I was more looking at the layout in terms of understanding the position and float properties of CSS and how to use them properly. How to create certain layouts like 2 columns fluid or 3, etc...

To me, drop-down menus are just style I guess within the layout.

Did that make sense?

Last edited by karinne; January 8 '07 at 03:47 PM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old April 5 '07, 06:20 AM (#4)
jesse1 is offline
New Member!
 
jesse1's Avatar
 
Join Date: March 2007
Posts: 7
jesse1 is an unknown quantity at this point
http://cssplay.co.uk has some good script too!

I also found some videos about CSS on YouTube might look for that too.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old June 13 '07, 06:05 PM (#5)
Chronocalamity is offline
New Member!
 
Chronocalamity's Avatar
 
Join Date: December 2006
Location: Ky/Usa
Posts: 15
Chronocalamity is an unknown quantity at this point
Send a message via MSN to Chronocalamity Send a message via Yahoo to Chronocalamity
also if your a beginner you can go to
http://www.w3schools.com/css/

i personaly learned alot there
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old September 7 '07, 08:28 PM (#6)
ehavel is offline
New Member!
 
ehavel's Avatar
 
Join Date: September 2007
Location: silicon valley, ca
Posts: 2
ehavel is an unknown quantity at this point
this is good stuff! many thank youz! - ed havel
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old September 8 '07, 06:51 AM (#7)
seanmiller is offline
WDF Senior Member
 
seanmiller's Avatar
 
Join Date: September 2003
Location: Glastonbury, UK
Posts: 867
seanmiller will become famous soon enoughseanmiller will become famous soon enough
Send a message via AIM to seanmiller Send a message via MSN to seanmiller
Just remember that tables are still fine if people want to use them... many very high-traffic sites use them, I feel that sometimes the forum can seem to alienate people who want to work that way but it's unfair as the important thing is to ensure the sites work, whatever way it's done.

Tables for layout might not fit in with the whole XHMTL/CSS ideal but sometimes people feel that it is easier to do it that way, and I don't think it really matters in the bigger scheme of things... somebody who codes with tables and CSS is doing a fine job... let's just get rid of those horrible font tags, eh, and worry about "purity" when it comes to less important factors later... usability is the main factor, and whilst tables don't degrade as well in many instances as divs they certainly aren't "evil"...

Sean (knowing he's going to stir up a hornet's nest... yikes!)

Last edited by seanmiller; September 8 '07 at 06:53 AM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old September 9 '07, 12:01 AM (#8)
Steax is offline
Cookie Monster
 
Steax's Avatar
 
Join Date: December 2006
Location: Bandung, Indonesia
Posts: 1,208
Steax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to beholdSteax is a splendid one to behold
As this is a resource thread, it might not be appropriate to discuss here, Sean. The main problem is, for a quick reply, tables are often used in very evil manners. We probably won't hate them so much if people made one big table for their layout, but no, they often have dozens of tables on one page. At that point code bloat is really high. And tables aren't exactly easy to HTML-code... They're associated with WYSIWYG editors more.

Last edited by Steax; September 9 '07 at 12:01 AM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old August 20 '08, 04:39 AM (#9)
pollack123 is offline
New Member!
 
pollack123's Avatar
 
Join Date: August 2008
Posts: 1
pollack123 is an unknown quantity at this point
www.friendsofed.com/ i have learnt a lot by this. here you can get lots of information about CSS and HTML and all. If you want to get more information you can take help from any professional company bcoz i have taken help from http://www.infysolutions.com. I believe it is extremely helpful to everyone .
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old February 16 '09, 07:21 PM (#10)
aburningflame is offline
WDF Regular
 
aburningflame's Avatar
 
Join Date: December 2008
Posts: 477
aburningflame has a spectacular aura aboutaburningflame has a spectacular aura aboutaburningflame has a spectacular aura about
Two suggestions when coding with css, and Ive learned this the hard way and through trial and error.

#1
The first line in your css should be
*{margin: 0; padding: 0;}

This resets the margin and padding for all elements and normalizes the padding/margins across different browsers.

#2
Encase your page in a wrapper/container div
<div id="wrapper">
<!--all code goes here-->
</div>

Make this wrapper div a fixed width (usually <1024 for 1024x768 resolution).

These two tips will solve a lot of cross browser and cross resolution issues.

Hope this helps
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old March 26 '09, 07:48 AM (#11)
ericjogja is offline
New Member!
 
ericjogja's Avatar
 
Join Date: March 2009
Posts: 1
ericjogja is an unknown quantity at this point
thanks for the information, as a beginner ... this information is very useful for me
regard
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old April 13 '09, 08:20 PM (#12)
ShaneStrong05 is offline
WDF Member
 
ShaneStrong05's Avatar
 
Join Date: April 2009
Location: Saint Johns, MI
Posts: 26
ShaneStrong05 is an unknown quantity at this point
Chronocalamity - I completely agree with you when I first started with web design I used w3schools.com for learning everything. The only thing that I would suggest is if you don't go all the way through the catigory you are learning it kind of teaches you some bad things.

Last edited by Wired; October 7 '09 at 03:23 AM. Reason: removed link
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old October 20 '09, 02:55 PM (#13)
wjordan is offline
New Member!
 
wjordan's Avatar
 
Join Date: October 2009
Location: Atlanta, GA
Posts: 5
wjordan is an unknown quantity at this point
Send a message via AIM to wjordan
Thanks these look great!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old November 21 '09, 05:20 PM (#14)
kiranshotgun is offline
New Member!
 
kiranshotgun's Avatar
 
Join Date: November 2009
Posts: 4
kiranshotgun is an unknown quantity at this point
That's a nice way to keep things centered. Thanks for sharing the tips

Last edited by Wired; November 21 '09 at 05:46 PM. Reason: removed pseudo-sig
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old January 30 '10, 06:54 PM (#15)
MadRukus is offline
WDF Member
 
MadRukus's Avatar
 
Join Date: January 2010
Posts: 51
MadRukus has a little shameless behaviour in the past
That is a great list of resources, here is one more to add under the layout section w/ pretty much all the different variations you can think of.
All the books listed are great have read all but one of them. I really liked CSS Mastery very well written great examples.
http://www.code-sucks.com/css%20layouts/
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

  Web Design Forums » Programming Help » HTML and CSS Help

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


Similar Threads
Thread Thread Starter Forum Replies Last Post
[CSS] Customize your form with CSS - part 1 karinne Coding Articles & Tutorials 7 August 20 '06 10:38 PM
What exactly can you do with CSS, I'm just starting out spasm attack HTML and CSS Help 6 August 19 '06 01:30 PM
Lots of questions relating to HTML and CSS stargate3216 HTML and CSS Help 18 April 7 '06 05:26 PM
Can basic HTML and CSS make a good site?/Coding: College or web resources? wilson General Web Design Discussion 8 March 22 '06 10:02 AM

 
User Infomation
Your Avatar

Site Of The Month

Ticket Cake
Ticket Cake

Ticket Cake is a drupal based event ticketing platform. It features that ability to browse events and share them.

Nominate Your Site Now!

Advertisement
WolfCMS.org

Latest Articles
- by RickM
- by bfsog

Advertisement

Partner Links



All times are GMT -4. The time now is 02:40 AM.


WebDesignForums.net is Copyright © 2010 RikeMedia.

SEO by vBSEO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163