image centreren in css

[Neviathien]

Hallo,

ik heb een probleem. Het gaat om de site www.brouwerenvanhoef.nl
In de groene cda/d66 header wil ik het logo gecentreerd hebben. Nu ben ik er al uren mee bezig en het lukt me niet.
Weten jullie wat ik fout doe? Onder dit bericht plaats ik de code van de header waarin het logo moet verschijnen en de CSS code.
De website draait op Wordpress 2.7.1.

Ik hoop dat jullie me kunnen helpen!

Groetjes,
Sanne

*knip*

[ Voor 88% gewijzigd door NMe op 19-01-2010 16:35 ]

[NMe]

Helaas is het hier niet de bedoeling dat je even je code dumpt en verwacht dat wij het voor je fixen. Als je code post, neem dan alleen het relevante stukje, in dit geval het stuk HTML dat ermee te maken heeft en eventueel het omliggende element, en de CSS die het element stylet. Zomaar alles posten heeft geen zin, zeker niet als je daar geen code tags voor gebruikt.

Daarnaast: heeft zoeken geen resultaten opgeleverd? Deze vraag komt nogal eens voorbij. Wat voldoet er niet aan je verwachtingen of wat werkt er niet als je deze resultaten gebruikt? Zie ook De Quickstart.

[mcDavid]

1) Hoezo is dat plaatje een inline image en geen background-afbeelding?
2) je gaat me niet vertellen dat je dit niet zelf kunt vinden als je googlet op "image align horizontal" ofzo

[Verwijderd]

Ik zie dat dat plaatje logo.gif in een div staat die H6 heet

<div id="h6"><img src="images/logo.gif" height="146" width="301"></div>

dit staat er in de stylesheet:

h6 {
display: block;
margin-left: auto;
margin-right: auto;
}

hier moet je even aan toe voegen: text-align: center;

als het goed is moet dat werken

[NMe]

rodneyraab: nee hoor. Ik hoop niet dat ik het verschil tussen <div id="h6"> en <h6> uit moet leggen?

[Neviathien]

Dank je

Ik heb het opgelost met

h6 {
width:301
height:146
margin-left: auto;
margin-right: auto;
}

Degene die me heeft geholpen wist me te vertellen dat auto left en right niet werken als de brouwser geen width en height leest. En zo dus niet het midden kan bepalen. O.i.d.

Bedankt voor jullie hulp

[NiteSpeed]

<div id="h6"><img src="images/logo.gif" height="146" width="301"></div>

The fuck? Daar gaat iets goed mis.

[R4gnax]

Neviathien schreef op donderdag 21 januari 2010 @ 17:54:
Dank je

Ik heb het opgelost met

h6 {
width:301
height:146
margin-left: auto;
margin-right: auto;
}

Degene die me heeft geholpen wist me te vertellen dat auto left en right niet werken als de brouwser geen width en height leest. En zo dus niet het midden kan bepalen. O.i.d.

Bedankt voor jullie hulp

Technisch gezien heb je alleen een width nodig. Daarnaast is het image zelf een inline (replaced) element wat gewoon reageert op text-align: center op de parent container.

Dat het niet werkt om dat aan je huidige CSS rule toe te voegen verbaast me niets: sla er maar eens een basis tutorial CSS selectors op na, dan zul je zo zien waarom.

Daarnaast mag je ook wel eens een basis cursus HTML nemen want daar klopt, heel eerlijk, maar weinig van. Leuk dat je pagina een "This page validates as XHTML" tekstje voert, terwijl de W3C validator waar je nota bene op die manier zelf naar linkt maar liefst 160 errors terug geeft.

Een kleine greep:

• Fout gebruik van center tags in de document head sectie. (WTF! Nee echt: W-T-F?! Ten eerste hoort die tag daar gewoon weg absoluut niet en ten tweede is deze al sinds HTML4 deprecated.)
• Onafgesloten tags. In XHTML dient elke tag zichzelf af te sluiten. <br /> dus, en niet <br>
• Fout geneste elementen. Verkeerd om afgesloten misschien? Of gewoon niet afgesloten en de browser / validator maar laten gokken?
• URI componenten in href attributen die niet ge-escaped zijn zoals het hoort. Je mag geen & direct in een tag attribuut zetten, dat moet de HTML entity & zijn.
• Tag attributen die niet netjes tussen aanhalingstekens staan.
• etc.

