Toon posts:

probleem met margins

Pagina: 1
Acties:

Verwijderd

Topicstarter
Als ik een tabel heb met een width van 100% dan komt deze mooi tot de buitenste rand. ok dat is prima.
nu wil ik dat aan de linkerkant een marge komt van 20px:

html in code
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="margin">

css:
.margin {
margin-left: 20px;
margin-right: auto;
}

ok lijkt prima ( de marge links is er in ieder geval.

nu een marge links en rechts:

html in code
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="margin">

css:
.margin {
margin-left: 20px;
margin-right: 20px;
}

nu wordt dus mijn tabel aan de rechterkant uit beeld geschoven terwijl ik toch echt zeg dat ik een marge wil hebben. hoe moet ik dit oplossen?

  • André
  • Registratie: Maart 2002
  • Laatst online: 19-08 12:30

André

Analytics dude

Volgens mij komt dat door de width=100%, misschien moet je daar 95% van maken.

Verwijderd

Topicstarter
dat lost het probleem niet op. Wat ik dan doe is de table gewoon kleiner maken. De margin-right wordt nog steeds niet overgenomen.

Verwijderd

wel, maar als je tabel al 100% is en daarbij komen nog marges, wordt het geheel groter dan je beeld. Zoek maar eens een plaatje van het boxmodel op.

bovendien als je met css aan het werk gaat, regel dan ook de width ermee en de border enzo

bovendien2: ik krijg ook al de indruk dat er weer eens iemand probeert te layouten met tabellen: niet doen, gewoon html gebruiken waar het voor is en css gebruiken om te layouten.

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:21

crisp

Devver

Pixelated

In plaats van je tabel zelf margin mee te geven kan je er beter een container omheen gooien van 100% breedte en een padding van 20px.
Hou daarbij trouwens wel rekening met boxmodel verschillen ;)

[ Voor 20% gewijzigd door crisp op 29-09-2003 13:05 ]

Intentionally left blank


Verwijderd

Als je in je CSS het volgende doet:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
body {
  margin: 20px;
}

/* en eventueel */
.margin {
  width: 100%;
}

HTML:
1
2
3
4
5
6
7
8
<table class="margin">
  <tr>
    <td>inhoud</td>
  <tr>
</table>

<!-- of beter -->
<div class="margin">inhoud</div>


Dan scheidt je inhoud van layout en werkt het in IE + Mozilla.

[edit]Juist, ik was kennelijk wat traag. ;)

[ Voor 21% gewijzigd door Verwijderd op 29-09-2003 13:06 ]

Pagina: 1