[CSS] table cell height "mee laten sizen" - Softwareontwikkeling

dinsdag 20 november 2007 08:53

Acties:

Verwijderd

Topicstarter

Ik probeer een template te maken met het gebruik van een table contstruct. Dit ziet er ongeveer uit als volgt:

header
menu	content
footer

Ik wil dat de header en de footer een statische hoogte krijgen omdat ik daar images voor heb. De menu en de content zouden automatisch moeten mee-sizen waarbij de content cell een scrollbar moet krijgen als deze te klein wordt. Ik heb nu het volgende wat al werkt in IE maar nog niet in FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<style>
html,body {
height: 100%;
margin: 0;
}

table {
width: 780px;
}
#header {
width: 780px;
height: 230px;
background-color: red;
}

#menu {
background-color: grey;

width: 130px;
}

#content {
background-color: yellow;
}

#content div {
height: expression(document.body.clientHeight-360);
overflow-y: scroll;
}

#footer {
width: 780px;
height: 130px;
background-color: blue;
}

#middle {

}
</style>
<title>{sitename}</title>

<body>

<table border="0" cellspacing="0" cellpadding="0">
<tr id="header">
<td colspan="2">Dit is de header.</td>
</tr>
<tr id="middle">
<td id="menu">Dit is een menu</td>
<td id="content"><div>Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.
Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.</div>
</td>
</tr>
<tr id="footer">
<td colspan="2">En een voetje.</td>
</tr>
</table>

</body>
</html>

Het werkt nog niet in FF omdat ik CSS expressions gebruik die niet in FF ondersteund worden. Ik zoek echter wel een oplossing zodat de pagina in FF hetzelfde eruit ziet. Zouden er CSS properties zijn die ik hiervoor kan gebruiken?

[ Voor 2% gewijzigd door Verwijderd op 20-11-2007 08:55 . Reden: aanvulling ]

dinsdag 20 november 2007 09:25

Acties:

Verwijderd

Als ik jou was zou ik code tags gebruiken in je post, ik ga dit namelijk niet bekijken als het zo onoverzichtelijk eruit ziet.

dinsdag 20 november 2007 09:29

Acties:

killercow

eth0

Misscien is het handig om je site te bouwen met css in plaats van tables voor layout,
Daarbij komt dat je dan kunt mee liften op de huidige ontwikkelingen op web-development gebiedt en zo een template kunt maken voor de layout die jij wilt.

Het hele expression verhaal is geen oplossing, omdat epxression simpelweg niet bestaat,

Als je table 100% hoog maakt, en dan 2 rows een bepaalde hoogte geeft, zal de andere automatisch meeschalen. (je content div dus zonder hoogte invoeren)

Als je echter je table 100% hoog maakt wordt hij 100% van z'n parent, en dat is in IE en FF niet het zelfde, maar daar kom je zo wel achter.

openkat.nl al gezien?

dinsdag 20 november 2007 09:34

Acties:

Verwijderd

Rule #1: het table element is niet bedoeld voor layout, maar zoals de naam al aangeeft voor tabellen.

Dus gebruik deze constructie eens (ergens van internet geplukt, niet gecontroleerd, mogelijk niet geoptimaliseerd):

code:

<html>
<head>
<title>TWO-COLUM FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
  background: #0f0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  position: absolute;
  top: 100px;
left: 0px;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 650px;
  height: 500px;
}
#footer {
  background: #0f0;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

dinsdag 20 november 2007 11:01

Acties:

killercow

eth0

Verwijderd schreef op dinsdag 20 november 2007 @ 09:34:
Rule #1: het table element is niet bedoeld voor layout, maar zoals de naam al aangeeft voor tabellen.

Dus gebruik deze constructie eens (ergens van internet geplukt, niet gecontroleerd, mogelijk niet geoptimaliseerd):

Doe eens niet,

Zo schiet het nog geen mier op natuurlijk wel al die lompe absoluut gepositioneerde elementen.

Gewoon 1 container div maken, deze in het midden zetten, daar binnen dan 1 kop div over de volledige breedte.
2 divjes voor de content en menu (float-left, met een passende afmeting)
En dan een footer welke een clear:both aanroept om zo onder beide content divs te komen, dit alles binnen de container div, et voila, nette site.

