'Achtergrond'-divjes netjes linken...

**Studio71** · 25-07-2009, 15:37

Ik ben het even helemaal kwijt, dus vraag ik het maar even )

Ik laad dmv divjes, 3 achtergrond graphics op m'n pagina...

Dit was al zo en is verder ook goed, alleen wil ik die drie plaatjes nu ook 'linken', maw aanklikbaar maken..... ondanks dat ze als achtergrond geladen worden....

Hieronder de code, het gaat om de volgende 3 graphics; center.jpg, lucky.png en bookmark.png.

Hoe los ik dat netjes op? Bvd.

HTML

Code:

<div class="head_left"></div>
  <div class="head_center">
     <div class="head_center_logo"></div>
     <div class="head_center_lucky"></div>
     <div class="head_center_bookmark"></div>
  </div>
  <div class="head_right"></div>
  <div class="clr"></div>

CSS

Code:

div.head_left {
  background: transparent url(http://www.123.nl/left.jpg) no-repeat;
  float: left;
  height: 104px;
  width: 35px;
 }
 div.head_center {
  background: transparent url(http://www.123.nl/head_center.gif) repeat-x;
  float: left;
  height: 104px;
  width: 813px;
 }
  div.head_center_logo {
   background: transparent url(http://www.123.nl/center.jpg) no-repeat;
   float: left;
   height: 66px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 30px;
   text-align: center;
   width: 250px;
  }
  div.head_center_lucky {
   background: transparent url(http://www.123.nl/lucky.png) no-repeat;
   float: left;
   height: 32px;
   margin-left: 30px;
   margin-right: auto;
   margin-top: 45px;
   text-align: center;
   width: 249px;
  }
  div.head_center_bookmark {
   background: transparent url(http://www.123.nl/bookmark.png) no-repeat;
   float: right;
   height: 32px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 45px;
   text-align: center;
   width: 249px;
  }
 div.head_right {
  background: transparent url(http://www.123.nl/right.jpg) no-repeat;
  float: left;
  height: 104px;
  width: 35px;
 }

**Frederik Vdb** · 25-07-2009, 15:46

Als je iets wilt linken dan moet er effectief is in de div staan..
Een lege div kan je niet linken. Je zal dus de background functie uit de stylesheet moeten nemen, en dan gewoon de img tag gebruiken tussen de div..

<div class="head_center_logo">
<a href="#"><img src="logo.jpg" border="0" alt=""/></a>
</div>

**Studio71** · 25-07-2009, 16:08

Bedankt Frederik voor je snelle respons...

Het kwartje is gevallen, ik denk dat ik nog maar een sterke bak koffie neem, bedankt!

**A. IJbema** · 25-07-2009, 17:34

Je kan er ook gewoon even een spatie ( ) in zetten met een linkje erom.

**Frederik Vdb** · 25-07-2009, 17:59

Origineel gepost door Alexander IJbema

Je kan er ook gewoon even een spatie ( ) in zetten met een linkje erom.

Wordt dan de gehele afbeelding aanklikbaar?

**A. IJbema** · 25-07-2009, 20:26

Dan moet je er wel div.head_left a van maken bijvoorbeeld, gewoon even wat dingen uitproberen.

**Frederik Vdb** · 25-07-2009, 20:28

Ja idd, dan moet je appart gaan waarden meegeven voor de a-tag...

**Klaas L.** · 26-07-2009, 10:40

Je kan ook met javascript een click-event hangen aan die div ..

**rubenmarissen** · 26-07-2009, 11:57

Je kunt natuurlijk heel makkelijk: onclick="window.location='blabla.html'" doen.
Maar hier zijn divs duidelijk niet voor gemaakt.

Stick to the basics.
Doe gewoon een afbeelding (<img>) in een <a> tag.

**Studio71** · 26-07-2009, 12:10

Ik heb de oplossing van Frederik gebruikt. Dit lijkt me de meeste 'nette' en eenvoudige oplossing.

Ook omdat aan 1 van de graphics (bookmark.png) een bookmark -functie gekoppeld moest worden dmv javascript. Zoals Ruben hierboven ook al aangaf, "Stick to the basics" dat scheelt een hele hoop romslomp...

**marc h** · 26-07-2009, 12:27

Je moet gewoon bij de a tag de volgende css code meegeven display:inline; nu kun je de a tag een width en height mee geven.

**Studio71** · 26-07-2009, 16:34

Ohja, dit is het geworden;

HTML

Code:

  <div class="head_left"></div>
  <div class="head_center">
   <div class="head_center_logo"><a href="index.htm"><img src="http://www.123.nl/center.jpg" border="0" alt="" /></a></div>
   <div class="head_center_lucky"><a href="http://www.linkje.nl" target="_parent"><img src="http://www.123.nl/lucky.png" border="0" alt="" /></a></div>
   <div class="head_center_bookmark"><a style="cursor: pointer;float:right;_padding-right:4px;" href="javascript: CreateBookmarkLink('http://www.123.nl', '123 De Website!');" id="bookmark-us" title="Bookmark"><img src="http://www.123.nl" border="0" alt="Bookmark" /></a></div>
  </div>
  <div class="head_right"></div>
  <div class="clr"></div>

CSS

Code:

div.head_left {
  background: transparent url(http://www.123.nl/left.jpg) no-repeat;
  float: left;
  height: 104px;
  width: 35px;
 }
 div.head_center {
  background: transparent url(http://www.123.nl/head_center.gif) repeat-x;
  float: left;
  height: 104px;
  width: 813px;
 }
  div.head_center_logo {
   float: left;
   height: 66px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 30px;
   text-align: center;
   width: 250px;
  }
  div.head_center_lucky {
   float: left;
   height: 32px;
   margin-left: 30px;
   margin-right: auto;
   margin-top: 45px;
   text-align: center;
   width: 249px;
  }
  div.head_center_bookmark {
   float: right;
   height: 32px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 45px;
   text-align: center;
   width: 249px;
  }
 div.head_right {
  background: transparent url(http://www.123.nl/right.jpg) no-repeat;
  float: left;
  height: 104px;
  width: 35px;
 }

**Dennis van der Kolk** · 26-07-2009, 16:40

Origineel gepost door marc h

Je moet gewoon bij de a tag de volgende css code meegeven display:inline; nu kun je de a tag een width en height mee geven.

display: block; bedoel je ;)

je kunt hiermee inderdaad een breedte en hoogte meegeven voor de a tag, deze kun je ook de achtergrond meegeven die je voor de div gebruikt, hierdoor is volgens mij je probleem opgelost.

'Achtergrond'-divjes netjes linken...