# div übereinander



## lotte_ohm (3. November 2004)

Ich habe mir als header etwas Spezielles einfallen lassen.
Ein jpg(header) in niedriger Auflösung (schnelle Ladezeit).
Darüber zwei gif's in guter auflösung (Schrift + Logo)
Hat eigentlich gut geklappt.

<body>
<div id="wrapper">
<!-- Begin header -->
    <div id="header">
    <div id="logo">
    <div id="text">
	</div>
	</div></div>


#header	{
	width: 700px;
	height: 276px;
	padding: 0;
	border: 0;
	margin: 0;
	background: #ebebeb url(../images/bild.jpg) top left no-repeat;
	}

#logo	{
	margin: 0 ;
	padding: 0;
	border: 0;
	width: 297px;
	height: 276px;
	background: transparent url(../images/logo.gif) no-repeat;
	position: relative;
	}

#text 	{
	margin: 0 0 0 590px;
	padding: 0;
	border: 0;
	width: 68px;
	height: 114px;
	background: transparent url(../images/text.gif) no-repeat;
	position: relative;
	}

Soweit so gut.
Nun möchte ich einen rotator einbauen:
http://alistapart.com/articles/randomizer/ 

Nun ist mein Header als normales img >>

<body>
<div id="wrapper">
<!-- Begin header -->
    <div id="header"><img src="/path/to/images/
rotate.php></div>
eingebaut.
Wie bringe ich nun meine zwei anderen gif's oben drauf.

Erstes Beispiel zu sehen unter 
porkhead.org


----------



## Quaese (3. November 2004)

Hi,

wenn Du den Header mit der CSS-Eigenschaft *position: relative;* versiehst, kannst
Du die GIF-Divs absolut zum Header-Container positionieren. Mit Hilfe von *z-index* 
kannst Du die Bilder "oberhalb" des IMGs anordnen.

```
#header { width: 700px;
          height: 276px;
          padding: 0;
          border: 0;
          margin: 0;
          background: #ebebeb url(../images/bild.jpg) top left no-repeat;
          position: relative;}

#logo { position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        margin: 0 ;
        padding: 0;
        border: 0;
        width: 297px;
        height: 276px;
        background: transparent url(../images/bild.gif) no-repeat;}

#text { position: absolute;
        top: 0;
        left: 590px;
        z-index: 3;
        margin: 0;
        padding: 0;
        border: 0;
        width: 68px;
        height: 114px;
        background: transparent url(../images/text.gif) no-repeat;}
```
Der zugehörige HTML-Code könnte zum Beispiel so aussehen:

```
<div id="header">
    <img src="/path/to/images/
rotate.php" width="212" height="212" border="0" alt="">
    <div id="logo">
        <div id="text"></div>
    </div>
</div>
```
Ich hoffe, dass Du damit etwas anfangen kannst.

Ciao
Quaese


----------



## lotte_ohm (3. November 2004)

Danke für die Lösung,
doch jetzt habe ich ein anderes Problem und zwar die Navigation.
Ich kann nur noch den unteren Teil anklicken (weil Header als Bild die halbe Position einnimmt).

Muss ich jetzt die Navigation nach "oben" ziehen?

<div id="header">
    <img src="image_n/rotator.php" width="700" height="276" alt="">
    <div id="logo">
    <div id="text">
</div>
</div>
</div>
*<div id="navigat"><ul>
      <li id="n1"><a href="/card/">Cards</a></li>
      <li id="n2"><a href="/#/">Stagedive</a></li>
      <li id="n3"><a href="/#/">Expressions</a></li>
    </ul></div>* (nach oben?)

CSS:
#navigat ul	{
	margin: -54px 0 0 375px;
	padding: 0;
	border: 0;
	width: 310px;
	height: 91px;
	background: url(../images/nav.gif);
	position: relative;
	}

#navigat ul li	{
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}

#navigat a	{
	height: 88px;
	width: 109px;
	display: block;
	}	

#navigat ul li a	{
	text-indent: -9999px; 
	text-decoration: none;
	}

#navigat ul li#n1 {left: -20px; top: -10px; height: 30px;}
#navigat ul li#n2 {left:  90px; top:  -5px; height: 30px;}
#navigat ul li#n3 {left: 200px; top: -10px; height: 30px;}

#n1 a:hover {background: transparent url(../images/nav.gif)   20px -91px no-repeat;}
#n2 a:hover {background: transparent url(../images/nav.gif)  -90px -97px no-repeat;}
#n3 a:hover {background: transparent url(../images/nav.gif) -201px -91px no-repeat;}

siehe porkhead.org/tplus.php


----------



## lotte_ohm (4. November 2004)

Alles im Butter, Thanks


----------

