html opmaak probleem
25 mei 2007 - 01:24   
geplaatst door: Emerik
Is volgende tekst eenvoudig in html te doen (zoals bv het makkelijk is
een lijst op te maken) of moet je dat echt helemaal in css uitwerken
met twee verchillende tekstkaders?


tekstblabla: weet ik veel
                weet ik veel
                weet ik veel

Helpt u de wereld al redden?
html opmaak probleem
25 mei 2007 - 08:52    reactie #1
geplaatst door: mvdg
Ik vind dit nogal lijken op een tabel. En in html is het echt geen doodzonde om een tabel te gebruiken, als het tenminste om echte tabel informatie gaat! Wat niet handig is, is om tabellen te gebruiken voor opmaak van de complete site, plaatjes etc.

Ik zou hier dus gewoon doen


<table><tr><td class='kop'>tekstblabla:</td><td class='inhoud'>weet ik veel....</td></tr></table>

De margens etc. kun je dan netjes met css instellen.
Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl
html opmaak probleem
25 mei 2007 - 11:22    reactie #2
geplaatst door: aaiBoek
of met <pre></pre>

Daartussen krijg je een lettertype met vaste breedte, dus ook je spaties. Ziet er niet echt fraai uit maar is wel erg handig.

Macfreako ergo sum
html opmaak probleem
25 mei 2007 - 11:59    reactie #3
geplaatst door: Emerik
Thanks voor de info, de oplossing van mvdg werkt prima
Helpt u de wereld al redden?
html opmaak probleem
3 juni 2007 - 03:51    reactie #4
geplaatst door: Kaydie
Lijkt meer op een definition list...

<dl>
<dt style="float:left;">tekstblabla:</dt>
<dd>weet ik veel<dd>
<dd>weet ik veel<dd>
<dd>weet ik veel<dd>
<dd>weet ik veel<dd>
</dl>

"…It sure is great to get out of that bag!" -- mac, 1984
--
kaydies
html opmaak probleem
3 juni 2007 - 12:27    reactie #5
geplaatst door: Emerik
Dat krijg ik niet zo goed Kaydie, het ziet er dan zo uit:

tekstblabla: weet ik veel
   weet ik veel
   weet ik veel
   weet ik veel

De oplossing van mvdg werkte wel maar we zijn altijd nieuwsgierig om
dingen bij te leren natuurlijk.

Helpt u de wereld al redden?
html opmaak probleem
4 juni 2007 - 19:38    reactie #6
geplaatst door: Kaydie
Logisch, het definition data (dd) element, krijgt de standaard margin/padding waarden van de browser mee... Wat je dus moet doen is de dt een vaste relatieve (em) breedte meegeven die gelijk is aan margin-left + padding-left van het dd element. Op die manier krijg je alles op z'n plek, en schaalt de breedte van de margin/padding-left van dd en de breedte van het dt element netjes mee bij het verschalen van de tekst.

Voorbeeldje:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>fine-tunen van een definition-list</title>

<style type="text/css">

dd, dt{
margin:0;
padding:0;
}

dt{
float:left;
width:5em;
background:lime;
}


dd{
margin-left:5em;
background:red;
}
</style>

<dl>
<dt>tekstblabla:</dt>
<dd>weet ik veel</dd>
<dd>weet ik veel</dd>
<dd>weet ik veel</dd>
<dd>weet ik veel</dd>
</dl>

(Bewerkt door Kaydie om 19:43, 4-06-2007)

"…It sure is great to get out of that bag!" -- mac, 1984
--
kaydies
html opmaak probleem
4 juni 2007 - 22:45    reactie #7
geplaatst door: Emerik
Bedankt voor de extra uitleg! Geeft inderdaad wel een nettere
code dan een tabel die voor de helft leeg is.
Helpt u de wereld al redden?