anoniem Geplaatst: 24 januari 2002 Delen Geplaatst: 24 januari 2002 Hi, ben bezig om een homepage aan te passen. Gemaakt in pure html, maar wil nu CSS gebruiken. Pagina's bevatten foto's met onderschrift. In HTML door een tabel te maken met bv 2x2 cellen. De eerste rij bevat de foto's (met het td-attribuut valing=bottom) en de tweede rij het onderschrift (met td-attribuut valign=top). Resultaat is dat de onderkant van de foto's altijd op dezelfde hoogte is (onafhankelijk van de hoogte van de foto) en dat het onderschrift altijd 'strak' tegen de foto ligt (onafhankelijk van het aantal regels). De vraag is hoe ik hetzelfde bereik met CSS? Heb zitten zoeken in de CSS standaard en handleidingen, maar kan het zo niet vinden. Moet ik spelen met marges, padding en dergelijke (en zoja, die van table, td, de tekst of img) of is er nog steeds een align attribuut in CSS voor tabellen? WimS Quote Link naar reactie
anoniem Geplaatst: 24 januari 2002 Auteur Delen Geplaatst: 24 januari 2002 Je zou vertical-align: top; kunnen toepassen. Maar vertical-align is lastig in gebuik het werkt alleen voor inline elements waargeen line-break(<br />) aan voorafgaat of door een line-break wordt gevolgt. Verder moet je in de gaten houden dat de alignment plaats vindt of ten opzicht van het parent element of ten opzichte van het elements eigen base-line. /E Quote Link naar reactie
anoniem Geplaatst: 24 januari 2002 Auteur Delen Geplaatst: 24 januari 2002 Ik denk dat je hierbij moet werken met classes. In de CSS file maak je bijvoorbeeld een klasse aan, bijv. (let op de punt voor foto en fototxt) .foto { color : #DD0000; valign : bottom; } .fototxt { color : #DD0033; valign : top; } In het HTML bestand, geef je aan de tag <td> dan een class mee: <td class="foto"> of <td class="fototxt"> (hier zonder de punt) Ook het volgende zou in de css file moeten werken: td { color : #DD0000; } td.foto { valign : bottom; } td.fototxt { valign : top; } [ Dit Bericht is bewerkt door: WillyF op 2002-01-24 15:45 ] Quote Link naar reactie
anoniem Geplaatst: 24 januari 2002 Auteur Delen Geplaatst: 24 januari 2002 Bedankt alvast, ik was op zoek naar dat 'valign'. Kon het nergens vinden. Ga het vanavond uitproberen. Quote Link naar reactie
anoniem Geplaatst: 24 januari 2002 Auteur Delen Geplaatst: 24 januari 2002 Valign bestaat niet in css. Eelco Quote Link naar reactie
anoniem Geplaatst: 24 januari 2002 Auteur Delen Geplaatst: 24 januari 2002 vertical-align: wel :smile: Quote Link naar reactie
anoniem Geplaatst: 24 januari 2002 Auteur Delen Geplaatst: 24 januari 2002 O.K. dit zou moeten werken in zowel ie5+ als in mozzila(ns6+) /E <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Foto's</title> </head> <body> <style type="text/css"> img.foto { vertical-align : -100%; /* ie specifiek */ border: 1px solid black; } html>body img.foto { /* kleine truck om ie te bedotten en mozilla de juiste waarde voor vertical-align mee te geven */ vertical-align : bottom; border: 1px solid black; } div.foto_container { line-height: 100px; text-align: center; margin-bottom : 10px; } div.tekst_container { text-align: center; } span.tekst { font: menu; } div.foto_plus_tekst { float: left; margin-left: 20px; } </style> <div class="foto_plus_tekst"> <div class="foto_container"> <img src="foto.gif" height="80" width="80" class="foto" alt="foto 1"> </div> <div class="tekst_container"> <span class="tekst">tekst 1</span> </div> </div> <div class="foto_plus_tekst"> <div class="foto_container"> <img src="foto.gif" height="60" width="80" class="foto" alt="foto 2"> </div> <div class="tekst_container"> <span class="tekst">tekst 2</span> </div> </div> </body> </html> Quote Link naar reactie
anoniem Geplaatst: 25 januari 2002 Auteur Delen Geplaatst: 25 januari 2002 waarom het met CSS willen oplossen als je al een (werkende) HTML-tabel variant hebt? Quote Link naar reactie
anoniem Geplaatst: 25 januari 2002 Auteur Delen Geplaatst: 25 januari 2002 [quote:7a15a25017] Op 25-01-2002 8:33, schreef matthijn99: waarom het met CSS willen oplossen als je al een (werkende) HTML-tabel variant hebt? [/quote:7a15a25017]De bestaande homepage gaat geintegreerd worden in een nieuwe website. Dit houdt onder andere in dat het kleurenschema van de bestaande pagina's moet worden aangepast. Om te voorkomen dat ik in de toekomst weer 20 pagina's moet aanpassen wordt het nu dus CSS. En als ik dan toch bezig ben, kan ik net zo goed proberen zoveel mogelijk daarin te doen; maakt het ook makkelijker om een homogene site te maken. Quote Link naar reactie
anoniem Geplaatst: 25 januari 2002 Auteur Delen Geplaatst: 25 januari 2002 [quote:ad0528e490] Op 25-01-2002 8:33, schreef matthijn99: waarom het met CSS willen oplossen als je al een (werkende) HTML-tabel variant hebt? [/quote:ad0528e490] Ik denk dat het erg belangrijk is om standaard compliant code(ja, ik ben standaard fundamentalist) te gebruiken. Dus html(en bij voorkeur xhtml) alleen gebruiken voor de document structuur en css voor alle layout. Dit is de enige manier om te garanderen dat het web niet versnippert in in browser specifieke eilandjes. /E Quote Link naar reactie
anoniem Geplaatst: 25 januari 2002 Auteur Delen Geplaatst: 25 januari 2002 [quote:da5afb76f6] Op 25-01-2002 13:03, schreef Eelco Osseweijer: [b:da5afb76f6]Ik denk dat het erg belangrijk is om standaard compliant code(ja, ik ben standaard fundamentalist) te gebruiken. Dus html(en bij voorkeur xhtml) alleen gebruiken voor de document structuur en css voor alle layout. Dit is de enige manier om te garanderen dat het web niet versnippert in in browser specifieke eilandjes.[/b:da5afb76f6][/quote:da5afb76f6] En zo hoor ik het graag! :smile: - Basje. _________________ [i:da5afb76f6]When all else fails, read the manual.[/i:da5afb76f6] [ Dit Bericht is bewerkt door: BasHamar op 2002-01-25 13:33 ] Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen