SitePoint Sponsor |
|
User Tag List
Results 1 to 15 of 15
Thread: CSS Layout
-
May 7, 2002, 22:10 #1
- Join Date
- Mar 2002
- Location
- Miami, Florida - Caracas, Venezuela
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
CSS Layout
Hello all,
Today I stumbled on to the reality of accessibility and the advantages of starting to use CSS to control the design of my page. I want to start building my page following these rules but I'm a little confused.
It seems that DIVs are the prefered "placeholder" for content. I might be wrong but if this is so, then there will be a LOT of DIV tags in my code. Right?
You see, my layout has (or used to have) the following structure as it would apear on the browser:
- A table with the header.
- A table with a banner-like image (no ads in my site)
- A table with the main menu which itself is composed of a table with three columns for the three main sections of the site.
- A table with the content which may or may not contain its own tables.
- A table with the footer.
As you can see, a lot of tables. One of the reasons I have that many tables instead of having one with more rows is that the browser renders the table after it has loaded completely. Dividing the content into different tables gives the illusion of faster downloads.
I'd like to start designing the right way from now but are DIVs the best option?
Simple DIVs don't render right in Dreamweaver.
Example:Code:<div class="stage"><p>Hello</p></div>
Luis
-
May 7, 2002, 22:19 #2
- Join Date
- Mar 2001
- Location
- Houston, Tejas; Future Capital of the World
- Posts
- 2,474
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
DW does not show CSS correct, you'll need to preview it in your browser to see if it's looking OK.
I too recently started using CSS, but I also still use tables for part of my layout. One thing I do is use CSS to make borders around the tables or cells (CSS borders look alot better than table borders). Well DW does not show these borders, so I have to keep F12 (previewing) to make sure they look ok.Brian Poirier
SunStockPhoto: Stock Photos, Fine Art Photos, Event Photography
-
May 7, 2002, 22:29 #3
- Join Date
- Mar 2002
- Location
- Miami, Florida - Caracas, Venezuela
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
One more thing.
Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?
tnx
Steelsun... Houston TX? Lgomez-> Born in Galveston!Last edited by lgomez; May 7, 2002 at 22:31.
Luis
-
May 8, 2002, 03:57 #4
- Join Date
- Mar 2002
- Location
- Miami, Florida - Caracas, Venezuela
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Testing
Ok, I've done some tests and I think it works great.
My only problem is I don't have access to NS4 or IE4/5. Can anyone test them and see what happens.
Traditional table layout:
http://vfxnetwork.com/CSSLayout/VFXhome.htm
- HTML 12.9 kb
- CSS 1003b
- Images 18.0kb
CSS Layout:
http://vfxnetwork.com/CSSLayout/VFXhomeCSS.htm
- HTML 1.83 kb
- CSS 3.16 kb
- Images 18.3kb
Total table layout: 31.9
Total CSS layout: 23.9
This numbers are not entirely fair. As you can see the traditional version actually has more content but I'll work on that tomorrow.
If you want to download the files you can do so here: http://vfxnetwork.com/CSSLayout/vfxnet.zip
NOTE: Please do not use or distribute this files for anything other that testing related to this post. Thank you.Luis
-
May 8, 2002, 09:17 #5
- Join Date
- Oct 2001
- Location
- Tucson, Arizona
- Posts
- 1,858
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by lgomez
Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?
Code:h1 { margin: 0; padding: 0; }
-
May 8, 2002, 13:36 #6
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by lgomez
One more thing.
Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5
By the way, you don't really need to have a P tag nested inside your DIV.
Without making this personal to you, if you want to get into CSS layout then you really need to have a solid understanding of HTML first. This means being able to write your own code and understand how tags work and why they behave a certain way. This will make designing a CSS only site MUCH simpler as you will already have the proper building blocks.
This is of course MY opinion and should not be taken personally.Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
May 8, 2002, 15:03 #7
As an aside it may be worth noting that the new Dreamweaver Mx claims to support CSS layout and styles directly (and correctly) in its preview window.
Unfortunately, I also hear that the CSS creation process itself is very similar to how it is in v4 (i.e. dire)
Still, I'm looking forward to giving it a go.
(I'd give the trial/prerelease a try, but I need to U/G my (admittedly out of date) OS first.New Plastic Arts: Visual Communication | DesignateOnline
Mate went to NY and all he got me was this lousy signature
-
May 8, 2002, 15:09 #8
- Join Date
- Mar 2001
- Location
- Houston, Tejas; Future Capital of the World
- Posts
- 2,474
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I've downloaded the MX preview and tried it a few times briefly, but still use DW 4 for most of my work instead of the MX (mostly because I know and am comfortable with 4 and MX is strange).
The preview of CSS in MX to me is not impressive at all and still seems lacking.Brian Poirier
SunStockPhoto: Stock Photos, Fine Art Photos, Event Photography
-
May 8, 2002, 15:12 #9
- Join Date
- Mar 2002
- Location
- Miami, Florida - Caracas, Venezuela
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Don't worry, I don't take it personally. This is exactly why I'm here and that is what I'm looking for. Opinions and sugestions WHILE I work.
If could sit and read everything there is to read I wouldn't get any work done. I learn as I go along and read as much as I can.
Do you know where I can find a listing of CSS browser compatibility?
Regarding the alt attribute for my images. There are some images that serve no purpose other than decoration. Is it possible to set an attribute so that screen readers skip those images. What happens when a screen reader hits an image with no alt attribute?
Thank you,Luis
-
May 8, 2002, 16:29 #10
- Join Date
- Oct 2001
- Location
- Tucson, Arizona
- Posts
- 1,858
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by lgomez
Is it possible to set an attribute so that screen readers skip those images.Code:alt=""
-
May 8, 2002, 18:00 #11
- Join Date
- Mar 2002
- Location
- Miami, Florida - Caracas, Venezuela
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Tnx.
Luis
-
May 8, 2002, 19:34 #12
- Join Date
- Mar 2002
- Location
- Indianapolis
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Luis,
Page looks niceCouple of comments/questions about the source code:
1. I've read that it's usually best to have positional CSS defined in the <head>, and styles in an external style sheet. I assume you have the positional classes defined externally because they will appear on every page?
2. How have you used Float here? I'm guessing 2 of the columns, or...?
-
May 8, 2002, 21:06 #13
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
One of the best bug references I've come across is on www.richinstyle.com .
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
May 9, 2002, 00:23 #14Originally posted by Mike Feury
've read that it's usually best to have positional CSS defined in the <head>, and styles in an external style sheet. I assume you have the positional classes defined externally because they will appear on every page?
However, I systematically farm *all* CSS out to an external now (styling and CSSP) without problems.
Any chance you could show a reference for that statement?
It would be interesting to compare it to my experience with that issue.
As I seemed to have gotten around it without noticing, it could still prove to be useful to know of the pitfalls (if any).
TIANew Plastic Arts: Visual Communication | DesignateOnline
Mate went to NY and all he got me was this lousy signature
-
May 9, 2002, 13:59 #15
- Join Date
- Mar 2002
- Location
- Indianapolis
- Posts
- 45
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Bill,
I'll do a hunt and see if I can find the reference(s) - so many places I've read recently
The reasoning for it was mainly that positioning tends to be unique to a page, whereas style usually applies to many pages. In that situation with a large site, it would make sense to keep CSSP local to the page - otherwise you'd have a huge external style sheet.
However, I think most sites have a consistent layout across all/many pages, so I'd favor your approach. It's like the templates idea - it makes sense to me to have repetitive boxes defined externally.
A well-organized and commented external style sheet shouldn't be a problem even if it gets quite large. Then just add any local tweaks to that page's <head>.
I wonder is there any significant page-loading hit because of reading in a large style sheet? Would have to be pretty large though to offset the advantage of keeping repeated styles in one place.
Bookmarks