Table data cells met fixed width

[Marcoevich]

Hey allemaal,

Ik wil weer eens een projectje in HTML beginnen. Ik merk gelijk al dat het weer lang geleden is voor mij, en daarom heb ik jullie hulp nodig

Ik wil een table layout waarvan de breedte van de table data cellen per rij varieert.

Ik heb dus deze code:

HTML:

<table class="table_main" width="800" align="center" border="1" cellpadding="5" cellspacing="0">

<tr height="100">
      <td class="logo">
      <center><h1>Logo</h1></center>
      </td>
      
      <td class="slogan">
      <h1>Slogan met e.v.t. een afbeelding</h1>
      </td>
<tr>

<tr height="10">
     <td colspan="2">
     Menu komt hier!
     </td>
</tr>

<tr>
       <td width="700"><?
            if(empty($_GET['p'])) $_GET['p'] = "welkom";
            if(file_exists($_GET['p'] . ".php") && !empty($_GET['p'])) include($_GET['p'] . ".php"); else include("welkom.php");
            ?>
        </td>
        
        <td width="100">
        Menu<br />
        Menu<br />
        Menu<br />
        </td>
</tr>
    
    
</table>

Maar het ziet eruit als dit:


De td classe 'logo' moet 100 pixels breed zijn, en de classe 'slogan' 700 pixels.
De td eronder heeft de volledige breedte.
Daaronder weer 700 en 100 (precies andersom dus).

In de afbeelding kun je zien dat de td classe 'logo' een vreemde breedte heeft. Met behulp van css heb ik die echter op 100 pixels gezet:

Cascading Stylesheet:

.logo {
width: 100 px;
}

Waarom werkt dit niet? Hoe kan ik ervoor zorgen dat de ene td 100 pixels is, en in de rij eronder bijvoorbeeld 700 pixels? Ik wil dat iedere rij onafhankelijk van elkaar functioneert.

Ik hoop dat ik 't zo duidelijk heb uitgelegd Wie zou mij kunnen helpen hiermee?

Alvast bedankt!

(de borders staan aan zodat ik goed kan zien hoe de tabel functioneert)

[PaulZ]

Ik laat de discussie over het gebruik van tables hiervoor even aan anderen over...

Eén optie:
Als je persé met tables deze layout wil hebben, kun je eens kijken naar colspans.
Dan heb je 8 columns van 100px. Wanneer je dan een stuk van 700 px wilt hebben maak je één td met colspan=7 en is er eentje van 100px over etc. etc.

Aangezien dit allemaal heel lastig onderhouden wordt, raad ik je toch aan naar andere HTML (divs bijvoorbeeld) te kijken.

[ Voor 20% gewijzigd door PaulZ op 21-04-2012 00:04 ]

[Marcoevich]

Ja ik ben ervan op de hoogte dat je het beter met divs kunt doen. Maar het is maar een simpele site en ik heb 't nog ff met divs geprobeerd, maar toen kreeg ik dit: http://piclair.com/data/47d38.jpg

Maar bedankt voor je suggestie. Ik zal me eens verdiepen in de colspans, eens kijken of ik het voor elkaar kan krijgen

[PaulZ]

Er zijn ook websites waar je nagenoeg kant-en-klare html en css kan downloaden. Scheelt je weer werk, maar kost je kennis ...

[Marcoevich]

Ja klopt Ik vind het leuk om het zelf te maken, en een beetje uit te zoeken hoe het ook weer zat

Met die collspans lukt het nog niet echt trouwens. Alle td's (op de middelste na) blijven dezelfde breedte houden

[Acid_Burn]

Wat jij wil kan volgens mij helemaal niet. Het idee achter een table is juist dat alle cellen in dezelfde kolom dezelfde breedte krijgen. Je kan wel cellen samenvoegen, maar die samengestelde cel is dan weer exact even breed als de kolommen van de niet samengestelde cellen bij elkaar.

Je zult echt over moeten naar divs, zo moeilijk is dat nu ook weer niet.

En anders opdelen in verschillende tabellen die je individueel kan indelen.

[ Voor 9% gewijzigd door Acid_Burn op 21-04-2012 00:54 ]

[Marcoevich]

Ok, goed om te weten dat het met tabellen niet kan. Morgen toch maar eens met divs proberen dan.

[RaZ]

Kan wel met tables. je hebt immers de colspan en rowspan. Maar tables gebruiken voor lay-out is zooo vorige eeuw.

Kan je zelf nog best leuke dingen mee doen.

Want als je nu al dingen moet gaan opzoeken, kan je die tijd beter besteden in technieken die men nu gebruikt.

[Groentjuh]

cryptisch maar misschien zou het zo kunnen.

logo: 100px; slogan: 600px + 100px(colspan 2)
topnav: 100px + 600px + 100px(colspan 3)
content: 100px + 600px(colspan 2); side-menu: 100px

Ik zou echter toch voor divs gaan!

[C0rnelis]

