Foto's plaatsen in table

[Bruce The Boss]

<table width="100%" class="style1" style="border: 2px solid #0066CC" >
<tr>
<td width="50%" height="163"></td>
<td width="50%" height="163"></td>
</tr>
</table>

Hallo,

Ik wil graag op DEZE site bovenin 2 aparte "foto's plaatsen.

Nu zit ik te stoeien met de maten.

De table is 100% maar moet ik de twee vakken dan op 50% zetten en moet ik de foto's dan ook nog een width en een height mee geven of haal ik die 50 % weg en geef ik ze een maat mee.

Ik kom er niet uit.

Het probleem is dat de bovenste tabel in maat gelijk moet blijven, als mensen een anere scherm resolutie gebruiken.

Wie kan me helpen?

 

[fritzi]

De foto's die je in de vakken plaatst hebben een vaste maat. De tabel schaalt mee, maar de foto's blijven op elk scherm even groot. Op een groot scherm zal er dus meer ruimte om de foto's te zien zijn.

In de code van een foto <img> is het altijd goed om de width en height op te geven. Je tabel is 100%, dus die zal meeschalen. Het is niet noodzakelijk om de cellen 50% mee te geven.

 

[Bruce The Boss]

Op een groot scherm zal er dus meer ruimte om de foto's te zien zijn.

Is dat te voorkomen?

 

[fritzi]

Dit is te voorkomen door de tabel een vaste breedte (geen percentage) te geven. En te centreren. Op een groot scherm komt alles dan in het midden te staan, met ruimte aan de linkerkant en de rechterkant.

 

[Bruce The Boss]

Hoi,

In mijn geval DEZE SITE moet ik dat dus voor elke tabel afzonderlijk doen?

 

[fritzi]

Ja, als je dit doet moet je het voor alle tabellen doen. Je geeft de tabellen - bijvoorbeeld - een width van 980 pixels. In de bovenste tabel plaats je dan de foto's in de cellen met een width van 490 pixels. Als je borders of padding gebruikt moet je breedte ervan aftrekken, de maten moeten kloppen.

Daarna centreer je de tabellen, door om de code van de tabellen dit toe te voegen:
<div align="center"></div>

 

[Bruce The Boss]

Iets gaat er niet goed maar ik vind niet wat.

Ik heb alles op 980 pixels gezet maar nu zie ik alleen maar een blauw vlak

Help

Wat doe ik fout?

 

[fritzi]

Achter <style type="text/css"> in je stylesheet staat <!--
Dat klopt niet (het is een deel van een tag, er zou verderop een afsluitende tag moeten staan, maar die staat er niet). Werkt het als je dit weghaalt?

 

[Bruce The Boss]

Nee, het blijft blauw

 

[Bruce The Boss]

Ja, nu is het wel goed.

Het komt waarschijnlijk door:

<base href="http://www.vvohapert.nl/" />

Maar ik snap niet wat het bovenstaande precies inhoud.

Ik heb de site op 2 plaatsen:
www.jacco.tk
www.vvohapert.nl

Ik had de site aangepast op www.jacco.tk maar niet op de tweede.

Kan iemand uitleggen hoe dat dan kan?

 

[Bruce The Boss]

<!-- kop begin -->
<table width="1060" border="0" align="center" class="style1" style="border: 2px solid #0066CC" >
<tr>
<td width="530" ><img src="plaatjes/logo vert.gif" width="530" height="161" /></td>
<td width="530" ><img src="plaatjes/test 2.jpg" width="530" height="161" /></td>
</tr>
</table>
<!-- kop eind -->

Waarom waarom krijg ik het niet goed?

Ik krijg de bovenste tabel maar niet in dezelfde maat als de rest.

Wat doe ik toch fout??

 

[fritzi]

De border van 2 pixels maakt de tabel breder, en er zit ook padding in (ruimte tussen de border en het plaatje). Je kan de padding weghalen en de plaatjes 2px smaller maken.

Zo haal je de padding uit een tabel:
<table width="1060" cellspacing="0" cellpadding="0" border="0" enzovoorts

De meeste beeldschermen hebben een resolutie van 1024x768. Het is jammer dat je website daar nu net niet in past. Als je max. 1000 aanhoudt (scrollbar komt er ook bij) past het helemaal op een standaard monitor.

 

[Bruce The Boss]

Yep, denk dat het kwartje nu gevallen is

Bedankt voor de moeite !

 

[fritzi]

Succes verder!