login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Typografish tabel style (Opgelost)

Offline ThAlmighty - 08/08/2011 17:05
Avatar van ThAlmightyHTML beginner Mannen, al weer een tijdje geleden (+-2 jaar), maar dan heb ik toch weer eens een vraag. Namelijk het volgende:

Ik ben een site aan het maken, en wil hiermee het volgende (plaatje). Vanuit een typografish standpunt is het het mooist om text in een tabel uit te lijnen met de rest en de table "uit te laten breken". Allemaal niet zo moeilijk maar hier komt het probleem. Moet ik alle content (behalve de tabel) een margin van 10 geven (met dus de mogelijkheid dat ik hier weer uitzonderingen op krijg), of alleen de tabel een margin van -10 (wat veels consistenter en to the point is).

Ik zeg zelf het laatste, maar de tabel moet op width:100% gezet kunnen worden. Als je dat doe met een margin van -10 aan beide zijdes, word de tabel 20 pixels kleiner en dat moet niet. Hoe los ik dit op, ik wil namelijk niet de eerst genoemde optie doen want dat gaat tegen al het logische in.

Lang verhaal, maar moeilijke kwestie (althans in mijn ogen)

5 antwoorden

Gesponsorde links
Offline Kevin - 08/08/2011 23:18
Avatar van Kevin Crew Ajax/REST Verplaatst naar HTML/CSS, lijkt me relevanter dan categorie "Grafisch".

Je zou best in lagen werken (div in div) en stoppen met tables.
Reden hiervoor is omdat tables vaak lastig doen als het om overflows gaat en deze eigenlijk enkel dienen voor tabulaire data..

Wat je zou kunnen maken is:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="container">
  2.  
  3. <div class="leftSide">
  4. Lorem ipsum
  5. </div>
  6.  
  7. </div>

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .container { position: relative; }
  2. .leftSide { position: relative; float: left; margin: 0 0 0 -10px; }


Dit beknopte voorbeeldje zou je denk ik verder kunnen helpen?
Offline vinTage - 09/08/2011 00:12
Avatar van vinTage Nieuw lid
Kevin schreef:
Reden hiervoor is omdat tables vaak lastig doen als het om overflows gaat en deze eigenlijk enkel dienen voor tabulaire data..

Ik vind dat plaatje er behoorlijk 'tabulair' eruitzien..

@ThAlmighty, je kan ook met padding werken he (als ik je vraag tenminste goed begrijp)
Offline ThAlmighty - 09/08/2011 09:14
Avatar van ThAlmighty HTML beginner Het gaat inderaad om een "echte" tabel, anders had ik inderdaad divs gebruikt of gewone semantische elementen zoals <p> gebruikt.

@vinTage
Ik werk al met padding, laten we zeggen 10px; Ik doe dan (versimpelt):
css code - Bekijk de code zonder highlighting - Klap code in 
  1. table {
  2. margin: 0px -10px;
  3. }
  4. td {
  5. padding: 0px 10px;
  6. }


Het probleem is alleen dan dus dat als width op 100% word gezet, dat 20px minder is als eigenlijk gewenst. Dus ik zou graag jullie inzichten willen horen over hoe dit optelossen op zo een elegant mogelijke manier.
Offline Maarten - 09/08/2011 09:29
Avatar van Maarten Erelid En kun je niet gewoon alle padding op bv. 10px zetten, en dan evt. JS/JQuery/pseudo-css-crap-gewijs bij de buitenste cellen de padding enkel toepassen aan de binnenzijden (dus links en rechts terug op 0) plaatsen?
Offline ThAlmighty - 11/08/2011 13:49
Avatar van ThAlmighty HTML beginner Nu is uiteindelijk de oplossing om met een gefixeerde grote te werken en even de 100% functionaliteit te laten voor wat het is. Was meer een uitdaging voor mezelf om te kijken of ik dat ook werkend kan krijgen, maar het gedrag wat een negatieve margin oproept - namelijk margin aftrekken van de dimensies - maakt het onmogelijk. Jammer.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.177s