riky404 schreef op zaterdag 21 april 2012 @ 00:11:
Ja ik ben ervan op de hoogte dat je het beter met divs kunt doen.
[..]

riky404 schreef op zaterdag 21 april 2012 @ 00:32:
Ja klopt Ik vind het leuk om het zelf te maken, en een beetje uit te zoeken hoe het ook weer zat
[..]

Los van de mogelijkheden met divs/tabellen, spreek je jezelf hier ook een beetje tegen. Tabellen voor layout is echt een no-go. Zie eens http://jsfiddle.net/Lk6Vw/

[ Voor 14% gewijzigd door C0rnelis op 21-04-2012 02:52 ]

[Marcoevich]

Door alle opmerkingen over de tabellen ben ik het toch maar eens met divs gaan proberen, en jullie hebben gelijk, eigenlijk gaat dat veel makkelijker

Het ziet er nu zo uit: http://piclair.com/data/edfm8.jpg

Nu zit ik met 2 dingen die ik niet voor elkaar krijg:
- de copyright valt onder het rechter menu, ipv daarvan wil ik hem in het midden, onder het hele frame zeg maar. Dat rechter menu rekt niet automatisch mee met de inhoud van de linker tekst div. Ik denk dat dat de reden is dat de copyright daar staat. Hoe krijg ik dat voor elkaar?

- Alle tekst in alle divs moet overal 5 px van de rand van de div af staan en niet in het midden. Kan ik dit voor elkaar krijgen zonder alle tekst in aparte paragraphs te zetten? Of is dat onmogelijk?

Dank alvast

(@ c0rnelis: dank voor je voorbeeldje, das weer eens een hele andere kijk op hoe het ook kan Alleen werkt het totaal niet met Internet explorer...)

[Acid_Burn]

Geef die divs gewoon een padding van 5 px. Let wel even op dat je je padding weer van je width/height afhaalt anders worden ze breder dan je bedacht had.

[C0rnelis]

riky404 schreef op zaterdag 21 april 2012 @ 12:52:
[..]

Nu zit ik met 2 dingen die ik niet voor elkaar krijg:
- de copyright valt onder het rechter menu, ipv daarvan wil ik hem in het midden, onder het hele frame zeg maar. Dat rechter menu rekt niet automatisch mee met de inhoud van de linker tekst div. Ik denk dat dat de reden is dat de copyright daar staat. Hoe krijg ik dat voor elkaar?

- Alle tekst in alle divs moet overal 5 px van de rand van de div af staan en niet in het midden. Kan ik dit voor elkaar krijgen zonder alle tekst in aparte paragraphs te zetten? Of is dat onmogelijk?

@ c0rnelis: dank voor je voorbeeldje, das weer eens een hele andere kijk op hoe het ook kan Alleen werkt het totaal niet met Internet explorer...

• De gemakkelijkste manier is om een wrapper/container te gebruiken waarin je je tekst en het menu inzet. Dáárachter/onder plaats je dan je footer en die komt dan niet direct meer onder je menu. Dat is precies wat je ook terug kan zien in het voorbeeld:
  
  code:
  

      <section>
          <aside>
              <nav>
              </nav>
          </aside>
          <article>
          </article>
      </section>
      <footer>
      </footer>

  
  Bij het weglaten van <section> komt <footer> direct terecht onder <aside> en verschijnt het in je browser dus ook naast de tekst onder het menu.
• Het lijkt er op dat je de volgende rule in je CSS hebt gedefinieerd
  Cascading Stylesheet:
  

  text-align: center;

  Heb je dit misschien gedaan om je website te centereren? Zo ja: je kunt een site ook met margins centreren of je moet alle normale teksten weer apart anders instellen met:
  Cascading Stylesheet:
  

  text-align: left;

  Text-align gebruiken voor centreren is volgens mij enkel echt nodig voor bijvoorbeeld IE6..
