Well, this is all just a prelude to getting much larger amount of work done for a much larger amount of bitcoins...
I'm a long-time (table) hand-coder, trying to learn to do everything point-and-click in Dreamweaver CS5, but want to get my head around table-less code first.
So I'll put out some sort of contract for help with that soon...
Topic: [5 BTC] convert table to css (Read 2342 times)
Thank you Doood,
Yes, not knowing exactly how important vertical centring was I popped in the simplest method, depending on the content you're probably going to change all that. But I'll gladly help out as best I can if you need it.
I also provide professional illustration services should they be of any use
TMG
One of the things that can be (quite stupidly) complex to do is to make a footer stick at the bottom of the page even when the content on the page doesn't make it extend to the bottom, but it is possible. If you require that then let me know.
Yes this is one of the reasons I've resisted change for so long... most of my sites are vertically liquid too.
Obviously in the versions above, it'll look like 4 rows (grey,white,grey,white) when maximized on a large monitor.
Note that it really depends on what you need and what content is going in there. Tables have some unusual behaviours that people learnt to rely on that isn't easily reproducible with css.
One of the things that can be (quite stupidly) complex to do is to make a footer stick at the bottom of the page even when the content on the page doesn't make it extend to the bottom, but it is possible. If you require that then let me know.
Even though metal-giant's version makes the page look exactly the same as the simple tables version in your original post, it's likely to not behave exactly the same because it uses some tricks to make it look the same as your tables version (like line-height, which makes the text go into the center vertically which is default with tables, but means you wont be able to have more than one line in there)
One of the things that can be (quite stupidly) complex to do is to make a footer stick at the bottom of the page even when the content on the page doesn't make it extend to the bottom, but it is possible. If you require that then let me know.
Even though metal-giant's version makes the page look exactly the same as the simple tables version in your original post, it's likely to not behave exactly the same because it uses some tricks to make it look the same as your tables version (like line-height, which makes the text go into the center vertically which is default with tables, but means you wont be able to have more than one line in there)
Quote
header + menu
content
The version before looked strange in firefox. This looks the same, but, please send BTC to the other poster.
Building on error's work somewhat (use the same html with this css):
Just noticed there's been another post since, but my version is shorter
13DbJQ5np5TYVLRL5G6EuRtXRDBsJ6HrsX
Code:
body {
margin: 0;
padding: 0;
color: black;
background-color: white;
}
#footer, #header {
background-color: #e7e7e7;
height: 250px;
}
.indent-and-center {
width: 900px;
margin: 0 auto;
text-align: center;
}Just noticed there's been another post since, but my version is shorter
13DbJQ5np5TYVLRL5G6EuRtXRDBsJ6HrsX
Howdy!
Try this code, see if that works for you? (Bitcoin Address is 18BApQjrrnnLfo6MPA2zjccsgS9KAGqeBx)
header + menu
content
Thanks for your help, but the 900px-wide column is an important part of it, hence the 3x3 table in the original.
The side columns are empty, and the center column (900px) is centered in the browser window.
However, the background color of header and footer extend outside this 900px width to be 100% of the browser window.
The last '5%' completely evades me...
The side columns are empty, and the center column (900px) is centered in the browser window.
However, the background color of header and footer extend outside this 900px width to be 100% of the browser window.
The last '5%' completely evades me...
Let's see.... this is a rough draft but it should get you about 95% there.
Code:
header + menu
content
Code:
body {
margin: 0 auto;
color: black;
background-color: white;
}
#header {
height: 250px;
background-color: #e7e7e7;
}
#content {
}
#footer {
height: 250px;
background-color: #e7e7e7;
}
.indent-and-center {
margin: 0 50px;
text-align: center;
}
Could someone please show me the best/simplest way to lay this out in divs:
Don't forget to include a payment address, thanks!
Code:
| header + menu | ||
| content | ||
| footer stuff |
Don't forget to include a payment address, thanks!
Jump to: