mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 01:49 Benutzername: Passwort: Auto-Login

Thema: Übereinander floaten von Div's vom 10.12.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Übereinander floaten von Div's
Seite: 1, 2  Weiter
Autor Nachricht
H-Milch
Threadersteller

Dabei seit: 09.06.2008
Ort: Pusemuckel
Alter: 37
Geschlecht: Weiblich
Verfasst Mi 10.12.2008 14:58
Titel

Übereinander floaten von Div's

Antworten mit Zitat Zum Seitenanfang

Soweit ich weiß ist es ja nicht möglich div's übereinander zu floaten, rein vom Sinn her eigentlich schon logisch, dass das nicht funzen kann. Aber wenn ich z.B. einen transparenten Layer über die anderen legen will (wie auf diesem Layout die Navigation) wie kann das dann gelöst werden?

greetz
  View user's profile Private Nachricht senden
Cream

Dabei seit: 07.03.2006
Ort: .at
Alter: 37
Geschlecht: Männlich
Verfasst Mi 10.12.2008 15:05
Titel

Antworten mit Zitat Zum Seitenanfang

stichwort: z-index
  View user's profile Private Nachricht senden
Anzeige
Anzeige
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Mi 10.12.2008 15:16
Titel

Antworten mit Zitat Zum Seitenanfang

z-index ist da nicht mal zwingend nötig. eine absolute postionierung reicht vollkommen aus.

edit: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position


Zuletzt bearbeitet von pixelpapst303 am Mi 10.12.2008 15:19, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
H-Milch
Threadersteller

Dabei seit: 09.06.2008
Ort: Pusemuckel
Alter: 37
Geschlecht: Weiblich
Verfasst Mi 10.12.2008 16:55
Titel

Antworten mit Zitat Zum Seitenanfang

pixelpapst303 hat geschrieben:
z-index ist da nicht mal zwingend nötig. eine absolute postionierung reicht vollkommen aus.

edit: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position


d.h. absolut positionierte Elemente ignorieren gefloatete und ich kann die Navi einfach an den Boden der Außenbox legen?
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 10.12.2008 16:57
Titel

Antworten mit Zitat Zum Seitenanfang

itsme86 hat geschrieben:
pixelpapst303 hat geschrieben:
z-index ist da nicht mal zwingend nötig. eine absolute postionierung reicht vollkommen aus.

edit: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position


d.h. absolut positionierte Elemente ignorieren gefloatete und ich kann die Navi einfach an den Boden der Außenbox legen?


Am besten probierst du es einfach mal aus *zwinker* Und wenn es nicht funktioniert kommst du mit Code Beispielen wieder Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
H-Milch
Threadersteller

Dabei seit: 09.06.2008
Ort: Pusemuckel
Alter: 37
Geschlecht: Weiblich
Verfasst Mi 10.12.2008 20:18
Titel

Antworten mit Zitat Zum Seitenanfang

Soweit bin ich durchgekommen, siehe Link, aber obwohl ich die Navi absolut vom Bottom auf 0 gesetzt habe rutscht sie nach oben Mädchen!

HTML:

Code:
<div id="wrapper">
  <div id="logo"><img src="../images/logo.png" alt="logo" /></div>
  <div id="content">
    <div class="text">BLA BLA BLA</div>
    <div class="image-right"><img src="../images/kornfeld2.jpg" alt="Kornfeld" width="280" height="420" /></div>
    <div class="image-bottom"><img src="../images/kornfeld1.jpg" alt="Kornfeld" width="520" height="170" /></div>
  </div>
<div id="nav">design leistungen    projekte    kontakt     impressum</div>
</div>


und CSS:

Code:
div#wrapper {
   width: 900px;
   padding-top: 80px;
   margin: 0 auto;
}

div#logo {
     position: absolute;
    margin-top: 0;
    margin-left:0;
    z-index: 1;
}

div#content {
     float: left;
    margin-top: 30px;
    width: 800px;
    margin-left: 50px;
    margin-right: 50px;
    background-color: #6e6e6e;
}

div#nav {
   position:absolute;
   width: 800px;
   margin-bottom: 0;
   margin-left: 50px;
   background-image: url(../images/bg-nav.png);
   background-repeat: no-repeat;
}

.text {
     float: left;
    width: 500px;
    height: 240px;
    margin-top: 10px;
    margin-left: 10px;
}

.image-right {
     float: right;
    clear: right;
    width: 279px;
    margin-right: 0;
}

.image-bottom {
     float: left;
    clear: left;
}


Warum will es nicht wie ich?
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 10.12.2008 20:21
Titel

Antworten mit Zitat Zum Seitenanfang

Du positionierst es mit margin-bottom nicht sondern bestimmt den abstand nach unten.

Code:
div#content {
  position: relative;
  ... der rest
}
div#nav {
  position: absolute;
  bottom: 0;
  ... der rest
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
H-Milch
Threadersteller

Dabei seit: 09.06.2008
Ort: Pusemuckel
Alter: 37
Geschlecht: Weiblich
Verfasst Mi 10.12.2008 20:53
Titel

Antworten mit Zitat Zum Seitenanfang

Aber warum liegt die Navigation dann weiter unten und nicht an der Kante des div#content? Dieses Div hat doch die automatische Höhe und die Navigation müsste über den Bildern liegen?!
  View user's profile Private Nachricht senden
 
Ähnliche Themen Divs Übereinander
Divs übereinander?
mehrere divs übereinander?
Probleme mit dem Floaten
[CSS] Boxen untereinander floaten
[css] div floaten - warum klappts nicht?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.