Antworten zum Thema „zwei Divs übereinander legen“

[pdpdpd]

Hallo Forum.

Ich bin in Sachen webgestaltung noch neu und arbeite deshalb z. Z. mit Dreamweaver CS3. Ich habe wirklich Schwierigkeiten mit den Codes und verzweifle gerade an einer scheinbar einfachen Sache.

Ich habe ein 3 Spaltiges Layout. In der Mitte ist ein Container, der als Grafik das Blaue Viereck enthält. Obendrauf möchte ich jetzt meine Grafiken für die Hauptnavigation legen, sodass die Grafiken bündig mit dem Logo links sind.

Aber ich bekomme das nicht hin. Ich habe schon lang im Netz gesucht, mit z-index hat es nicht geklappt. Vielleicht ist es nur ein klitzekleiner Fehler.

Hier ein Screenshot:



Und hier der code (html und css):

<div id="mitte">
<div id="bildmitte"><img src="Bilder und Grafiken/Bilder/dark_naviblock_02.gif" alt="Naviblock" width="618" height="170" />
</div>
<div id="navi grafiken"><img src="Bilder und Grafiken/Bilder/Navi Foto Final small.jpg" alt="Modul Fotografie" /> <img src="Bilder und Grafiken/Bilder/Navi Radio Final small.jpg" alt="Modul Hörfunk" /> <img src="Bilder und Grafiken/Bilder/Navi Video Final small.jpg" alt="Modul Videotechnik" /></div>
</div>



#mitte {
float: left;
width: 618px;
position: relative;
z-index: 1;
}
#logo {
margin-top: 65px;
float: left;
width: 202px;
}
#navi grafiken {
float: left;
width: 618px;
position: absolute;

a:hover background-color: #178BFF;
z-index: 2;
clear: left;
}


Ich wäre euch sehr dankbar für Hilfe.

Ahoi

pd

 

[Pixelverwender]

AW: zwei Divs übereinander legen

Warum nimmst Du nicht Dein div "bildmitte" und weist ihm "dark_naviblock_02.gif" als Hintergundbild zu? Dann die Navigrafiken hineinsetzen und unten ausrichten.

Weitere Infos hierzu unter:

Du kannst aber auch Deinen Navi-div einfach innerhalb des bildmitte div unterbringen.

 

[Syrakos]

AW: zwei Divs übereinander legen

Du versuchst zwei Container übereinander zu legen was so nicht funktioniert.

Eine Möglichkeit wurde schon von Pixelverwender genannt, wobei ich an der Stelle nur einen Container verwenden würde (navi grafiken) und die blaue Grafik als Hintergrund in diesen Container. Wozu einen eigenen Container nur für den Hintergrund wenn da nichts anderes rein kommt.

Noch eine kleine Anmerkung am Rande, Bezeichnungen sollten nie mit einem Leerzeichen verwendet werden. Also zB für "navi grafiken" "navi_grafiken" verwenden. Bezeichner müssen immer aus einem Wort bestehen. Ebenso sollten die Namen der Grafiken ohne Leerzeichen sein, Pfade nach Möglichkeit ebenso. Die Page soll ja irdenwann mal ins Netz und da weisst Du nicht immer auf wechem Betriebssystem die Page dann läuft.

 

[pdpdpd]

AW: zwei Divs übereinander legen

Ich habe es jetzt erstmal so hingebogen, wie Pixelverwender es gepostet hat.




Kann ich jetzt auch jedem bild eine eigene css-regel verpassen? weil ich nur für das ganz linke 25px linken rand will, die anderen sollen 15px haben. Dw hat den Stil jedoch jetzt auf alle drei übertragen.

ich möchte euch jetzt wirklich nicht zu sehr belästigen, aber kann ich die Grafiken bei mouseover auch ersetzen?

 

[cyam]

AW: zwei Divs übereinander legen

ich würde dir raten, mal css Grundkenntnisse anzueignen - z.B. hier, oder hier da bei semantischer Website-Erstellung nichts über den Code führt, auch wenn Dreamweaver alles ein bisschen erleichtert ;-)


zu deiner Frage: Entweder du erstellst dir eigene Klassen und weißt sie dann den Bildern zu, z.B firstPic u. normalPic

das sieht dann so aus:

.firstPic{margin-left:25px}

.normalPic{margin-left:15px}

der html-code hierfür:

<img src="images/meinbild" class="firstPic" ....... />

oder du weißt den Bildern unteschiedliche Stile zu (findest du in der Eigenschaften Palette)!


Mouseover bzw. Rollover findest du unter "Einfügen"->"Grafikobjekte"->Rollover-Bild, dort kannst du die gewünschten Effekte einstellen!

 

[pdpdpd]

AW: zwei Divs übereinander legen

Danke erstmal für eure gute Hilfe, ich bin schon ein kleines Stück weiter gekommen!

Bis später, ich werde bestimmt noch auf einige Probleme stoßen...

pd

 

[sokie]

AW: zwei Divs übereinander legen

du musst den Bildern keine klassen zuweisen.
der umgebenden box gibst du ein padding-left von 25px, den img ein margin-right von 15px.
das padding der box musst du allerdings von ihrer Breite abziehen.