Bruke bilde som header, hvordan blir det med <h1>?

[Scooby snacks]

Hei

 

 

Hvis jeg bruker et bilde som header, hvordan blir det da med <h1>-tagene? Blir jo litt feil å ikke ha H1? Er det stuerent å sette en <h1>-tag rundt <img> og bruke alt?

 

På forhånd takk.

[Alex Moran]

Skriv h1 som vanlig og sleng på en bakgrunn og text-indent: -9999em; med CSS.

[Azidops]

Hvis jeg bruker et bilde som header, hvordan blir det da med <h1>-tagene? Blir jo litt feil å ikke ha H1? Er det stuerent å sette en <h1>-tag rundt <img> og bruke alt?

<h1> er ment for tekst og ikke bilde. Som header er ikke <img> det beste alternativet. Da er det bedre å sette ønsket bilde som bakgrunn i en <div>. Fordelen med dette er at da kan du ha tekst eller andre elementer oppå bildet.

 

Virker på meg som om du mener at <h1> er den første tagen som må brukes. I så tilfelle er det feil.

 

Forslag til kode. Her havner overskrift og bilde under headeren:

<div id="header"></div>
<div id="innhold">
<h1>Velkommen til siden min</h1>
<img src="apekatt.jpg" alt="Dette er bildet av apekatten min" />
</div>

 

Forslag 2. Her havner overskriften i headeren og bilde under headeren:

<div id="header">
<h1>Velkommen til siden min</h1>
</div>
<div id="innhold">
<img src="apekatt.jpg" alt="Dette er bildet av apekatten min" />
</div>

 

Skriv h1 som vanlig og sleng på en bakgrunn og text-indent: -9999em; med CSS.

Nei nei nei. Dette er dårlig praksis. Ikke bilde i <h1>.

Endret 23. november 2009 av Azidops

[Alex Moran]

Depends, er det snakk om et bilde som sier det samme som teksten med et bedre visuelt uttrykk enn hva browserne kan tilby folket (sære fonter som ikke er allemannseie, f.eks.) er det en vel så god løsning som noe annet.

[Azidops]

Depends, er det snakk om et bilde som sier det samme som teksten med et bedre visuelt uttrykk enn hva browserne kan tilby folket (sære fonter som ikke er allemannseie, f.eks.) er det en vel så god løsning som noe annet.

Jeg kjøper den, men oppfattet det ikke slik at det var det OP spurte om.

[Scooby snacks]

Jeg har en logo, og en litt spesiell font. Derfor tenkte jeg å erstatte plain tekst med et bilde (et bilde av tekst).

 

Så måten å gjøre det på vil bli å sette bildet som bakgrunn, og sette H1-størrelsen til -9999em, og skrive h1 med vanlig tekst. Er ikke dette lite populære hos f.eks. Google, siden man har skjult tekst?

[Azidops]

Da forstår jeg hva du mener.

 

Er litt usikker, men tror ikke skriftsstørrelsen har noe å si for Googles poengalgoritme. Så du kan fint gjøre skriften pitteliten og plassere en <img> rett ved siden av <h1> ved litt triksing i css. Evt. sette fontbildet som bakgrunn i <h1> og skrive teksten oppå der.

 

Er skeptisk til bruk av <img> inni <h1>. Mulig du får feilmelding i valideringen.

 

NB: Jeg ble litt fintet av at du brukte ordet header i startinnlegget. Header er ikke det samme som heading (h1-h6). En header er altså noe som sitter øverst på nettsiden mens heading = tittel

[Matsemann]

<h1>overskrift</h1>

 

h1 { /* heading */
width:300px;
height:75px;
background-image:url(bilder/heading.png);
text-indent: -9999px;
}

Ha samme teksten på bildet og inni h1.

 

Burde være en god løsning?

Endret 25. november 2009 av Matsemann

[BeFs]

Kan ikke se hvorfor han ikke kan definere bilde i h1-tag.

 

Prøv deg frem med disse instillingene. Inkluderer ie-hack

 

h1 {

display: block;

overflow: hidden;

padding: 175px 0 0 0;

height: 0 !important;

height /**/ : 175px;

width: 500px;

background: url("http://domene.no/header.jpg") no-repeat;

margin: 0 auto;

border: 2px solid #000000;

}

 

Nå kan du sette inn bildet med

<h1>Denne teksten brukes til nettsider som ikke støtter bilde, f.eks. lynx</h1>.

 

 

Edit: Oi, jeg ser at jeg ikke har oppdatert tråden på en stund!

Endret 25. november 2009 av BeFs

[Gjest Slettet-IHWlGMJn]

Jeg har alltid vært litt skeptisk til bruk av -9999px. Synes den er litt "hackete".

 

Personlig så bruker jeg

<h1><img src="header.jpg" alt="Header" /></h1>