• Een p-element is ook maar een container. Het verschil is dat deze van de browser al bepaalde rules krijgt toegewezen waaronder bijvoorbeeld padding-top en padding-bottom, in mijn voorbeeld kan je zien in de CSS dat de tekst in een element staat waarvan de padding is ingesteld.
• Het is HTML5, dus je versie van Internet Explorer moet dit wel ondersteunen. Als je nog met bijvoorbeeld versie 8 werkt zijn hier ook wel oplossingen voor (met behulp van bijvoorbeeld modernizr ziet het er wel goed beter uit: http://jsfiddle.net/Lk6Vw/2/)

[ Voor 15% gewijzigd door C0rnelis op 21-04-2012 14:45 . Reden: code tag html->html5 omdat de tags niet worden herkend ]

[Marcoevich]

@ AcidBurn: Thx, dat is ook weer opgelost

@ C0rnelis: Je voorbeeldje werkt nu idd veel beter. Zelfs in IE7

Ik had idd nog ergens een align="center" staan vanwege de tabel. Die heb ik nu weggehaald en nu werkt 't prima

Omdat de browser zelf een te grote margin-top aan de Paragraph geeft, heb ik hem een margin-top van -10 mee gegeven. Is dat een juiste manier om dat op te lossen of is er een 'nettere' manier?

Tenslotte, dat menu uit jouw voorbeeldje; Kunnen alle moderne browsers hier mee overweg? In dat geval zou ik hem graag gebruiken voor mijn webpagina, het werkt erg fijn namelijk

[C0rnelis]

riky404 schreef op zaterdag 21 april 2012 @ 15:19:
[..]

Omdat de browser zelf een te grote margin-top aan de Paragraph geeft, heb ik hem een margin-top van -10 mee gegeven. Is dat een juiste manier om dat op te lossen of is er een 'nettere' manier?

Tenslotte, dat menu uit jouw voorbeeldje; Kunnen alle moderne browsers hier mee overweg? In dat geval zou ik hem graag gebruiken voor mijn webpagina, het werkt erg fijn namelijk

Elke browser die html5 ondersteunt hoort dat menu goed weer te geven. Voor Internet Explorer zijn er omwegen zoals het gebruik van javascript zoals modernizr. Modernizr werkt als het goed is niet exclusive voor IE, het probeert gewoon te herkennen of de browser van je bezoeker html5 en/of CSS3 ondersteunt en springt bij indien nodig. Je zal echter zelf ook nog wel het e.e.a. moeten verhelpen om het overal precies hetzelfde er uit te laten zien zoals bijvoorbeeld de witruimte tussen de section en footer in IE8. Je kunt het beste zelf in verschillende browsers testen of het werkt of niet met eventueel cijfers van gebruikte browsers van je bezoekers (dan moet je bijvoorbeeld veel/weinig rekening houden met firefox 3.6/opera/safari/IE7 et cetera).

Normaal gesproken is het niet noodzakelijk om op elke p een negatieve margin te zetten. Je code met divs erin verwerkt verschilt waarschijnlijk inmiddels behoorlijk wat je eerst hebt gepost en het is daarom niet te bepalen of er een 'nettere' manier is .

[Marcoevich]

Zo, ben weer een middagje bezig geweest, en op dit moment komt het al aardig in de richting zoals ik 't wil hebben Eigenlijk heb ik vrijwel alle problemen die ik tegenkwam kunnen oplossen. Zie: http://piclair.com/data/y13et.jpg

Het enige probleem nu is de schaduw onderaan in de hoeken. Ik heb die footer daar gemaakt met een apart font en afgeronde hoeken. Als ik de main div afgeronde hoeken geef kan ik die lijn die hem nu scheid van de footer niet door laten lopen...

In FF en chrome werkt het nu prima maar in IE is het echt crap om het zo maar te zeggen. Ik zal eens kijken in hoeverre die Modernizr plugin me kan helpen om dat op te lossen

[C0rnelis]

't Is mij niet echt duidelijk wat je niet lukt.. Wil je een border-radius met een border-color op de footer die aansluit op de border-left en border-right van het middendeel?

1. Je stelt simpelweg border-bottom: none in voor de main div en border-top: none voor de footer
2. Je hebt een container/wrapper element nodig waarin je ten minste de 'main div' en de footer inzet. Dit element geef je dan vervolgens de afgeronde hoeken links- en rechtsonder. Zie ook http://jsfiddle.net/vwJ9D/2/ ter illustratie.

Ik weet niet hoe het met Modernizr zit in combinatie met border-radius en oude versies van browsers die dit niet ondersteunen. Bij mij in IE8 heb ik in ieder geval geen ronde hoeken, maar dat kan best liggen aan een niet volledige configuratie van Modernizr.

[ Voor 64% gewijzigd door C0rnelis op 22-04-2012 01:12 ]

[Barryvdh]

Modernizr voegt geen ondersteuning voor CSS3 toe aan oude browsers. Alleen voor html5 gebruikt het de html5shim, maar verder is het in principe alleen feature-detectie voor html5/css3. Je kan wel een oplossing als http://css3pie.com/ gebruiken, maar dat is waarschijnlijk niet ideaal qua performance.

Wat ik volgens mij nog niet voorbij heb zien komen, is het gebruik van een grid, dat kan je ook veel tijd/problemen besparen. Bijvoorbeeld 960gs of Twitter Bootstrap. Dus dan geef je niet aan 100px of 700px, maar span2 en span8 bijvoorbeeld. Past het altijd zonder veel moeite.

[Marcoevich]

Barryvdh, dat zijn een aantal hele handige linkjes Duizend maal dank! die zal ik nog vaak kunnen gebruiken

Ik zal nog even zoeken, maar ik denk dat we css3pie.com gaan gebruiken om de problemen in IE te tackelen, zo op het eerste gezicht lost dat bestandje alles op wat er in IE op dit moment fout gaat

Thx!

[Verwijderd]

Gewoon wat tables in tables en GIFjes voor de hoeken

[ Voor 28% gewijzigd door Verwijderd op 25-04-2012 00:08 ]