Zit nog veel werk in om dat allemaal recht te zetten.

[Verwijderd]

Neviathien schreef op donderdag 21 januari 2010 @ 17:54:
Dank je

Ik heb het opgelost met

h6 {
width:301
height:146
margin-left: auto;
margin-right: auto;
}

Degene die me heeft geholpen wist me te vertellen dat auto left en right niet werken als de brouwser geen width en height leest. En zo dus niet het midden kan bepalen. O.i.d.

Bedankt voor jullie hulp

Houd het simpel, geef de div een ander id (laten we zeggen 'header'). Plaats dan in de css:

#header {
width:301
height:146
margin-left: auto;
margin-right: auto;
}

Inclusief het hekje! Zo heb je valid html en valid css. Beter voor de SEO beter en beter voor de usability!

[MueR]

Verwijderd schreef op donderdag 28 januari 2010 @ 09:17:

Cascading Stylesheet:

#header {
width:301
height:146
margin-left: auto;
margin-right: auto;
}

Inclusief het hekje! Zo heb je valid html en valid css. Beter voor de SEO beter en beter voor de usability!

Really? Als je dan over valide CSS begint, doe het dan ook goed...

Cascading Stylesheet:

#header {
width:301px;
height:146px;
margin-left: auto;
margin-right: auto;
}

Overigens mag je me wel even uitleggen waarom een div met id header beter of simpeler zou zijn dan een h6. Een h6 is namelijk semantisch bedoeld voor, nu komt het, headers! Daarbij is een h6 ook te hergebruiken, waar een element met een ID dat niet is.

[mcDavid]

MueR schreef op donderdag 28 januari 2010 @ 10:29:
[...]

Overigens mag je me wel even uitleggen waarom een div met id header beter of simpeler zou zijn dan een h6. Een h6 is namelijk semantisch bedoeld voor, nu komt het, headers! Daarbij is een h6 ook te hergebruiken, waar een element met een ID dat niet is.

Doe het dan gelijk goed, en maak er een h1 element van (aangezien de header van de website wel als de meest belangrijke beschouwd kan worden), en stop er gelijk een semantische tekst in, of op zijn minst een plaatje met alt-attribuut.

Maar zo te zien heeft de topicstarter allang zoiets van "het werkt dus ik vind het wel best".

[Neviathien]

Hehe, klopt. Ik ben geen HTML expert en zal ook nooit beweren dat ik dat ben.
H6 heet H6 vanwege het feit dat H1 t/m H5 al in gebruik zijn en ik simpelweg weet wat H6 exact inhoud.

Ik geloof gelijk dat er veel te veel errors te vinden zijn. Maar het werkt! Dus ik ben blij.

Wederom bedankt voor alle suggesties

[NMe]

h1 t/m h6 zijn niet bedoeld om je headers uniek te benoemen/nummeren hoor. Je mag ze allemaal zo vaak gebruiken als je wil en ze zijn puur bedoeld om niveaus in de tekst aan te geven, al vind ik persoonlijk dat daar een bijzonder brakke manier voor verzonnen is door de mensen die de standaard verzonnen hebben; hadden ze beter een block level element kunnen maken voor de paragraaf waarin je een of meerdere headers kan opnemen die vervolgens nestbaar zijn. Maar goed, dat is wel heel offtopic.

Anyway, h1's worden over het algemeen als meer belangrijk benoemd door zoekmachines dus als je daar heel belangrijke tekst hebt staan zoals de titel van de site, dan kun je die maar beter in een h1 zetten.

[Cresso]

Als we het dan hebben over correcte opmaak, zorg dan meteen dat je afbeelding(en) ook correct zijn opgemaakt.

Verander dit

code:

<img src="images/logo.gif" height="146" width="301">

Naar dit:

code:

<img src="/images/logo.gif" height="146" width="301" alt="" />

