Bitcoin Forum
December 10, 2016, 08:57:44 PM *
News: Latest stable version of Bitcoin Core: 0.13.1  [Torrent].
 
   Home   Help Search Donate Login Register  
Pages: [1]
  Print  
Author Topic: [5 BTC] convert table to css  (Read 2072 times)
Alex Beckenham
Full Member
***
Offline Offline

Activity: 154


View Profile
April 03, 2011, 06:08:32 PM
 #1

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!

Advertised sites are not endorsed by the Bitcoin Forum. They may be unsafe, untrustworthy, or illegal in your jurisdiction. Advertise here.
error
Hero Member
*****
Offline Offline

Activity: 574



View Profile
April 03, 2011, 08:05:33 PM
 #2

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

15UFyv6kfWgq83Pp3yhXPr8rknv9m6581W
Alex Beckenham
Full Member
***
Offline Offline

Activity: 154


View Profile
April 03, 2011, 08:11:31 PM
 #3

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 Offline

Activity: 2


View Profile
April 03, 2011, 08:54:50 PM
 #4


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 Offline

Activity: 90


View Profile
April 03, 2011, 09:04:29 PM
 #5

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 Wink

13DbJQ5np5TYVLRL5G6EuRtXRDBsJ6HrsX
JamezQ
Member
**
Offline Offline

Activity: 60


View Profile
April 03, 2011, 09:07:28 PM
 #6

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

Activity: 90


View Profile
April 03, 2011, 09:18:04 PM
 #7

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
Full Member
***
Offline Offline

Activity: 154


View Profile
April 04, 2011, 02:48:27 AM
 #8

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 Offline

Activity: 2


View Profile
April 04, 2011, 07:43:55 AM
 #9


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
Full Member
***
Offline Offline

Activity: 154


View Profile
April 04, 2011, 08:00:46 AM
 #10

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

Pages: [1]
  Print  
 
Jump to:  

Sponsored by , a Bitcoin-accepting VPN.
Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2006-2009, Simple Machines Valid XHTML 1.0! Valid CSS!