[CSS] Ruimte tussen tekst

[ImmortalSoul]

Hallo,
Ik ben bezig een website fatsoenlijk om te zetten naar CSS. Ik loop alleen nu vast bij de tekst.

Dit is de oude website:
http://www.ojcderoos.nl/?page=frontpage

Hier werd in de hele website de volgende regel gebruikt om opmaak voor tekst te realiseren:

code:

<td><strong><p> <font face='tahoma' size='2' color='#2a261f' ><b>       $Type   </b></font> </strong></td>
</tr><tr>
<td>    <font face='tahoma' size='2' color='#2a261f' >      $Beschrijving   <p> </font>  </td>

Dit is de nieuwe website:
http://www.ojcderoos.nl/new/?page=content/nieuws

Dit is de css code:

code:

h1 {
    font-family:"Tahoma";
    font-size: 12px;
    color: #2a261f; 
    font-weight:bold;
}

h1.white {
    font-family:"Tahoma";
    font-size: 12px;
    color: #FFFFFF; 
    font-weight:bold;
}

A.menu:link, A.menu:visited, A.menu:active  {
    font-family: Georgia;
    font-size: 13px;
    color: #2a261f;
    text-decoration: none;
    left: 10px;
}

A.menu:hover  {
    font-family: Georgia;
    font-size: 13px;
    color: #FF0000;
    text-decoration: none;
    left: 10px;
}


.body { 
    background-color: #262626; 
    background-image:url('images/background.jpg');
    font-family:"Tahoma";
    font-size: 12px;
    color: #2a261f; 
}

En dit is de code in website zelf:

code:

print ("<tr><td><h1>        $Type           </h1></td></tr>");
print ("<tr><td>        $Beschrijving       </td></tr>");

Hieronder zie je het geselecteerd:


Die ruimte ertussen is niet echt wenselijk. Op de website van W3schools (http://www.w3schools.com/css/css_text.asp) kan ik het niet vinden, line-height is het ook niet.

Kan iemand mij vertellen wat ik mis, of is mijn css aanpak voor tekst helemaal verkeerd?

[fikst]

Als ik goed begrepen heb wat je bedoeld met de ruimte ertussen:

Je table heeft een cellspacing van 4.

[ Voor 1% gewijzigd door fikst op 28-07-2010 14:18 . Reden: typo ]

[ImmortalSoul]

fikst schreef op woensdag 28 juli 2010 @ 14:17:
Als ik goed begrepen heb wat je bedoeld met de ruimte ertussen:

Je table heeft een cellspacing van 4.

Nee, dat is de cellspacing van de table.

Ik bedoel dat de cell waar de datum en titel in staan (diegene met <h1>) groter worden dan de tekst.

Je ziet dat de datum en titel nog ongeveer 4/5 pixels extra ruimte hebben als ze geselecteerd worden. De tekst daaronder heeft dat niet.

[ Voor 16% gewijzigd door ImmortalSoul op 28-07-2010 14:23 ]

[fikst]

h1 krijgt in de meeste browsers standaard een marging en/of padding

Als je dit niet wenst moet je dat resetten met css

h1
{
margin: 0;
padding: 0;
}

[ Voor 12% gewijzigd door fikst op 28-07-2010 14:29 ]

[Orion84]

Dat zal dan wel wat te maken hebben met de standaard instellingen voor paddings en margins voor h1 elementen

[ImmortalSoul]

Orion84 schreef op woensdag 28 juli 2010 @ 14:24:
Dat zal dan wel wat te maken hebben met de standaard instellingen voor paddings en margins voor h1 elementen

fikst schreef op woensdag 28 juli 2010 @ 14:24:
h1 krijgt in de meeste browsers standaard een marging of/of padding

Als je dit niet wenst moet je dat resetten met css

h1
{
margin: 0;
padding: 0;
}

Super, dat is het inderdaad. Wat voel ik me dom.
Ik had eerst de padding al op 0px gezet, maar dat deed niks. Margin doet het wel.

Hartstikke bedankt!

[fikst]

Gouden tip: gebruik Firefox met Firebug of webdeveloper

[NMe]

Zal ik hem maar inkoppen dan? Gebruik geen tabellen voor layout (of eigenlijk: gebruik geen tabellen voor niet-tabulaire data) en als dingen als positionering en margins belangrijk zijn, definieer ze dan altijd voor alle elementen die je gebruikt.

[jbdeiman]

Nog een (naar mijn mening) inkoppertje:
Er zijn verschillende CSS bestanden op internet te vinden (meestal reset.css oid) die voor alle Elementen de standaard padding/ margin e.d. resetten.
Elke browser heeft net weer zijn eigen standaard marges/ paddings ingebakken, waardoor elementen in de ene browser net wat anders lijken te reageren dan in de andere browser.
Door alle margins/ paddings e.d. op 0 te zetten, by default kan je dit soort verschillen tegengaan, doordat je wordt gedwongen zelf de juiste margins en paddings op te geven voor jou doeleinden.

Dit scheelt je waarschijnlijk ook een heleboel "cross browser debuggen".

@Hierboven:
Je hebt gelijk dat je dan altijd de margins/paddings moet definiëren, wanneer positionering belangrijk is, maar er zijn veel meer zaken belangrijk voor positionering. Daarom gebruik ik (zoals hierboven genoemd) een resetter voor de marges/ paddings/ line-height en dergelijke. Ik moet dit soort zaken dan opgeven/ zelf bepalen, waardoor dit soort zaken als waar de ts last van heeft niet / nauwelijks meer voorkomt.

[Bosmonster]

jbdeiman schreef op woensdag 28 juli 2010 @ 14:42:
Nog een (naar mijn mening) inkoppertje:
Er zijn verschillende CSS bestanden op internet te vinden (meestal reset.css oid) die voor alle Elementen de standaard padding/ margin e.d. resetten.

Mooi inkoppertje idd om niet te gebruiken. Reset.css heb je nooit nodig en leveren meer problemen op dan voordelen.

Anders mag je bijvoorbeeld voor ieder veld waar een wysiwyg-editor aan gekoppeld is alle elementen (ook ul's, ol's, etc) opnieuw opmaken

[Reinier]

En wat anders: wat nu als je je nieuwe design over een jaartje wilt aanpassen en je wilt je kopjes roze hebben? krijgt h1.white dan color: pink? Beetje maf.

Hint: gebruik klassenamen die iets over het gebruik van de elementen zeggen, en niet over de kleur. Los daarvan vind ik dat je kopjes geen h1's moeten zijn, maar dat terzijde

[Bosmonster]

Reinier schreef op woensdag 28 juli 2010 @ 14:59:
Los daarvan vind ik dat je kopjes geen h1's moeten zijn, maar dat terzijde

Dat niet eens terzijde imho. Dat is gewoon fout. Gebruik idd maximaal 1 h1 per pagina gewoonlijk. Dit soort herhalende koppen horen gewoon h2+ te zijn. De h1 hier hoort een titel/beschrijving van je pagina te zijn, zelfde als wat je in je title zou gebruiken en bij voorkeur ook je url.

[ Voor 17% gewijzigd door Bosmonster op 28-07-2010 15:24 ]

[ImmortalSoul]

Bedankt voor de tips allen! Dat is zeer hulpzaam!

Binnen Firefox gebruik ik een HTML en CSS validator. Ik zal firebug eens proberen.

Ik gebruik voor de layout divjes. Die layout heb ik al klaar, ik was nu bezig met de tekst opmaak en de bijbehorende pagina's om te zetten.
Is dit een goede pagina om wel tables te gebruiken?:
http://www.ojcderoos.nl/new/?page=content/medewerker

Bedoel je dat je in feite altijd alle elementen van het CSS Box model moet opgeven? Ik zal dat eens aanpassen.

Slim idee, ik zal ze aanpassen!

Ik zal H2/H3 gebruiken voor de kopjes, waarmee kan ik de standaard tekst eigenlijk aanpassen? Ik pas die nu aan in de Body {}

Nogmaals bedankt allemaal! Hier leer ik veel van.

[Gwaihir]

ImmortalSoul schreef op woensdag 28 juli 2010 @ 15:40:

Is dit een goede pagina om wel tables te gebruiken?:
http://www.ojcderoos.nl/new/?page=content/medewerker

Nee

Zoiets? http://www.alistapart.com/articles/holygrail

[Bosmonster]

Denk dat hij de inhoud bedoelde, wat inderdaad tabulaire data was toen ik vanmiddag nog keek. Nu is de pagina alleen leeg

[BtM909]

Om toch nog maar wat toe te voegen... Firebug is ook in dit geval toch een van de makkelijkste tools om te bepalen waar die rare margin / padding vandaan komt