[ CSS ] Probleempje met left / right margin op 100% table

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Veel uitleg is er niet aan, ik wil zoals in onderstaande url een margin zetten op mijn table zoals ik doe op bvb een paragraaf, heading, ...

http://hoaxer.be/dump/tabel.html
(niet letten op de kleurtjes, opzet, ... ik wou volledig uitsluiten dat het probleem te maken heeft met andere code)

Het probleem is dus wanneer ik het volgende doe

Cascading Stylesheet:
1
table.example1  { width:100%; margin:10px; padding:5px; border:1px solid #000; background-color:green; }


binnen een div met vaste breedte, de tabel inderdaad 10 pixels gaat opschuiven links, boven & onder, maar dat hij dan ook buiten de div rechts komt te liggen terwijl deze een vaste breedte heeft

Afbeeldingslocatie: http://hoaxer.be/dump/screenshots/screenshot_2010-02-26_13-59-11.png

Volgens mij is het iets dom dat ik over het hoofd zie of waar ik even niet kan opkomen maar Google brengt me vandaag niet veel meer resultaten dan problemen met width & margins in IE ... terwijl het een probleem is in alle browsers (Firefox3, IE8, Safari, ...)

[ Voor 4% gewijzigd door Verwijderd op 26-02-2010 17:03 ]


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45

Bosmonster

*zucht*

Het komt niet door de margin, maar door de padding en border. Je table is nu 100% + 12px.

Acties:
  • 0 Henk 'm!

  • MueR
  • Registratie: Januari 2004
  • Laatst online: 00:33

MueR

Admin Tweakers Discord

is niet lief

Je probleem is het niet zo goed begrijpen van het box-model en hoe width, margin en dergelijke daar invloed op hebben. Je vertelt tegen je tabel dat hij 100% van de parent breed moet zijn, dus dat doet ie ook. Vervolgens zeg je dat ie aan beide kanten 10 pixels afstand moet houden, dus dat doet de browser ook voor je. Margins vallen echter buiten de box.

Anyone who gets in between me and my morning coffee should be insecure.


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Mmm, dat ik daar niet aan dacht :X, ken het box-model wel maar het is me dus even ontgaan ...

Als oplossing heb ik dus een extra div rond de tabel gezet met een margin-right, nu is de layout wel correct :) Misschien niet de meest semantische oplossing maar het resultaat is me even belangrijker dan het technische / semantische ...
 
Cascading Stylesheet:
1
div.fix { margin-right:20px; }


HTML:
1
2
3
4
5
<div class="fix">
<table>
...
</table>
</div>


heb het voorbeeldje @ http://hoaxer.be/dump/tabel.html ook even updated

Acties:
  • 0 Henk 'm!

  • monnick
  • Registratie: December 2005
  • Niet online
offtopic:
Holy shit, jij hebt echt een super vette usericon KimG! Wat een jeugdherinneringen heb ik aan dat spel :p Hoe heet dat sneeuw / ski spel ook al weer? Ik werd echt altijd opgegeten door dat monster / jeti :p

Acties:
  • 0 Henk 'm!

Verwijderd

monnick schreef op vrijdag 26 februari 2010 @ 17:17:
offtopic:
Holy shit, jij hebt echt een super vette usericon KimG! Wat een jeugdherinneringen heb ik aan dat spel :p Hoe heet dat sneeuw / ski spel ook al weer? Ik werd echt altijd opgegeten door dat monster / jeti :p
SkiFree
Pagina: 1