Zur Navigation

verschachtelte divs ohne zeilenumbruch

1 Gast (Gast)

Hallo allerseits,

ich habe gerade erst begonnen mit html und css rumzuexperimentieren. meine ersten Ergebnisse sind aber viel versprechend und es macht mir grossen Spass mit wenigen Zeilen xhtml und css xbrowser kompatible Seiten zu basteln!

Möglicherweise bin ich ja blind, aber ein wiederkehrendes Problem für mich ist es verschachtelte divs zu benutzen ohne dass diese zwingend einen Zeilenumbruch erzeugen.

Um mein Problem zu erläutern, folgendes Beispiel:


<style>
body {
padding: 0px;
margin: 0px;
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#container {
margin: 15px 15px 15px 15px;
border: 1px solid red;
}
#header {
height: 70px;
border: 1px solid green;
}
#logocon {
margin-top: 15px;
border: 1px solid red;
}
#logo1 {
height: 88px;
width: 88px;
background-color: #9b8f88;
}
#balken {
height: 88px;
background-color:#372011;
}
</style>
<html>
<body>
<div id="container">
    <div id="header">
    </div>
    <div id="logocon">
        <div id="logo1">
        </div>
        <div id="balken">
        </div>
    </div>
</div>
</body>
</html>

Ich möchte ganz einfach erreichen, dass die div id="balken" rechts neben div id="logo1" platziert wird ohne in "position-orgien" zu geraten.
Gibt es eine Möglichkeit einfach logo1 anzuweisen, dass die div keinen Zeilenumbruch erzeugt?

Vielen Dank

21.06.2005 19:11

2 Gast (Gast)

Nachtrag:
Sollte ich div id="balken" jetzt mit position: absolute ausrichten wollen, dann sollte das Elternelement doch in diesem Falle die div id="logocon" sein und nicht body!?
Ist es aber nicht! Kann mich jemand aufklären bitte? Danke.

21.06.2005 20:20

3 Jörg

Du kannst divs nebeneinander platzieren mithilfe von float:left oder float:right, siehe hierzu auch SELFHTML:

float (Textumfluss)

Konkret für dein Beispiel:


#logo1 {
height: 88px;
width: 88px;
background-color: #9b8f88;
float:left;
}
#balken {
height: 88px;
background-color:#372011;
}

(Ein nachfolgendes Element, das wieder normal unterhalb positioniert werden soll, muss gegebenenfalls noch ein clear:left erhalten)

21.06.2005 20:53 | geändert: 21.06.2005 20:58

4 Gast (Gast)

Hallo Jörg,

danke für deine Hilfe. Das funktioniert so, jedoch bekomme ich dann eine Menge Folgeprobleme:

Ich möchte zwischen balken und logo1 noch 15px Abstand einfügen, weder margin noch position scheint nunmehr möglich.
Danke für den Tip, ich probiere weiter.

Eine grundsätzliche Frage habe ich aber noch, vielleicht kannst du sie mir beantworten:
Per Definition bezieht sich die absolute Positionierung eines Elements relativ zum Elternelement. In meinem Fall würde das bedeuten, dass absolute Positionierung von balken sich an logocon orientieren müsste, dem Elternelement.
Folgerichtig müsste

#balken {
position: absolute;
left: 103px;
top: 0px;
height: 88px;
background-color:#372011;
}
exakt das produzieren, was ich erreichen will. Ist aber nicht der Fall, denn das Elternelement scheint body zu sein...

Ist das nicht unlogisch?

21.06.2005 21:06

5 Jörg

Die absolute Positionierung bezieht sich auf body, die normale (static) auf das Elternelement.

Die 15px Abstand würde ich mit margin-left für #balken realisieren und hierbei noch die 88px Breite von #logo1 hinzurechnen


#balken {
height: 88px;
background-color:#372011;
margin-left:103px;
}

21.06.2005 21:17

6 wrtlprnft

Stimmt nicht ganz. Absolute Positionierung bezieht sich auf das nächste ünergeordnete Element, das absolut, relativ oder fixiert positioniert ist.
Das heißt, du musst #logocon ein position:relative zuordnen, dann geht das.

22.06.2005 07:53

7 Jörg

Das war mir auch noch nicht bekannt - wegen Problemen mit dem IE 6 hatte ich es bislang vermieden, verstärkt mit position:absolute zu arbeiten; wieder was dazu gelernt :)

22.06.2005 11:54

8 Gast (Gast)

Ich habe es jetzt mit float gelöst. Sieht so aus wie ich möchte und funktioniert in IE6, Firefox und Safari, was will man mehr. Ich kann euch ja mal das Ergebnis zeigen wenn ich fertig bin.

Danke nochmals.

22.06.2005 13:24

9 Gast (Gast)

Nunja, langsam dem Wahnsinn näher rückend, ersuche ich euch nochmal um Hilfe.

Schaut euch das Konstrukt doch mal an:

http://hannizkaos.dyndns.info/ie6.htm

Ziel soll sein, dass der erste kasten neben dem zweiten kasten 15px versetzt steht und an den wiederum der balken anschliesst ohne zwischenraum. der rote kasten soll dann die gleiche farbe wie der balken erhalten und dient später dazu kontext abhängig text zu enthalten.
Probleme bereitet natürlich der ie6, denn der container der die zwei kästen, den balken und die enthaltene grafik entält beginnt dort erst ab dem balken entgegen des markups.
für mich völlig unbegreiflich, denn das gleiche konstrukt funktioniert ja einwandfrei im zweiten container, der die unteren drei kästen enthält!

Kann mich jemand aufklären?

p.s. warum firefox und safari die absolute positionierung richtig machen und ie6 nicht, geht mir auch nicht in den kopf.
Danke

23.06.2005 18:40

10 Jörg

Ich konnte die Seite leider bislang nicht aufrufen (Timeout) - ich versuch es später nochmal

24.06.2005 08:05 | geändert: 24.06.2005 08:05