I want to amek a webpage like below. But I can only think of two ways to do it.
1. Use table, but this isn'twhat tabels are for, right?
2. Use div's but don't browsers put line breaks between divs?
Help.
By default Divs are shown to each represent a line; I believe filling up 100% of the area of where it is (not height-wise, mind you) that isn't padding or margin.
However, you can float them and put <br style="clear: both" /> at the bottom of the last div I think it is (experiment with it's location if this doesn't work) floating works best with a container div.
You could also use positioning, depending on if the layouts fluid or static and whether the divs are a fixed size, and whether they require something below them--there are a variety of factors.
It is considered a hack to use tables for layout, however something like the table used for the attachment are alright, as they display tabular data.
Tables aren't all evil though, sometimes when CSS just can't handle it because of browser support or because of difficulty in tasks tables can do easily, you have to use them.
All I want is 4 rows, and I want to use the most corrct HMTL I can, so I don't especially want to use tables unless I have to....
I didn't understand most of what you said about div's above - Im not a CSS expert (yet... lol)
But Can I have 4 rows using divs that wont have line breaks between them?
The top tow and bottom one can be fixed height, the main content would need to be able to get taller/shorter... They can all have fixed width.
http://www.clickjoke.com/4columncbg.html
[code:1:11de71367f]
<html><head>
<style type="text/css">
#d1 { width: 25%; float: left; background-color: #000000; }
#d2 { width: 25%; float: left; background-color: #990000; }
#d3 { width: 25%; float: left; background-color: #336699; }
#d4 { width: 25%; float: left; background-color: #000066; }
#container { width: 600px; }</style></head><body>
<div id="container"><div id="d1">1</div>
<div id="d2">2</div>
<div id="d3"><p>shiggity</p><p>shiggity</p><p>shwa</p></div>
<div id="d4">4</div></div>
</body></html>[/code:1:11de71367f]
Note that the columns have the d, that's just a random letter; XHTML doesn't allow div names to start with a number. (This layout works in HTML too)
All of the columns are floated to the left, this takes them out of the document flow; they'll appear flying over stuff. This means that you need to "clear" them. Put <p class="clear: both"> </p> to 'clear' them (the non-breaking space is required for some browsers to render the P, so you can put font-size: 0; width: 0; height: 0; line-height: 0; letter-spacing: 0; in there if you want. That makes everything past the floats retain the ordinary document flow.
Don't forget the box model hack (for IE5; it interprets padding margin and borders as being within the object unlike all of the other browsers) and all of those nice little things.
Wired, uses a 3 column layout but they use a different method; I believe that it's using absolute positioning but can't remember. They are forced, becase of this layout, to include the footer into the bottom of the main column because it would just be hidden to surfers.
People (including myself) often find 4 columns to be a little excessive, though. I still can't see your layout (maybe my browser's just acting a little weird tonight) but I hope I answered your question.
Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text)
from what ive read (and i have done a lot of reading on this) there is no right way of doing it, they are just different ways
technically tables shouldnt be used for tat as they slow the rendering of your page BUT its only by probably less than a second (depending on content) so whichever you find easiest to create your page, just stick to that
the OS wont effect it
but ive never used CSS i stuck to tables seen as i already knew how to use them and theres not much difference in either, although if its all valid CSS (check the w3 website for a CSS validator) it should look correct in anybrowser
don't get me wrong, CSS-P design rocks, but that image above looks like a table. It could be more easily created with a table. (less code, higher compatibilty) - why not just use a table?
I have started using CSS more in my layouts. I still miss the tables but I do know that it will be easier. Don't forget to use the external style sheet though. This way you can sepcifiy your fonts, sizes, colors, etc all in one page. And if you need to change something, very easily done.
The reason you do not want to use tables - they were actually never meant for deaign - but to show tabular data. CSS helps you to easily change the look of your lwebsite from one file
Same here - What's the saying, you can't teach an old dog new tricks? But once you get a layout, do a layout in CSS, you really do not want to go back. After comparing everything, the coding is cleaner & it will load a lot quicker once that CSS file is loaded.
CannonBallGuy
ModeratorShared Hoster
Comments
By default Divs are shown to each represent a line; I believe filling up 100% of the area of where it is (not height-wise, mind you) that isn't padding or margin.
However, you can float them and put <br style="clear: both" /> at the bottom of the last div I think it is (experiment with it's location if this doesn't work) floating works best with a container div.
You could also use positioning, depending on if the layouts fluid or static and whether the divs are a fixed size, and whether they require something below them--there are a variety of factors.
It is considered a hack to use tables for layout, however something like the table used for the attachment are alright, as they display tabular data.
Tables aren't all evil though, sometimes when CSS just can't handle it because of browser support or because of difficulty in tasks tables can do easily, you have to use them.
Host Assessment | Tetris | Blog | Great Big Blog
Buy Video Games | Nathan
Video Game Cheats Hints Codes | Click Joke | Game Livewire
All I want is 4 rows, and I want to use the most corrct HMTL I can, so I don't especially want to use tables unless I have to....
I didn't understand most of what you said about div's above - Im not a CSS expert (yet... lol)
But Can I have 4 rows using divs that wont have line breaks between them?
The top tow and bottom one can be fixed height, the main content would need to be able to get taller/shorter... They can all have fixed width.
- CBG
[code:1:11de71367f]
<html><head>
<style type="text/css">
#d1 { width: 25%; float: left; background-color: #000000; }
#d2 { width: 25%; float: left; background-color: #990000; }
#d3 { width: 25%; float: left; background-color: #336699; }
#d4 { width: 25%; float: left; background-color: #000066; }
#container { width: 600px; }</style></head><body>
<div id="container"><div id="d1">1</div>
<div id="d2">2</div>
<div id="d3"><p>shiggity</p><p>shiggity</p><p>shwa</p></div>
<div id="d4">4</div></div>
</body></html>[/code:1:11de71367f]
Note that the columns have the d, that's just a random letter; XHTML doesn't allow div names to start with a number. (This layout works in HTML too)
All of the columns are floated to the left, this takes them out of the document flow; they'll appear flying over stuff. This means that you need to "clear" them. Put <p class="clear: both"> </p> to 'clear' them (the non-breaking space is required for some browsers to render the P, so you can put font-size: 0; width: 0; height: 0; line-height: 0; letter-spacing: 0; in there if you want. That makes everything past the floats retain the ordinary document flow.
Don't forget the box model hack (for IE5; it interprets padding margin and borders as being within the object unlike all of the other browsers) and all of those nice little things.
Wired, uses a 3 column layout but they use a different method; I believe that it's using absolute positioning but can't remember. They are forced, becase of this layout, to include the footer into the bottom of the main column because it would just be hidden to surfers.
People (including myself) often find 4 columns to be a little excessive, though. I still can't see your layout (maybe my browser's just acting a little weird tonight) but I hope I answered your question.
Host Assessment | Tetris | Blog | Great Big Blog
Buy Video Games | Nathan
Video Game Cheats Hints Codes | Click Joke | Game Livewire
[code:1:73177ce9bd]
<div style="width:300; z-index:1; padding:5px; border: #000000 1px solid; background-color:#FFFFFF; text-align:center; font-size:55px;">
LOGO!
</div>
<div style="width:300;; z-index:1; padding:5px; border-left: #000000 1px solid; border-right: #000000 1px solid; border-bottom: #000000 1px solid; background-color:#FFFFFF; text-align:center">
Home | News | Contact Us | About | Products
</div>
<div id=layer1 style="width:300; height:300; z-index:1; padding:5px; border-left: #000000 1px solid; border-right: #000000 1px solid; border-bottom: #000000 1px solid; background-color:#FFFFFF; overflow:auto">
Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text) Content goes here (images, text)
</div>
<div style="width:300;; z-index:1; padding:5px; border-left: #000000 1px solid; border-right: #000000 1px solid; border-bottom: #000000 1px solid; background-color:#FFFFFF; text-align:center">
Copyright...
</div>
[/code:1:73177ce9bd]
That looks perfect in Safari on OS X and IE 5.2 on OSX...
But what about for you?
Mainly, what I don't want is any border that is too thick...
That appears fine. A little small, but good nonetheless.
Well, atleast you now know how to make a 4-column layout
Host Assessment | Tetris | Blog | Great Big Blog
Buy Video Games | Nathan
Video Game Cheats Hints Codes | Click Joke | Game Livewire
technically tables shouldnt be used for tat as they slow the rendering of your page BUT its only by probably less than a second (depending on content) so whichever you find easiest to create your page, just stick to that
So What I ahve above will Nt have any line breaks in it on any browser on any OS?
but ive never used CSS i stuck to tables seen as i already knew how to use them and theres not much difference in either, although if its all valid CSS (check the w3 website for a CSS validator) it should look correct in anybrowser
A few of my favorites:
http://www.w3schools.com/css/
http://www.webenalysis.com/css-attributes.asp
The reason you do not want to use tables - they were actually never meant for deaign - but to show tabular data. CSS helps you to easily change the look of your lwebsite from one file
Merchant Accounts
I guess it's a matter of preference. I use a very minimal CSS file and code almost all of my site using tables. I still get a decent layout.
Regards.
Merchant Accounts