afbeeldingen in website, kiezen tussen background of normale

[Verwijderd]

Ik ben nu bezig met een site waarin ik diverse afbeeldingen nodig heb t.b.d. de lay-out. Zie http://home.quicknet.nl/q...en/NF-site/no-future.html

Ik zit al een tijdje met de vraag wannneer ik een afbeelding als background moet gebruiken en wanneer als div? Hebben deze twee mogeljkheden voordelen t.o.v. elkaar?
Een logo kan net zo goed ingesteld wordne als background als gewone image. Zijn hier "regels" voor? Ik heb al wat gezocht op google maar daar vind ik geen informatie. Ik doel hier op de afbeeldingen die bedoeld zijn om de pagina op te maken dus geen fotos.

[chem]

Ik gebruik een afbeelding als het onderdeel is van de content. Anders is het decoratie en/of een fraaiere vorm van een stuk tekst, en gebruik ik een background image.

[Verwijderd]

Alles wat opmaak is, verfraaiing dus en geen onderdeel van de content (zoals chem aangeeft) hoort in de css, dus als achtergrond plaatje of als generated content (als dat zou werken).

[Rowanov]

Een oplossing die je wel eens tegenkomt bij vooral header secties van websites is iets als het volgende:

HTML:

<h1><span class="hidden-title">Algemene titel van de pagina</span></h1>

Cascading Stylesheet:

h1 {
  width: 648px;
  height: 60px;
  background-image: url(blaat.gif);
}
.hidden-title{
  display: none;
}

[ Voor 36% gewijzigd door Rowanov op 09-04-2006 13:40 ]

[Michali]

Als een afbeelding echt tot de content behoort, dan moet je er een img van maken, en anders in de background plaatsen (precies zoals chem zegt dus ).

Wat betreft het logo heb je meerdere opties. Ik zet hem altijd in de background, maar dan stijl ik het op de volgende manier:

HTML:

<h1 id="logo" title="Logo tekst"><span>Logo tekst</span></h1>
<style type="text/css">
h1#logo
{
  background: url(pic/logo.jpg) no-repeat;
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
}

h1#logo span
{
  display: none;
}
</style>

Ipv. de tekst komt er nu dan een afbeelding te staan. Als iemand de stylesheets uitschakelt of in een textbrowser werkt, dan krijgt hij gewoon een nette titel te zien.Wat je ook kunt doen, als je een speciaal logo hebt dat in het design hoort, en eentje die opzichzelf staat, is dit:

HTML:

<h1 id="logo" title="Logo tekst">[img]"pic/logo_normaal.jpg"[/img]</h1>
<style type="text/css">
h1#logo
{
  background: url(pic/logo_design.jpg) no-repeat;
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
}

h1#logo img
{
  display: none;
}
</style>

Ipv. van een titel krijgen die personen dan nu een afbeelding te zien, maar een andere dan degenen die puur in het design is verwerkt.

[ Voor 9% gewijzigd door Michali op 09-04-2006 13:41 ]

[Verwijderd]

overigens hoort een logo m.i. helemaal niet in een h1, maar da's weer redelijk offtopic

[Michali]

Verwijderd schreef op zondag 09 april 2006 @ 13:56:
overigens hoort een logo m.i. helemaal niet in een h1, maar da's weer redelijk offtopic

Als je het beschouwt als een soort kop van de pagina, dan kan het wel. In het geval van dat je er een img in zet is het wel vreemd idd.

[Verwijderd]

Dat is een duidelijke uitleg!

De verschillende kopjes die je in mij site ontwerp ziet, vinden jullie daarvan ook dat het tot de site content behoort en dus gewoon images zijn?

oja en misschien een stomme vraag... wat bedoelen jullie in dit verband met h1 in die voorbeeld stylesheets...

[ Voor 25% gewijzigd door Verwijderd op 09-04-2006 14:03 ]

[Michali]

Dat is duidelijk verfraaing en zijn design elementen. Die zou ik op dezelfde manier als het logo aanpakken, maar dan in een h2 element. img zou ik alleen gebruiken bij een stukje tekst waar een afbeelding bij hoort, zoals een foto oid.

edit: Hoe bedoel je? Weet je niet wat een h1 element is?

[ Voor 12% gewijzigd door Michali op 09-04-2006 14:04 ]

[Verwijderd]

Dat is content, h1 zou ik er van maken (met die backgroundimage truc als hierboven) (logo dus geen h1, maar da's een kwestie van smaak denk ik)
overigens zijn die subtitels dan geen h2 he, dat zijn helemaal geen headers, noem dat <p class="chapeau"> oid

[ Voor 39% gewijzigd door Verwijderd op 09-04-2006 14:06 ]

[Verwijderd]

Michali schreef op zondag 09 april 2006 @ 14:03:
Dat is duidelijk verfraaing en zijn design elementen. Die zou ik op dezelfde manier als het logo aanpakken, maar dan in een h2 element. img zou ik alleen gebruiken bij een stukje tekst waar een afbeelding bij hoort, zoals een foto oid.

edit: Hoe bedoel je? Weet je niet wat een h1 element is?

Ik ken h1 wel wanneer je het toepast op tekstdelen in html en ook in word. Wat heeft h1, h2 etc. voor functie bij het gebruik van afbeeldingen?

[Rowanov]

Je webpagina heeft een titel; het zoals dat bij tweakers.net waarschijnlijk "tweakers.net" is. Die zet je normaal gesproken in een h1, aangezien dat de titel is. Michali en ik gaven aan hoe je de inhoud van de h1 kan verbergen en er je eigen logo voor in de plaats kan zetten, zonder de leesbaarheid voor tekst browsers aan te passen.