div übereinander

Status
Nicht offen für weitere Antworten.
L

lotte_ohm

Grünschnabel
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
 
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.
Code: 
#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:
HTML: 
<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
 
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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück