Keskustelu: Nettisivujen teko: Kaksi diviä päällekäin

Tarkoitus olisi saada kuvan päälle laitettua iso div, jossa lukee "loading" kunnes uusi kuva on ladattu loppuun. Ongelmana on, että en saa kahta diviä päälekäin.

<div id="wrap">
    <img src="..." />
    <div id="loading">loading</div>
</div>

css on muotoa:

#wrap {
    position: relative;
    width: 100px;
    height: 100px;
}
#loading {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

Jos parent-div on määritelty relativeksi, niin eikös tuon absolute-määrittelyn ja top:0px/left:0px:n kanssa pitäisi tuon loading-divin mennä suoraan tuon wrapin päälle? Doctype on xhtml 1.0 transitional.

EDIT: IE8 näyttää boksit niinkuin pitää, mutta FF, Opera ja Safari näyttää sen väärin (eli heittää boksin koko sivuston vasempaan yläreunaan, kun loading-divin pitäisi mennä tuon wrap-divin päälle)

EDIT2: Näyttäisi johtuvan wrap-divissä olevasta display:table-cell-määrittelystä (jonka siis jätin kirjoittamatta tänne, mutta oikeassa koodissa se on). Mitenköhän saisin toimimaan järkevästi tuon päällekäin olemisen sekä vertikaalisen keskityksen?

http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/ Ja tuosta se eka.

Näin sen ainakin saa:

#wrap {
    position: relative;
	z-index:1;
    width: 100px;
    height: 100px;
	top: 0px;
    left: 0px;
	background-color:#654321;
}
#loading {
    position: relative;
	z-index:2;
    width: 80px;
    height: 80px;
	top: -100px;
    left: 0px;
	background-color:#123456;
}

OILgame kirjoitti:

Näin sen ainakin saa:

#wrap {
    position: relative;
	z-index:1;
    width: 100px;
    height: 100px;
	top: 0px;
    left: 0px;
	background-color:#654321;
}
#loading {
    position: relative;
	z-index:2;
    width: 80px;
    height: 80px;
	top: -100px;
    left: 0px;
	background-color:#123456;
}

Jos position on relative, niin se venyttää tuota wrap-diviä. Mutta sain jo ratkaistua tälläisellä rakenteella:

<style>
	#wrap {
		position: absolute;
	}
	#kuvadiv {
		width: 100px;
		height: 100px;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
	#loading {
		position: absolute;
		width: 100px;
		height: 100px;
	}
</style>
<div id="wrap">
	<div id="kuvadiv">
		<img ... />
	</div>
	<div id="loading">loading</div>
</div>

Tuon display: table-cell -määrittelyn kanssa ei saa tuota absolutea toimimaan divin sisässä, joten sen takia tuo ylimääräinen wrap-div.

Mitenkäs olisi jos heittäisit tämmöiset tyylit:

<div id="wrap" class="loading">
    <img ... />
</div>

#wrap.loading {
    background: url('loading.png') no-repeat 50% 50%;
}

#wrap.loading img {
    visibility: hidden;
}

document.getElementById('wrap').className = '';

tai vastaava sitten poistaisi lataamisstatuksen, oletan että käytät JavaScriptiä. jQueryllä classien poistaminen tai lisääminen yksittäin on suht helppoa.

@Merri, muuten voisinkin tuota käyttää, mutta haluan sen edellisen kuvan päälle 75%-opacityllä tuon "loading"-tekstin.

Mutta minulla on myös toinen ongelma, joten laitetaan nyt tähän samaan topicciin.

Tavoite olisi saada divejä hyväksikäyttäen seuraava layout:

+------+  +------+
| kuva |  | kuva |
|      |  |      |
+------+  +------+
linkki    linkki
linkki    linkki

Eli piätisi saada kuvia vierekkäin ja jokaisen kuvan alle kaksi linkkiä. Näidenkin kuvien päälle pitäisi saada tuo 75% opacityllä oleva loading-div. Ongelma on nyt siinä, että ainut millä saan nuo divit menemään vierekkäin, on laittamalla display -määrittely table-celliksi. Mutta tuon table-cellin kanssa taas ei toimi nuo päällekkäiset divit. Jos taas teen tuon kikan minkä tein aikasemminkin (eli lisään sinne yhden divin lisää), niin silloin kuvat menevät taas allekain.

Olen nyt toista tuntia yrittänyt kaikenmaailman css-kikkailuja, mutta tuloksetta. Nyt kun yritän päästä tuosta tabletaitosta eroon ja en osaa itse tätä diveillä tehdä, niin kai se on nöyrryttävä ja kysyttävä apua...

Tämä on aika karkea esimerkki, mutta:
http://kontu.selfip.info/html.css.js/punppis/kuvalista.html

Toinen vaihtoehto on, että on kaksi kuvaa, jotka vaihtelevat keskenään tärkeysjärjestyksessä paikkaansa (esim. zIndex-vaihtelu) ja molemmat ovat absoluuttisesti sijoiteltuja. Pelkkä absoluuttinen sijoittaminen (ilman leftiä ja topia) riittää kunhan p:lle määrittää yläpaddingia 100 pikseliä, jotteivät linkit mene kuvien päälle. Erillisten kuvien etu on siinä, että niiden animointi/feidaus on helpompaa, mikäli tarvetta on.