|
Alex Beckenham (OP)
|
 |
April 03, 2011, 06:08:32 PM
Last edit: April 03, 2011, 08:13:29 PM by doood |
|
Could someone please show me the best/simplest way to lay this out in divs: <BODY>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="250" bgcolor="#e7e7e7">
<td> </td>
<td width="900" align="center">header + menu</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td width="900" align="center">content</td>
<td> </td>
</tr>
<tr height="250" bgcolor="#e7e7e7">
<td> </td>
<td width="900" align="center">footer stuff</td>
<td> </td>
</tr>
</table>
</BODY> Don't forget to include a payment address, thanks! |
|
|
|
|
|
|
TalkImg was created especially for hosting images on bitcointalk.org: try it next time you want to post an image
|
|
|
Advertised sites are not endorsed by the Bitcoin Forum. They may be unsafe, untrustworthy, or illegal in your jurisdiction.
|
|
|
|
|
|
error
|
|
April 03, 2011, 08:05:33 PM |
|
Let's see.... this is a rough draft but it should get you about 95% there. <body>
<div id="header">
<p class="indent-and-center">header + menu</p>
</div>
<div id="content">
<p class="indent-and-center">content</p>
</div>
<div id="footer">
<p class="indent-and-center">footer stuff</p>
</div>
</body> 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;
} |
3KzNGwzRZ6SimWuFAgh4TnXzHpruHMZmV8
|
|
|
|
Alex Beckenham (OP)
|
|
April 03, 2011, 08:11:31 PM |
|
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 Metal Giant
Newbie
 Offline
Activity: 2
Merit: 0
|
|
April 03, 2011, 08:54:50 PM |
|
Howdy!
Try this code, see if that works for you? (Bitcoin Address is 18BApQjrrnnLfo6MPA2zjccsgS9KAGqeBx)
<head>
<style type="text/css">
<!--
#container {
text-align:center;
width:100%;
}
#extended {
width: 100%;
height:250px;
background-color: #e7e7e7;
}
#header {
width: 900px;
height:250px;
margin-right:auto;
margin-left:auto;
line-height:250px;
background-color: #e7e7e7;
}
#content {
width: 900px;
height: 500px;
margin-right:auto;
margin-left:auto;
line-height:500px;
}
#footer {
width: 900px;
height: 250px;
line-height:250px;
margin-right:auto;
margin-left:auto;
background-color: #e7e7e7;
}
-->
</style>
</head>
<BODY>
<div id="container">
<div id="extended">
<div id="header">header + menu</div>
</div>
<div id="content">content</div>
<div id="extended">
<div id="footer">footer stuff</div>
</div>
</div>
</BODY>
|
|
|
|
|
bencoder
Member
Offline
Activity: 90
Merit: 10
|
|
April 03, 2011, 09:04:29 PM |
|
Building on error's work somewhat (use the same html with this css): 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 |
|
|
|
|
JamezQ
Member
Offline
Activity: 60
Merit: 10
|
|
April 03, 2011, 09:07:28 PM |
|
<head> <style type="text/css"> <!-- #container { text-align:center; width:100%; } #extended { width: 100%; height:250px; background-color: #e7e7e7; } #header { width: 900px; height:250px; margin-right:auto; margin-left:auto; line-height:250px; background-color: #e7e7e7; } #content { width: 900px; height: 276px; margin-right:auto; margin-left:auto; line-height:282px; } #footer { width: 900px; height: 250px; line-height:250px; margin-right:auto; margin-left:auto; background-color: #e7e7e7; } --> </style> </head> <BODY> <div id="container"> <div id="extended"> <div id="header">header + menu</div> </div> <div id="content">content</div> <div id="extended"> <div id="footer">footer stuff</div> </div> </div> </BODY> The version before looked strange in firefox. This looks the same, but, please send BTC to the other poster. |
|
|
|
|
bencoder
Member
Offline
Activity: 90
Merit: 10
|
|
April 03, 2011, 09:18:04 PM |
|
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)
|
|
|
|
|
|
Alex Beckenham (OP)
|
|
April 04, 2011, 02:48:27 AM |
|
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. |
|
|
|
The Metal Giant
Newbie
Offline
Activity: 2
Merit: 0
|
|
April 04, 2011, 07:43:55 AM |
|
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 <cough!> Shameless plug </cough!>
TMG
|
|
|
|
|
|
Alex Beckenham (OP)
|
|
April 04, 2011, 08:00:46 AM |
|
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...
|
|
|
|
|