Aangezien je een xhtml doctype (1e regel in je broncode) gebruikt, voeg de alt parameter (omschrijving voor het plaatje) toe, desnoods leeg als het moet. Zorg ook dat je bij deze ook een '/' toevoegt aan het begin van je src parameter. Zo valt je logo niet weg in een subdir of door SEO van de urls. Als laatste moeten alle 'single' tags afgesloten worden met een '/>'.

[mcDavid]

Cresso schreef op woensdag 03 februari 2010 @ 14:15:
Als we het dan hebben over correcte opmaak, zorg dan meteen dat je afbeelding(en) ook correct zijn opgemaakt.

Verander dit

code:

<img src="images/logo.gif" height="146" width="301">

Naar dit:

code:

<img src="/images/logo.gif" height="146" width="301" alt="" />

Aangezien je een xhtml doctype (1e regel in je broncode) gebruikt, voeg de alt parameter (omschrijving voor het plaatje) toe, desnoods leeg als het moet. Zorg ook dat je bij deze ook een '/' toevoegt aan het begin van je src parameter. Zo valt je logo niet weg in een subdir of door SEO van de urls. Als laatste moeten alle 'single' tags afgesloten worden met een '/>'.

Je kunt nog beter géén alt-attribute gebruiken dan een leeg alt-attribute. Zonder alt-attribute krijg je dan tenminste nog een broken-image plaatje als de afbeelding niet werkt.
Beste is natuurlijk een alt-attribuut met een duidelijke omschrijving.

[Cresso]

mcDavid schreef op woensdag 03 februari 2010 @ 14:19:
[...]


Je kunt nog beter géén alt-attribute gebruiken dan een leeg alt-attribute. Zonder alt-attribute krijg je dan tenminste nog een broken-image plaatje als de afbeelding niet werkt.
Beste is natuurlijk een alt-attribuut met een duidelijke omschrijving.

Dat ligt aan welke browser je gebruikt dat heeft niets met de alt tag te maken.

Om het wat meer constructiever te maken.
Wat mij betreft is dit logo een verkapte titel als plaatje en kan je het beste dit doen:

Cascading Stylesheet:

#header h1 {
    background: ('/images/logo.gif') center center no-repeat;
    display: block;
    height: 146px;
    margin: 0 auto;
    width: 301px;
}

#header h1 span { display: none; }

HTML:

<div id="h6"><img width="301" height="146" src="images/logo.gif"></div>

Vervangen door:

HTML:

<h1><span>Brouwer en Van Hoef</span></h1>

#h6 in je stylesheet kan je dan weghalen.

[ Voor 1% gewijzigd door Cresso op 03-02-2010 15:15 . Reden: background path typo ]

[MueR]

mcDavid schreef op woensdag 03 februari 2010 @ 14:19:
Je kunt nog beter géén alt-attribute gebruiken dan een leeg alt-attribute.

Alt heeft semantische waarde, die moet je in principe altijd gebruiken. Bijvoorbeeld Webrichtlijnen stelt dit ook als harde eis wil je hun keuring doorkomen.

[MsG]

Cresso schreef op woensdag 03 februari 2010 @ 14:15:
Als we het dan hebben over correcte opmaak, zorg dan meteen dat je afbeelding(en) ook correct zijn opgemaakt.

Verander dit

code:

<img src="images/logo.gif" height="146" width="301">

Naar dit:

code:

<img src="/images/logo.gif" height="146" width="301" alt="" />

Aangezien je een xhtml doctype (1e regel in je broncode) gebruikt, voeg de alt parameter (omschrijving voor het plaatje) toe, desnoods leeg als het moet. Zorg ook dat je bij deze ook een '/' toevoegt aan het begin van je src parameter. Zo valt je logo niet weg in een subdir of door SEO van de urls. Als laatste moeten alle 'single' tags afgesloten worden met een '/>'.

Kan je dat eens uitleggen van die / er voor? Ik snap niet helemaal wat je bedoeld en ben wel benieuwd. Ik heb het dan ook op behoorlijk veel plekken fout staan.

[MueR]

