Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   2-column-layout with <table> (http://www.velocityreviews.com/forums/t164902-2-column-layout-with-table.html)

Markus.Baerlocher@lau-net.de 04-22-2006 12:36 PM

2-column-layout with <table>
 
Hi,

i would like to make a I 2-column-layout with <table>.

How do i make a space between the two "columns"?

<table style="width:100%; border:1px solid #003399; ">
<tr>
<td>
<table style="width:46%; border:1px solid #003399; ">
<tr>
<td style="padding:1.5em; >
<p>content left</p>
</td>
</tr>
<tr>
<td style="padding:1.5em; >
<p>content left</p>
</td>
</tr>
</table>
<!-- space 8% - how? -->
<table style="width:46%; border:1px solid #003399; ">
<tr>
<td style="padding:1.5em; >
<p>content right</p>
</td>
</tr>
<tr>
<td style="passing:1.5em; >
<p>content right</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

Thanks,
Markus


Neredbojias 04-22-2006 01:46 PM

Re: 2-column-layout with <table>
 
To further the education of mankind, Markus.Baerlocher@lau-net.de
vouchsafed:

> Hi,
>
> i would like to make a I 2-column-layout with <table>.
>
> How do i make a space between the two "columns"?
>
> <table style="width:100%; border:1px solid #003399; ">
> <tr>
> <td>
> <table style="width:46%; border:1px solid #003399; ">
> <tr>
> <td style="padding:1.5em; >
> <p>content left</p>
> </td>
> </tr>
> <tr>
> <td style="padding:1.5em; >
> <p>content left</p>
> </td>
> </tr>
> </table>
> <!-- space 8% - how? -->
> <table style="width:46%; border:1px solid #003399; ">
> <tr>
> <td style="padding:1.5em; >
> <p>content right</p>
> </td>
> </tr>
> <tr>
> <td style="passing:1.5em; >
> <p>content right</p>
> </td>
> </tr>
> </table>
> </td>
> </tr>
> </table>


Enclosed both tables in a <div>, float one left, the other right.

--
Neredbojias
Infinity has its limits.

frederick 04-22-2006 02:12 PM

Re: 2-column-layout with <table>
 
Markus.Baerlocher@lau-net.de wrote:
> i would like to make a I 2-column-layout with <table>.
>
> How do i make a space between the two "columns"?


Question: Do you really need to use tables for layout, rather than CSS?

Assuming that the answer is "yes", then you could insert a dummy table
between the other two and set its width to 8%. In other words:

..container {
border: 1px sold #003399;
}

#main {
width: 100%;
}

#left, #right {
width: 46%;
}

#dummy {
width: 8%;
}


<TABLE class="container" id="main">
<TR>
<TD>
<TABLE class="container" id="left">
<TR>

....

</TR>
</TABLE>
<TABLE id="dummy">
</TABLE>
<TABLE class="container" id="right">
<TR>

....

</TR>
</TABLE>
</TD>
</TR>
</TABLE>


By the way, your original example fails to close attribute quoting for
the following, which appears in 4 different places:
<td style="padding:1.5em; >

--
AGw.


Nije Nego 04-22-2006 06:37 PM

Re: 2-column-layout with <table>
 
On 22 Apr 2006 05:36:09 -0700, Markus.Baerlocher@lau-net.de wrote:

> Hi,
>
> i would like to make a I 2-column-layout with <table>.
>
> How do i make a space between the two "columns"?
>
> <table style="width:100%; border:1px solid #003399; ">
> <tr>
> <td>
> <table style="width:46%; border:1px solid #003399; ">
> <tr>
> <td style="padding:1.5em; >
> <p>content left</p>
> </td>
> </tr>
> <tr>
> <td style="padding:1.5em; >
> <p>content left</p>
> </td>
> </tr>
> </table>
> <!-- space 8% - how? -->
> <table style="width:46%; border:1px solid #003399; ">
> <tr>
> <td style="padding:1.5em; >
> <p>content right</p>
> </td>
> </tr>
> <tr>
> <td style="passing:1.5em; >
> <p>content right</p>
> </td>
> </tr>
> </table>
> </td>
> </tr>
> </table>
>
> Thanks,
> Markus


