[CSS/HTML]Header=background, klik op header=frontpage

Pagina: 1
Acties:
  • 35 views sinds 30-01-2008

  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 17-04 10:24

sjaakaq

It might get loud

Topicstarter
Sorry, kon geen betere titel bedenken :S Anyway ik heb de volgende pagina op http://www.mijnogen.net/ :
Afbeeldingslocatie: http://img7.echo.cx/img7/7842/site8co.jpg
Nu wil ik dat men op de header kan klikken om naar de beginpagina te gaan. Echter, dit is nogal lastig omdat de header een background is die is gedefinieerd in de CSS.

Ik kan natuurlijk een absoluut gepositioneerde DIV over de header heenleggen en die vullen met een transparantie gif die klikbaar is, maar zoiets is nogal...ranzig.

Is er een correcte oplossing voor dit probleem?

leoaq.fm // Jeune Loop


  • Not Pingu
  • Registratie: November 2001
  • Laatst online: 01-04 20:36

Not Pingu

Dumbass ex machina

een <a href="beginpagina.html"></a> met de volgende stijl:

display: block;
width: 100%;
height: 200px;
background: #fff url(jeplaatje.jpg) no-repeat top left;

Certified smart block developer op de agile darkchain stack. PM voor info.


  • Zoefff
  • Registratie: September 2001
  • Laatst online: 06-05 23:07

Zoefff

❤ 

Waarom maak je die header niet gewoon een plaatje met een link?

Semantisch is dat ook nog correcter, want als je nu de pagina zonder CSS kijkt, zie je geen header, en weet je dus niet eens op welke pagina je bent :)


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


Verwijderd

Je kunt gewoon met javascript controleren of er geklikt wordt, en waar precies geklikt wordt. Het is alleen onverstandig dat je geen functioneel element gebruikt (bij voorkeur dus <a href="etc...). Zoals het eruit ziet kun je prima een linkje toevoegen en daar dat plaatje in te zetten, eventueel als achtergrond.

Verwijderd

code:
1
<h1><a href="index.html" title="Terug naar het begin">Header</a></h1>


code:
1
2
3
4
5
6
7
8
9
10
11
h1 {
  width: 300px;
  height: 200px;
  background: url(plaatje.gif) left top no-repeat;
  text-indent: -9999px;
}

h1 a {
  display: block;
  text-decoration: none;
}

Verwijderd

En dan voor de zekerheid bij het A element ook nog even 'height' en 'width' neerzetten voor de mensen in Redmond. (En uiteraard de mensen die hun software gebruiken.)

  • Pelle
  • Registratie: Januari 2001
  • Laatst online: 13:58

Pelle

🚴‍♂️

basic enzo :)
Pagina: 1

Dit topic is gesloten.