WN - Länka "body" bakgrunden

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Länka "body" bakgrunden (https://www.wn.se/forum/showthread.php?t=31455)

Mattias

2008-08-27 15:34

Hjälp en medmänniska att hitta lösningen på "bg-link".
Försöker få följande kod(se nedan) att länka sig korrekt över hela sajten.
Dock låter inte koden bli all content som ligger ovanpå (skall ej länkas).

Idag är problemet att den utan z-index:-1 länkar allt och allting på sajten.
Vare sig man har koden längst ner eller överst på sajten.
Lägger man till z-index:-1 slutar länken att fungera.
Lägger man till position:relative i "content-div:en" fungerar det _nästan_ utmärkt i FF.

Har försökt med det ena som andra (även googlat) utan vettiga resultat.
Jag finner helt enkelt inte den kompletta lösningen. Hjälp är ni snälla!

Kod:

<div id="header1"><a target="_blank" href="#"><span>Valfritt ord</span></a></div>

Kod:

#header1 {

position:absolute;

z-index: -1;

left: 0px;

top: 0px;

}

#header1 a {

height: 1200px; 

width: 97%;

display: block;

}

#header1 a span { 

visibility: hidden; 

}

mforsberg

2008-08-28 09:48

Jag skulle välja att fixa så att du kan sätta height:en till 100% istället för att specificera en viss height i pixlar.
Gjorde två exempel, första är ett exempel på 100% height med css och den andra är även den 100% height med en en länk i div:en #foo som ligger bakom #content div:en, vid hover så byter den bakgrund från mörkgrå till svart..

Vad jag gjorde är att div:en #foo har z-index:1, sedan har #content z-index:2. #foo ligger absolut positionerad medans #content har relativ positionering vilket tillsammans med ett högre z-index lägger den över #foo.

Hojta om jag missförstått vad du söker, men jag tror att jag löste det.

Exempel:
http://magnusforsberg.com/demos/full-height.html
http://magnusforsberg.com/demos/full-height-link.html

Mattias

2008-08-28 14:21

Mycket fint av dig Magnus att hitta en lösning. Testade också denna lösning igår.
Tyvärr är detta dock en lösning som inte fungerade så bra ihop med en centrerad sajt.

Löste problemet med så simpla saker som att använda mig av en temporär table.

mforsberg

2008-08-28 14:29

Citat:

Originally posted by Mattias@Aug 28 2008, 14:21
Tyvärr är detta dock en lösning som inte fungerade så bra ihop med en centrerad sajt.

Det skall väl inte vara något problem om du har en centrerad sajt?
Som jag beskrev så kan du ju positionera en content-div över länken och fortfarande ha den centrerad som på det andra exemplet.

Men bra att du hittade en lösning hur som! :)

Mattias

2008-08-28 18:06

Citat:

Originally posted by mforsberg@Aug 28 2008, 14:29

Det skall väl inte vara något problem om du har en centrerad sajt?

Jag som råkade missa att se andra länken. Då var ju frågan löst till nästa länkning.
Läste att z-index enbart fungera med position aboslute och dumt nog testade jag aldrig relative själv.

Tackar så mycket!

P.S. Anledningen till 1200px height var mest pga att länken skulle vara så pass hög och inte 100%

Alla tider är GMT +2. Klockan är nu 14:52.