[CSS] Heading verziekt layout...

[The Milkman]

Dag,

ik heb een probleempje. Als ik een h1 of h2 element plaats in mijn layout wordt hij overhoop gehaalt. (Witte rand bovenaan)
Als ik line-height verander helpt het niet.

Wie kan een tip geven?
Ik heb ook al de content in een nieuwe box gezet. Geen oplossing...

http://kakel.bertlog.com/?p=activiteiten

Wat gaat er fout? En hoe kan ik dit verhelpen? Ik denk zelf dat de H headings bepaalde eigenschappen bevatten die de layout niet leuk vinden...

[Noork]

Al geprobeerd met css?

code:

h1 {
margin: 0px;
padding: 0px;
}

[The Milkman]

Ok, de margin lost het op.
Maar heeft nu elk element een margin en padding?
Want ook als ik een <p> gebruik doet hij dat al.

Maargoed, nu moet ik dit nu bij elk element toepassen?

[Noork]

Je kan het op deze manier oplossen. Maar je kan ook gewoon je layout repareren. Want dit is gewoon niet goed. Waar de fout zit moet je zelf maar een beetje uitzoeken.

[Dekaasboer]

Je kan ook aan je elementen een class geven welke slechts zegt dat er geen padding/margin op mag zitten.

code:

.nopad
{
margin: 0px;
padding: 0px;
}

Daarna bij coderen:

code:

<p class="nopad"> Blablabla
<h1 class="nopad">blablabla

Het is natuurlijk flexiberer om het even bij alle de verschillende elementen aan te geven.

Wat je misschien ook nog even kan proberen:

code:

BODY
{
margin: 0px;
padding: 0px;
}

[The Milkman]

Dekaasboer schreef op dinsdag 27 mei 2008 @ 11:36:
Je kan ook aan je elementen een class geven welke slechts zegt dat er geen padding/margin op mag zitten.

Dat zou ook kunnen, maar is het ook mogelijk om gewoon een division te maken waarin alles blijft? Ik snap niet waarom die header (h2) steeds naar buiten treedt...

[Dekaasboer]

Ik snap niet waarom je je <br> elementen als <br /> schrijft? Ze lichten ook vuurrood op in de firefox code analyzer.

[Noork]

Dekaasboer schreef op dinsdag 27 mei 2008 @ 11:40:
Ik snap niet waarom je je <br> elementen als <br /> schrijft? Ze lichten ook vuurrood op in de firefox code analyzer.

Als het XHTML is, is dat dit juiste wijze.

[Dekaasboer]

Ah, op die fiets? Al die leuke nieuwe regeltjes Ik codeer nog gewoon html (denk 4 ofzo) in kladblok

[edit]
Zoiezo moet je nog even je img tags sluiten en alt texten geven (regel 54 en 55)

Ok. Ik open nu ook even je website in ie7, waar hij er totaal anders uit ziet. En zo te zien heb je wat IE specific hacks in je stylesheet zitten. Misschien een ideetje om browser specific css aan te maken?

[ Voor 64% gewijzigd door Dekaasboer op 27-05-2008 12:03 ]

[Verwijderd]

IMG-tags zijn in xhtml zelf-sluitend

[Reinier]

Dekaasboer schreef op dinsdag 27 mei 2008 @ 11:36:
Je kan ook aan je elementen een class geven welke slechts zegt dat er geen padding/margin op mag zitten.

code:

.nopad
{
margin: 0px;
padding: 0px;
}

Dat is dus semantisch onjuist Zet NOOIT een layoutkenmerk in de naam van je klasse. Anders zou je, als je je layout eens wilt wijzigen, zulke dingen krijgen:

code:

.red
{
color: green ;
}

[Dekaasboer]

Verwijderd schreef op dinsdag 27 mei 2008 @ 12:01:
IMG-tags zijn in xhtml zelf-sluitend

Maar dan moet hij nog wel zijn element
<img src="images/button_infoaanm.jpg" \> schrijven toch? In plaats van:
<img src="images/button_infoaanm.jpg">

(k ben nu gelijk ff xhtml wc3 aan het doorspitten )

@ Reinier, je hebt helemaal gelijk.

Misschien even een ideetje om je site door de validator te halen, dat lever nog 27 fouten op. Incluis die img tags Maar ook niet correct gesloten divs, en dubbel benoemde classes in je tabellen.

[ Voor 23% gewijzigd door Dekaasboer op 27-05-2008 12:19 ]

[The Milkman]

Dekaasboer schreef op dinsdag 27 mei 2008 @ 12:15:


Misschien even een ideetje om je site door de validator te halen, dat lever nog 27 fouten op. Incluis die img tags Maar ook niet correct gesloten divs, en dubbel benoemde classes in je tabellen.

Ik zag het net ook ja, dus classes zijn voor meerdere divs, en ID's zijn eigelijk voor éénmalige elementen.

[Daan]

Dekaasboer schreef op dinsdag 27 mei 2008 @ 12:15:
[...]


Maar dan moet hij nog wel zijn element
<img src="images/button_infoaanm.jpg" \> schrijven toch? In plaats van:
<img src="images/button_infoaanm.jpg">

Maar dan wel met de slash andersom (dus <... /> i.p.v. <...\>).

The Milkman schreef op dinsdag 27 mei 2008 @ 12:25:
[...]


Ik zag het net ook ja, dus classes zijn voor meerdere divs, en ID's zijn eigelijk voor éénmalige elementen.

ID's mag je maar 1x gebruiken op een pagina, classes zoveel als je wilt.

[joggie]

@TS Ik weet het linkje zo 1,2,3 niet maar je moet eens zoeken naar "global reset" in CSS zoeken. Dit zijn een aantal regels in je CSS die als eindresultaat hebben dat je opmaak aan het eind iets "makkelijker" geschikt is voor meerdere browsers

*edit
je MOET natuurlijk niks, tis een tip

[ Voor 9% gewijzigd door joggie op 27-05-2008 22:58 ]

[TeeDee]

Je doelt waarschijnlijk op de reset releoaded van Eric Meyer

Dekaasboer schreef op dinsdag 27 mei 2008 @ 11:46:
[edit]
Zoiezo moet je nog even je img tags sluiten en alt texten geven (regel 54 en 55)

Moet? Een alt="" aan een (nietszeggend design) element geven alleen om de boel te laten valideren is nog vreemder.

[moozzuzz]

TeeDee schreef op woensdag 28 mei 2008 @ 07:27:
Een alt="" aan een (nietszeggend design) element geven alleen om de boel te laten valideren is nog vreemder.

Het is een knop, dus misschien wel verdedigbaar om er alt of een title aan te hangen.

@TS: design is wel te breed voor 1024px-mensen zoals ik :^)

[TeeDee]

moozzuzz schreef op woensdag 28 mei 2008 @ 11:40:
[...]
Het is een knop, dus misschien wel verdedigbaar om er alt of een title aan te hangen.

2e: als het een knop is, moet je je afvragen waarom het geen button is

[Borizz]

Wat je hier tegekomt/tegenkwam is gedefinieerd als collapsing margins in de CSS Specifificaties van het box model. Dit is dus standard compliant gedrag.