Achtergrond kleurtje over de volledige legte van je content-div kun je oplossen met faux-columns.

[ Voor 31% gewijzigd door killercow op 20-11-2007 11:01 ]

openkat.nl al gezien?

dinsdag 20 november 2007 15:45

Acties:

Verwijderd

killercow schreef op dinsdag 20 november 2007 @ 11:01:
[...]

Doe eens niet,

Zo schiet het nog geen mier op natuurlijk wel al die lompe absoluut gepositioneerde elementen.

As said: niet gecontroleerd en niet geoptimaliseerd. Ging me er meer om dat je iig geen tables moet gebruiken als layout middel. Code was een voorbeeld. Totally agree: geen absoluut gepositioneerde elementen gebruiken.

dinsdag 20 november 2007 19:15

Acties:

_Thanatos_

Ja, en kaal

Wat is er mis met absolute positioning:

Cascading Stylesheet:

div {
  position: absolute;
  left: 10em;
  right: 10em;
}

En hij resizet keurig mee. Mensen denken vaak dat absolute positioning een "vaste" layout impliceert, maar dat is niet zo. Absolute position is je vriend, maar behandel em dan wel zo

日本！🎌

dinsdag 20 november 2007 19:39

Acties:

killercow

eth0

_Thanatos_ schreef op dinsdag 20 november 2007 @ 19:15:
Wat is er mis met absolute positioning:
Cascading Stylesheet:
1
2
3
4
5
div {
  position: absolute;
  left: 10em;
  right: 10em;
}
En hij resizet keurig mee. Mensen denken vaak dat absolute positioning een "vaste" layout impliceert, maar dat is niet zo. Absolute position is je vriend, maar behandel em dan wel zo

True,

Maar het lijkt me niet meer dan verstandig de TS eerst een beetje richting table-less design te laten overstappen zonder ook nog eens relatieve afmetingen te introduceren.

openkat.nl al gezien?

dinsdag 20 november 2007 21:26

Acties:

Verwijderd

Topicstarter

Dank je! alleen nu nog.......

onderstaand werkt zowel in FF als in IE. Het geeft static heights voor header en footer. Nu zou ik het geheel als layout willen centreren. ik dacht eerst de container div "wrap" een position absolute te geven met een left: 50% en een left-margin: 390px echter dan komen de andere div elements in "verstoring". Weet iemand hoe ik het geheel kan centreren op de pagina?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>
html,body {
margin: 0;
}

#wrap { width: 780px; }

#header {
width: 780px;
height: 230px;
background-color: red;
}

#menu {
background-color: orange;
position: absolute;
top: 230px;
bottom: 130px;
width: 130px;
}

#content {
background-color: yellow;
position: absolute;
top: 230px;
bottom: 130px;
left: 130px;
overflow-y: scroll;
width: 650px;

}

#footer {
position: absolute;
width: 780px;
height: 130px;
background-color: blue;
float: left;
bottom: 0px;
}
</style>
<title>{sitename}</title>

<body>
<div id="wrap">
<div id="header">
Dit is de header.</div>
<div id="menu">Dit is een menu</div>
<div id="content">Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst. Dit is tekst.</div>
<div id="footer">En een voetje.</div>
</div>

</body>
</html>

dinsdag 20 november 2007 21:59

Acties:

Verwijderd

Nogmaals het verzoek om code tags te gebruiken, dat maakt het makkelijker voor iedereen. Lees: Webdesign, Markup & Clientside Scripting Policy eens door

woensdag 21 november 2007 00:10

Acties:

Verwijderd

Dat kan met:

Cascading Stylesheet:

1	margin:0px auto

Voor IE moet je dan wel dit aan de body toewijzen:

Cascading Stylesheet:

1	text-align:center

en aan je wrapper:

Cascading Stylesheet:

1	text-align:left

Zie http://gathering.tweakers.net/forum/list_messages/1182742.

woensdag 21 november 2007 00:19

Acties:

BtM909

Watch out Guys...

Dit topic gaat dicht. Begin maar opnieuw en geef alleen relevante code en een werkende testcase (strip alle overbodige info eruit) en zet die eventueel online.

Voor de rest is het wellicht tijd om eens in 2007 te stappen en naar betere technieken dan tables voor layout te kijken

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.