Probleempje met tabellen

Status
Niet open voor verdere reacties.
J

justinos

Gebruiker
Lid geworden
12 nov 2004
Berichten
199
Ik zal mijn probleem zo goed mogelijk proberen uit te leggen. Mijn website bestaat eigenlijk uit 3 gedeeltes, in de breedte. Het middengedeelte is gewoon de website, hier bevindt zich de lay out met de info erin etc. Dan is er een linkerkant en een rechterkant die altijd verschillend zijn van grootte, ligt er maar net aan in welke beeldschermresolutie je de pagina bekijkt. Het frame van de website staat namelijk gecentreerd. Nu moet de resterende ruimte aan de linkerkant een andere kleur hebben dan de resterende ruimte aan de rechterkant. Wat ik nu gedaan heb is het volgende:

HTML: 
<table width="100%" height="193" border="0" align="center" marginwidth="0" marginheight="0" cellspacing="0" cellpadding="0"><tr>
<td background="headerleft.jpg" width="50%"></td>
<td align="center" width="933"><IMG src="headercenter.jpg" border="0" width="933" height="193"></td>
<td background="headerright.jpg" width="50%"></td>
</tr></table>

De header is nu een plaatje (headercenter.jpg), maar als ik dit als background in de <td> doe, dan wordt ie helemaal in elkaar geperst door de twee td's links en rechts ernaast, want die zijn beide 100%. Dus je ziet de header niet meer. Maak je van de eerste en laatste td 40%, dan zie je 20% van de header. Toch heb ik in de tweede td duidelijk staan dat deze 933 pixels breed moet zijn.

Dus de middelste td moet 933 pixels breed zijn, de td's eromheen moeten allebei 50% van de resterende ruimte vullen. Hoe ga ik dit oplossen?

alvast bedankt!
 
10%?

<table width="100%" height="193" border="0" align="center" marginwidth="0" marginheight="0" cellspacing="0" cellpadding="0">
<tr>
<td background="headerleft.jpg" width="10%">L</td>
<td align="center" width="933"><IMG src="headercenter.jpg" border="0" width="933" height="193"></td>
<td background="headerright.jpg" width="10%">R</td>
</tr>
</table>

:cool:
 
Nee werkt niet, dan maakt hij van het frame (dus de tweede <td>) 80%, en die moet niet 80% zijn maar exact 933.
 
Niet bij mij,
de code:

HTML: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Thursday, January 17, 2008 20:39:20 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  CONTENT="korte beschrijving van de pagina">
<meta name="keywords"  CONTENT="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" CONTENT="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="all">
 @import url("zp.css"); 
</style>
		 
<LINK rel="stylesheet" type="text/css" href="zp.css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}
</style>
</head>

<body >

<table width="100%" height="193" border="0" align="center" marginwidth="0" marginheight="0" cellspacing="0" cellpadding="0">
<tr>
<td background="headerleft.jpg" width="10%">L</td>
<td align="center" width="933"><IMG src="headercenter.jpg" border="0" width="933" height="193"></td>
<td background="headerright.jpg" width="10%">R</td>
</tr>
</table>

</body>

</html>

:cool:
 
Ik was ook een beetje onduidelijk, excuses. Zoals de code nu is werkt het inderdaad wel. Doe de code nu is als volgt:

HTML: 
<table width="100%" height="193" border="0" align="center" marginwidth="0" marginheight="0" cellspacing="0" cellpadding="0">
<tr>
<td background="headerleft.jpg" width="10%">L</td>
<td align="center" width="933" background="headercenter.jpg">tekst hier</td>
<td background="headerright.jpg" width="10%">R</td>
</tr>
</table>

Dan heb je de header als achtergrond en kan je er alle tekst etc. overheen zetten, maar zo werkt het ineens niet meer :(
 
Vooruit dan:

HTML: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Thursday, January 17, 2008 20:39:20 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  CONTENT="korte beschrijving van de pagina">
<meta name="keywords"  CONTENT="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" CONTENT="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="all">
 @import url("zp.css"); 
</style>
		 
<LINK rel="stylesheet" type="text/css" href="zp.css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}
.bgim
{
width:933px;
border:2px solid #ff0000;
background-image:headercenter.jpg;
}
</style>
</head>

<body >

<table width="100%"  border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<td style="background-image:headerleft.jpg;"  width="10%">L</td>
<td align="center" width="933" ><div class="bgim">tekst hier nog meer tekst <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In congue pede ac mauris. Sed sed neque a quam vestibulum volutpat. Donec aliquet. Ut sed libero. Etiam arcu odio, sagittis consequat, hendrerit vel, ullamcorper nec, eros. Aliquam mattis, velit ac bibendum dignissim, metus sapien tempus mi, feugiat dapibus pede lacus at quam. In porta, elit vel bibendum malesuada, felis arcu lobortis eros, non pellentesque nisl justo eu neque. In sit amet nunc a lacus placerat mollis. Vestibulum turpis. Aenean euismod massa a augue. Phasellus tincidunt.

Pellentesque eu tellus. Etiam pharetra, dui eu convallis molestie, enim nulla sagittis odio, quis suscipit mauris ligula sodales justo. Cras fermentum nisi vel turpis. Mauris massa odio, ornare a, dapibus quis, molestie non, felis. Phasellus lobortis mauris eu neque. Proin sapien diam, pellentesque nec, scelerisque sed, molestie ac, enim. In aliquam vestibulum nulla. Sed nec elit ut quam bibendum pharetra. Donec et nulla in nunc sollicitudin commodo. Aenean risus. In magna orci, cursus a, venenatis nec, porta et, metus. Nullam libero mauris, facilisis a, eleifend convallis, ultrices et, erat. Donec lorem massa, lobortis quis, iaculis eu, aliquam in, nulla. Vestibulum orci. Etiam nisi. Quisque vehicula odio ac arcu. Nullam vehicula mi.

Fusce vitae neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pede ipsum, iaculis sed, placerat ut, lacinia auctor, ipsum. Proin vel massa eget nibh pulvinar hendrerit. Donec accumsan fermentum dolor. Nulla turpis massa, pretium id, varius at, varius vel, felis. Pellentesque justo urna, faucibus ut, ullamcorper ut, adipiscing quis, neque. Cras felis libero, tristique vitae, ultrices vel, aliquet laoreet, leo. Sed tempus tempus diam. Curabitur auctor. Ut lorem sapien, molestie a, tristique nec, condimentum in, enim. Maecenas interdum, dolor faucibus sagittis tristique, augue lacus varius arcu, ac vehicula nibh mi ullamcorper ante. </div></td>
<td style="background-image:headerright.jpg"  width="10%">R</td>
</tr>
</table>

</body>

</html>

Ik neem aan dat je wel je pagina laat controleren op:
http://validator.w3.org/
 
Peter, helemaal te gek. Ik heb soms even een zetje nodig, en daar leer ik dan weer van. Bedankt voor je hulp!! :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan