Print Page - [5 BTC] convert table to css

Title: [5 BTC] convert table to css
Post by: Alex Beckenham on April 03, 2011, 06:08:32 PM

Could someone please show me the best/simplest way to lay this out in divs:

Code:

<BODY>
  <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
	<tr height="250" bgcolor="#e7e7e7">
		<td>&nbsp;</td>
		<td width="900" align="center">header + menu</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td width="900" align="center">content</td>
		<td>&nbsp;</td>
	</tr>
	<tr height="250" bgcolor="#e7e7e7">
		<td>&nbsp;</td>
		<td width="900" align="center">footer stuff</td>
		<td>&nbsp;</td>
	</tr>
  </table>
 </BODY>

Don't forget to include a payment address, thanks!

Title: Re: [5 BTC] convert table to css
Post by: error on April 03, 2011, 08:05:33 PM

Let's see.... this is a rough draft but it should get you about 95% there.

Code:

<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>

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;
}

Title: Re: [5 BTC] convert table to css
Post by: Alex Beckenham on 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...

Title: Re: [5 BTC] convert table to css
Post by: The Metal Giant on 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">

</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>

Title: Re: [5 BTC] convert table to css
Post by: bencoder on April 03, 2011, 09:04:29 PM

Building on error's work somewhat (use the same html with this css):

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

Title: Re: [5 BTC] convert table to css
Post by: JamezQ on April 03, 2011, 09:07:28 PM

Quote

<head>
<style type="text/css">

</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.

Title: Re: [5 BTC] convert table to css
Post by: bencoder on 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)

Title: Re: [5 BTC] convert table to css
Post by: Alex Beckenham on April 04, 2011, 02:48:27 AM

Quote from: bencoder on April 03, 2011, 09:18:04 PM

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.

Title: Re: [5 BTC] convert table to css
Post by: The Metal Giant on 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

Title: Re: [5 BTC] convert table to css
Post by: Alex Beckenham on 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...

Bitcoin Forum

Economy => Marketplace => Topic started by: Alex Beckenham on April 03, 2011, 06:08:32 PM