Sum of your tables + borders + padding is larger than 100%.

> <td style="passing:1.5em; >


Browsers will not understand this.
--
maybe later

BootNic 04-22-2006 07:05 PM

Re: 2-column-layout with <table>
 
> "Markus.Baerlocher@lau-net.de" <Markus.Baerlocher@lau-net.de> wrote:
> news:1145709369.849885.256550@g10g2000cwb.googlegr oups.com....
>
> Hi,
>
> i would like to make a I 2-column-layout with <table>.
>
> How do i make a space between the two "columns"?
>

[snip]

From your example I do not see any need to use tables embedded in a
table.

Looks like you could use one table with one row and 3 cells.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
<style type="text/css">
table,td,img{
border:1px solid #003399;
}
table{
width: 100%;
padding:0;
}
td{
padding: 0.5em;
border:1px solid #003399;
}
..tdl{
width:46%;
background-color: #87CEFA;
}
..tdr{
width:46%;
background-color:#FFFACD;
}
</style>
<title></title>
</head>
<body>
<table summary="">
<colgroup>
<col class="tdl">
<col>
<col class="tdr">
</colgroup>
<tbody>
<tr>
<td>
<p>content left</p>
<p>content left</p>
</td>
<td style="border:none;"></td>
<td>
<p>content right</p>
<p>content right</p>
</td>
</tr>
</tbody>
</table>
<p><a href="http://validator.w3.org/check?uri=referer"><img src=
"http://www.w3.org/Icons/valid-html401" "Valid HTML 4.01 Strict" height=
"31" width="88"></a> <a href=
"http://jigsaw.w3.org/css-validator/"><img src=
"http://jigsaw.w3.org/css-validator/images/vcss" alt=
"Valid CSS!"></a></p>
</body>
</html>

--
BootNic Saturday, April 22, 2006 3:05 PM

It is well known that "problem avoidance" is an important part of
problem solving. Instead of solving the problem you go upstream and
alter the system so that the problem does not occur in the first
place.
*Edward de Bono*


Jim Moe 04-22-2006 08:12 PM

Re: 2-column-layout with <table>
 
Markus.Baerlocher@lau-net.de wrote:
>
> i would like to make a 2-column-layout with <table>.
> How do i make a space between the two "columns"?
>

Apply either margin or padding to one or both of the tables.
table-left { padding-right: 8%; } - or use margin-...
or
table-right { padding-left: 8%; }
or
table-left { padding-right: 4%; }
table-right { padding-left: 4%; }

Your code snippet implies that you are using tables for general layout.
Search for "2 column layout" to find modern methods for designing for the WWW.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Markus.Baerlocher@lau-net.de 04-24-2006 08:00 AM

Re: 2-column-layout with <table>
 
Dear css-Professionals,

thanks a lot for your advices! (and sorry for my switzerland-english)

In the last days I read (and understand) a lot about the advantages of
CSS.
It is easy to split content and style by calling style.css in <head>.
Unfortunately my .php doesn't have a "<head>"...

The story behind:
I use a BIG open-source-prog for genealogy.
I try to append it to a "small CMS" (for this I need the
"2-column-layout").
Of corse it will be VERY much better with css!

But in the .php which does my things, there is no <head> where I could
link-in the .css
Alternatively I tried this "table-working-around".

I now something about HTML, and now a little about CSS - but nothing
about PHP.
I use the given content.php, and customyse it after:

echo <<<TEXT

with some HTML-code.

This is bevore "echo <<<TEXT":
----------------------------------
<?php

//----- Globale Einstellungen ( wird f&uuml;r Anzeige ben&ouml;tigt!)
------//
require("config.php");
require("includes/functions_charts.php");
require($PGV_BASE_DIRECTORY.$factsfile["english"]);
if (file_exists($PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE])) require
$PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE];