Tror aldri jeg har sett noen andre bruke det, men det er jo fantastisk enkelt, validerer og fungerer helt fint i f.eks lynx, som har blitt nevt her ...

Endret 3. desember 2009 av Slettet-IHWlGMJn

[Matsemann]

Ulempen er at h1-taggen da ikke inneholder noen form for tekst.

[BeFs]

Hva mener du Matsemann?

[Azidops]

Søkemotorer bruker blant annet <hx>taggen til å indeksere siden. Man bør bruke disse taggene til viktige stikkord for siden slik at man får bedre resultat på søkesider

[Gjest Slettet-IHWlGMJn]

Ulempen er at h1-taggen da ikke inneholder noen form for tekst.

Leses ikke alt-parameteren av bildet i h1-en av roboter?

 

Jeg ville tippet at roboter leser siden mye på samme måte som lynx, og lynx skriver ut alt-parameteren til img i h1 ... men her er jeg usikker

Endret 4. desember 2009 av Slettet-IHWlGMJn

[Azidops]

Nå holder f.eks google kortene tett til brystet, men etter det jeg har lest vektlegges ikke alt-teksten like høyt som det som står i taggen.

[BeFs]

Jeg har alltid vært litt skeptisk til bruk av -9999px. Synes den er litt "hackete".

 

Personlig så bruker jeg

<h1><img src="header.jpg" alt="Header" /></h1>

Tror aldri jeg har sett noen andre bruke det, men det er jo fantastisk enkelt, validerer og fungerer helt fint i f.eks lynx, som har blitt nevt her ...

Men uansett, forsvinner ikke litt meningen med <h1> hvis man bruker <img>-tagen inni? Da kan man vel kutte ut hele <h1> og bruke bare <img>? Og heller bruke en <div> rundt?

[Scooby snacks]

Det er i hovedsak pga. SEO at jeg ønsker å bruke H1, da mesteparten av trafikken min kommer fra Google, men jeg synes det ser bedre ut med tekst som bilde. Jeg vil tro at robotene til Google leser siden som ren tekst, og at derfor img og alt="overskrift" gjør nytten – men vil gjerne være sikker.

 

Takk for gode svar.

[Jonas]

- Benytter seg av H1-tag.

- Ingen IMG-tag inni H1 for de som mener det er en uting.

- Inneholder relevant tekst.

- Ingen teite -9999px-hacks.

 

http://files.coreticket.net/logo.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<style type="text/css">
		h1 {
			width: 276px;
			height: 110px;
			background: url('http://www.google.no/intl/no_no/images/logo.gif');
		}
			h1 span {
				display: none;
			}
	</style>

</head>

<body>

	<h1><span>Google</span></h1>
	<p>Phasellus ultricies libero et est ultricies lobortis placerat sem pellentesque. Duis vel sapien quis tellus iaculis iaculis. Sed et aliquet risus. Nulla ac urna quis orci ornare interdum non non enim. Etiam fermentum dolor vitae sem semper eu semper justo gravida. Nullam vehicula imperdiet risus, vestibulum fringilla sapien laoreet fringilla. Sed et interdum erat. Sed vehicula fermentum interdum. Maecenas facilisis, odio et pharetra interdum, ante massa vulputate ante, quis tincidunt tellus elit at enim. Vestibulum pellentesque sodales placerat.</p>

</body>

</html>

[Gjest]

Her er det mye rare svar..

 

Skal du gjøre det korrekt, gjør du slik:

1)Legg denne i css`en:

 

#Header

{

width: 276px;

height: 110px;

background: url('logo.gif');

}

 

2) Så oppretter du divisjonen "Header" i bodyen på html dokumentet, slik:

 

<div id="Header">

</div>

 

Da har du den korrekte og enkleste koden. Hvorfor bruke en h1 tag

når du skal bruke et bilde? Det er som å bruke gaffel til suppe,

de er begge ment for 2 forskjellige formål.

 

For å midtstille hele siden burde du opprette en "Wrapper" som du midtstiller, slik:

I css dokumentet:

 

#Wrapper

{

width: 900px;

margin: 0 auto;

}

 

Så oppretter du divisjonen "Wrapper" i bodyen i html koden, slik:

ALLE andre divisjoner og tagger skal ligge inne i denne. Viktig!!

 

<div id="Wrapper">

<div id="Header"

</div>

 

<div id="Venstremeny"

</div>

 

<div id="Hovedinnhold"

</div>

</div>

 

Håper dette gir en grei forklaring på hvordan dette skal fikses

 

Mvh

Antonmannen

[BeFs]

Antonmannen, hvordan vil diven bli seende ut hvis man bruker en nettleser som ikke støtter bilder? Evt. hvordan vil søketjenester forstå hva som står i headeren?