Die leading slash geeft aan dat de browser het bestand moet zoeken vanaf de document root, in plaats van een relatief pad.

Stel ik zit op http://gathering.tweakers.net/forum/ en daar zet ik een image pad neer van images/foo/bar.png. De volledige URL waarop de browser gaat zoeken is dan http://gathering.tweakers.net/forum/images/foo/bar.png. Maak ik er echter /images/foo/bar.png van, wordt het http://gathering.tweakers.net/images/foo/bar.png.

[Cresso]

Zie post boven.

[ Voor 94% gewijzigd door Cresso op 03-02-2010 15:26 . Reden: dubbelpost ]

[mcDavid]

Cresso schreef op woensdag 03 februari 2010 @ 14:57:
[...]


Dat ligt aan welke browser je gebruikt dat heeft niets met de alt tag te maken.

Volgens mij is het in principe zo:
- broken image zonder alt-attribuut -> broken-image afbeelding
- broken image met alt-attribuut -> alt waarde weergeven
en sommige browsers doen bij een leeg alt-attribuut toch een broken-image afbeelding...

MueR schreef op woensdag 03 februari 2010 @ 15:15:
[...]

Alt heeft semantische waarde, die moet je in principe altijd gebruiken. Bijvoorbeeld Webrichtlijnen stelt dit ook als harde eis wil je hun keuring doorkomen.

Klopt, maar zonder inhoud is die waarde 0 en heeft de tag dus geen toegevoegde waarde. Ja behalve dan dat de W3 validator een mooi groen kleurtje krijgt. In 99% van de gevallen waarbij je een leeg alt-attribuut zou willen gebruiken, moet je eigenlijk helemaal geen inline-image gebruiken.

[MueR]

mcDavid schreef op woensdag 03 februari 2010 @ 15:40:
Klopt, maar zonder inhoud is die waarde 0 en heeft de tag dus geen toegevoegde waarde.

Dat is het idee van het leeg laten van de alt tag: aangeven dat er geen waarde is.

[Cresso]

mcDavid schreef op woensdag 03 februari 2010 @ 15:40:
[...]

Volgens mij is het in principe zo:
- broken image zonder alt-attribuut -> broken-image afbeelding
- broken image met alt-attribuut -> alt waarde weergeven
en sommige browsers doen bij een leeg alt-attribuut toch een broken-image afbeelding...

Het heeft meer met de width/height parameters te maken. Internet explorer zal deze altijd hanteren en laat dan ook een placeholder zien als het plaatje niet gevonden wordt. Firefox daarentegen negeert de afmetingen en laat geen placeholder zien, tenzij er iets tussen de "" staat dan wordt die geloof ik weergegeven. Overigens zijn de width/height parameters niet verplicht.

Persoonlijk vind ik dat firefox het beste doet (niets laten zien of op minimaale afmetingen voor de alt info). Bij een document met tekst en plaatjes waarvan de plaatjes niet meer werken, dan zie ik het liefst de tekst bij elkaar in plaats van dat het verspreid over de pagina. De plaatjes kunnen al niets meer toevoegen, dan heb je tenminste nog de tekst bij elkaar. Dit komt alleen maar de leesbaarheid ten goede. Het scheelt je ook papier als je moet printen

Wat betreft plaatjes waarvoor geen alt attribuut voor ingevuld kan worden (lees: layout elementen) sla je de spijker op z'n kop. Zulke zaken moet je als designer/developer gewoon vastleggen in een stylesheet.

[R4gnax]

Cresso schreef op woensdag 03 februari 2010 @ 14:57:

Wat mij betreft is dit logo een verkapte titel als plaatje en kan je het beste dit doen:

Cascading Stylesheet:

#header h1 {
    background: ('/images/logo.gif') center center no-repeat;
    display: block;
    height: 146px;
    margin: 0 auto;
    width: 301px;
}

#header h1 span { display: none; }

Lijkt me niet slim. Als ik me goed herinner downranken search engines je op keywords die uit een <h1> element, of child element van een <h1> element komen wat op die manier onzichtbaar gemaakt is.

Beter is om overflow: hidden met een negatieve text-indent te gebruiken.