// -- print html header information
print_header($name." ".$pgv_lang["descend_chart"]);
if (strlen($name)<30) $cellwidth="100%";
else $cellwidth=(strlen($name)*14);
print "\n\t<table class=\"list_table, $TEXT_DIRECTION\"><tr><td
width=\"${cellwidth}px\" valign=\"top\">\n\t\t";
// print "\n\t<h2>".$pgv_lang["descend_chart"].":<br
/>".PrintReady($name)."</h2>";

//----- HTML- content ----------------//
echo <<<TEXT
------------------------------------------
(which I desn't understand - but it works)

I put in this content.php my HTML, including all local style-formats.
For every new content, I repeate the whole PHP- and CSS-stuff around in
many content.php's.
Then I call the content.php's by a menu.php: $submenu["link"] =
"1th-content.php";

Of corse, the best way is to split:
- XHTML-content (a lot of pages)
- style.css
- display.php to call the content and the style

and in the menu.php I call the display.php with a parameter for the
specific content.html

But I have no idea HOW to do this...

Thanks a lot for your support!
Markus

if you will have a look:
http://www.lau-net.de/baerlocher/php..._HTML-Test.php


Martin Edwards 04-25-2006 01:34 AM

Re: 2-column-layout with <table>
 
Markus.Baerlocher@lau-net.de wrote:
> Dear css-Professionals,
>
> thanks a lot for your advices! (and sorry for my switzerland-english)
>
> In the last days I read (and understand) a lot about the advantages of
> CSS.
> It is easy to split content and style by calling style.css in <head>.
> Unfortunately my .php doesn't have a "<head>"...
>
> The story behind:
> I use a BIG open-source-prog for genealogy.
> I try to append it to a "small CMS" (for this I need the
> "2-column-layout").
> Of corse it will be VERY much better with css!
>
> But in the .php which does my things, there is no <head> where I could
> link-in the .css
> Alternatively I tried this "table-working-around".
>
> I now something about HTML, and now a little about CSS - but nothing
> about PHP.
> I use the given content.php, and customyse it after:
>
> echo <<<TEXT
>
> with some HTML-code.
>
> This is bevore "echo <<<TEXT":
> ----------------------------------
> <?php
>
> //----- Globale Einstellungen ( wird f&uuml;r Anzeige ben&ouml;tigt!)
> ------//
> require("config.php");
> require("includes/functions_charts.php");
> require($PGV_BASE_DIRECTORY.$factsfile["english"]);
> if (file_exists($PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE])) require
> $PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE];
>
> // -- print html header information
> print_header($name." ".$pgv_lang["descend_chart"]);
> if (strlen($name)<30) $cellwidth="100%";
> else $cellwidth=(strlen($name)*14);
> print "\n\t<table class=\"list_table, $TEXT_DIRECTION\"><tr><td
> width=\"${cellwidth}px\" valign=\"top\">\n\t\t";
> // print "\n\t<h2>".$pgv_lang["descend_chart"].":<br
> />".PrintReady($name)."</h2>";
>
> //----- HTML- content ----------------//
> echo <<<TEXT
> ------------------------------------------
> (which I desn't understand - but it works)
>
> I put in this content.php my HTML, including all local style-formats.
> For every new content, I repeate the whole PHP- and CSS-stuff around in
> many content.php's.
> Then I call the content.php's by a menu.php: $submenu["link"] =
> "1th-content.php";
>
> Of corse, the best way is to split:
> - XHTML-content (a lot of pages)
> - style.css
> - display.php to call the content and the style
>
> and in the menu.php I call the display.php with a parameter for the
> specific content.html
>
> But I have no idea HOW to do this...
>
> Thanks a lot for your support!
> Markus
>
> if you will have a look:
> http://www.lau-net.de/baerlocher/php..._HTML-Test.php
>

Verdammt! Kompliziert, na?

--
You can't fool me: there ain't no Sanity Clause - Chico Marx

www.geocities.com/Athens/Agora/1955

Markus.Baerlocher@lau-net.de 04-27-2006 06:03 PM

Re: 2-column-layout with <table>
 
Please, who may tell me, how it works to build in a special.css in my
..php who does not have something like <head>?

thanks a lot!
Markus



All times are GMT. The time now is 02:11 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.