Elemente positionieren

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich steh momentan leider anscheinend grad auf der Leitung und mir fällt nicht mehr ein, wie ich Elemente richtig positionieren kann. Absolut ist das ja kein Problem. Aber für meinen Fall finde ich die richtige Lösung nicht. In Google finde ich auch nichts, wahrscheinlich schon deshalb nicht, weil ich nicht weiß, wonach ich suchen soll.

Ich habe ein Div-Element, in welches zwei weitere Div-Elemente verschachtelt sind. Nun möchte ich das eine der beiden inneren Div-Element an den rechten Rand und das andere ann den linken Rand des übergeordneten Elements positionierenl.
Kann mir wer auf die Sprünge helfen, wie man das Im Stylesheet schreibt?

Gruß

Thomas

#2

Hallo Thomas,

Ich habe ein Div-Element, in welches zwei weitere Div-Elemente
verschachtelt sind. Nun möchte ich das eine der beiden inneren
Div-Element an den rechten Rand und das andere ann den linken
Rand des übergeordneten Elements positionierenl.
Kann mir wer auf die Sprünge helfen, wie man das Im Stylesheet
schreibt?

Du könntest die inneren Elemente floaten. Eines links, eines rechts.

Schöne Grüße
Yasmin

#3

Hallo Yasmin,

Du könntest die inneren Elemente floaten. Eines links, eines
rechts.

hm…
Schreib mal ein klein wenig genauer, wie das im Stylesheet aussehen könnte. Ich steh momentan absolut auf der Leitung wie das geht. ;-(

Gruß

Thomas

#4

Schreib mal ein klein wenig genauer, wie das im Stylesheet
aussehen könnte.

sorry… da hassu:

div#kapsel {
width:50%;
height:50%;
}

div#links {
float:left;
width:20%;
}

div#rechts {
float:right;
width:20%;
}

 Linkes div 
 Rechtes div

Schöne Grüße
Yasmin

#5

Hallo,

Ich habe ein Div-Element, in welches zwei weitere Div-Elemente
verschachtelt sind. Nun möchte ich das eine der beiden inneren
Div-Element an den rechten Rand und das andere ann den linken
Rand des übergeordneten Elements positionierenl.

Html:

 Inhalte rechtes div


 Inhalte linkes div




Und Css:


    
    #parent {
     width: 800px;
    }
    #right {
     width: 380px;
     float: right;
     margin: 0 0 0 0;
    }
    #left {
     width: 380px;
     margin: 0 40px 0 0;
    }
    hr {
     visibility: hidden;
     clear: both;
     width: 1px;
     height: 1px;
     margin: -1px 0 0 0;
     border: none;
    }




Die HR sorgt dafür, dass andere Elemente erst unter dem längeren div angezeigt werden. Sie wird im Css unsichtbar gemacht und in der Größe und den Abständen so angepasst, dass sie den Fluß beim Poisitionieren nicht beachtet werden muss.

Breite / Abstand können natürlich beliebig angepasst werden.

Greetinx
Christian
#6

Hallo Yasmin,

danke vorerst mal. Was mache ich nun, wenn ich mehrere linke oder rechte Elemente hab? Oder aber, wenn ich kein linkes order rechtes Element hab?
Hintergrund ist, ich erzeuge den HTML-Code dynamisch mit PHP und weiß vorher noch nicht, wieviele linke oder rechte Elemente es gibt.

Gruß

Thomas

#7

Hallo Yasmin,

ich hab das jetzt mal so gemacht. Allerdings wird das nächste Element, das unterhalb dem äusseren Element kommt auch wieder mit formatiert. Das sollte nicht sein.
Was kann ich dagegen tun?

Eine unsichtbare Linie mit „clear: both“ habe ich auch schon eingefügt.

Was könnte das sein?

Gruß

Thomas

#8

Hallo,

als non Profi würde ich das mit Hilfe einer Tabelle lösen:

Inhalt links
Inhalt rechts

Spricht was dagegen?

Schönen Gruß
HMo

(die Parameter: left="" und align="" hat mir Firefox eingefügt)

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#9

Ohne die Site gesehen zu haben, was ohne Zweifel besser gewesen wäre:

Das linke mit float: left, das rechte mit float: right. Informiere dich über das floaten!

Problem:
Das übergeordnete Element (div) wird höchstwahrscheinlich daramtisch an Höhe verlieren. Sodass die inneren DIVs darüber hinaus ragen.

Begründung:
Durch das floaten nimmst Du die inneren DIVs aus dem Fluss heraus. Dadurch weiß das übergeordnete DIV nicht mehr wie groß es sein soll, weil die inneren ja quasi nicht mehr dazu gehören.

Lösung:
Entweder floatest Du das übergeordnete DIV selbst links (oder rechts), oder Du „klärst“ am Ende irgendwo in dem übergeordneten DIV mit clear: both.

Ich hoffe das hat geholfen!

Gruß Marcus :smile:

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#10

als non Profi würde ich das mit Hilfe einer Tabelle lösen:

Inhalt links
Inhalt
rechts

Spricht was dagegen?

Ja, zum Beispiel dass Tabellen niemals für derartige Zwecke erfunden, sondern stets nur dafür missbraucht wurden.

Für solche Arbeiten wie sie hier erforderlich sind, ist CSS (Cascading Style Sheet) zuständig. Tabellen sind hier völlig fehl am Platz.

Gruß Marcus :smile:

#11

Hallo Thomas,

Allerdings wird das nächste Element, das unterhalb dem äusseren Element :kommt auch wieder mit formatiert. Das sollte nicht sein.

Du meinst irgendetwas was nach dem Element kommt, das ich im Beispiel ‚Kapsel‘ genannt habe? Hm… Ohne Quelltext schwer zu sagen. Hast Du was online stehen?

Schöne Grüße
Yasmin

#12

danke Marcus für die Aufklärung,

so weit bin ich in die Tiefen von HTML/CSS nicht vorgedrungen. Ich habe (bisher) immer nur das angwewandt, was vom Ergebnis her passte.

Gruß: H.Mo

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#13

Hallo Thomas,

als non Profi habe ich folgendes gemacht:

Ich habe die Größenangabe zu height in dem CSS-Format div#Kapsel
von 50% auf 10% reduziert, und der Abstand zum Fogetext war weg!

Gruß
H.Mo

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#14

Hallo Yasmin,

schau Dir bitte mal test.spd-bodenmais.de an. Ungefähr in der Mitte Siehst Du, was da passiert. Bei jedem Browser sieht es ein wenig anders verunstaltet aus.

Gruß

Thomas

#15

Hallo Marcus,

Ohne die Site gesehen zu haben, was ohne Zweifel besser
gewesen wäre:

test.spd-bodenmais.de

Das linke mit float: left, das rechte mit float:
right . Informiere dich über das floaten!

Habe ich gemacht.

Problem:
Das übergeordnete Element (div) wird höchstwahrscheinlich
daramtisch an Höhe verlieren. Sodass die inneren DIVs darüber
hinaus ragen.

Begründung:
Durch das floaten nimmst Du die inneren DIVs aus dem Fluss
heraus. Dadurch weiß das übergeordnete DIV nicht mehr wie groß
es sein soll, weil die inneren ja quasi nicht mehr dazu
gehören.

Hm, das könnte eine Ursache für den „Salat“ sein.

Lösung:
Entweder floatest Du das übergeordnete DIV selbst links (oder
rechts), oder Du „klärst“ am Ende irgendwo in dem
übergeordneten DIV mit clear: both.

Das mit dem clear:both hätte ich versucht, indem ich ein eingefügt hat, dem ich diese Eigenschaft zugeordnet habe. Leider ohne Erfolg. Wie könnte man das sonst noch machen?

Ich hoffe das hat geholfen!

Ich bin ein klein wenig schlauer, aber lösen konnte ich das Problem damit noch nicht. :frowning:

Gruß

Thomas

#16

Hallo Christian,

Die HR sorgt dafür, dass andere Elemente erst unter dem
längeren div angezeigt werden. Sie wird im Css unsichtbar
gemacht und in der Größe und den Abständen so angepasst, dass
sie den Fluß beim Poisitionieren nicht beachtet werden muss.

Anscheinend weiß das mein PC noch nicht, daß das HR das bewirken soll, oder ich hab einen Fehler drin. Auf jeden Fall verschiebt es alles ganz furchtbar. :frowning:

Gruß

Thomas

#17

Hallo H.Mo

Ich kenne das. Meine ersten Gehversuche habe ich auch mit Tabellen für’s layouten gemacht.
Zur Erklärung: HTML dient dazu, Elementen eine logische Reihenfolge und eine logische bedeutung zukommen zulassen. Die wichtigste Überschrift hat das HTML-Tag . Danach kommt üblicher Weise ein Textabsatz der in steht und dann vielleicht vielleicht nochmal eine untergeordnete Überschrift in . So wie man eben einen Text logisch gliedern würde. Grob gesagt geht es um den Inhalt. CSS hingegen ist für die Optik zuständig, also wo die Dinge dann positioniert werden, welche Farbe sie haben usw.

Wenn’s noch Fragen gibt, immer her damit.

Gruß Marcus

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#18

Ich bin ein klein wenig schlauer, aber lösen konnte ich das
Problem damit noch nicht. :frowning:

Gruß

Thomas

Bodenmais? Da war ich mal auf Wellness :wink:

Eine horizontale Linie hat keine semantische Bedeutung. Ein Copyright zum Beispiel eher schon… Aber das hat nichts mit dem floatingfehler zu tun also das nur nebenbei.

Ich hab die auf meinem Webspace *Werbung mach* mal eine kleine Beispieldatei hochgeladen:

http://www.marcus-ringer.de/beispielseiten/

Wirf einen Blick in den Quelltext, vielleicht wird dann einiges etwas klarer. Achte mal darauf, dass sich der Inhalt, der Größe des Browserfensters anpasst…

Gruß Marcus
P.S.: ist ein Gästebuch, in das oft eh nur gespammt wird, bei einer seriösen Partei sinnvoll?

#19

Hallo Thomas,

Die HR sorgt dafür, dass andere Elemente erst unter dem
längeren div angezeigt werden. Sie wird im Css unsichtbar
gemacht und in der Größe und den Abständen so angepasst, dass
sie den Fluß beim Poisitionieren nicht beachtet werden muss.

Anscheinend weiß das mein PC noch nicht, daß das HR das
bewirken soll, oder ich hab einen Fehler drin. Auf jeden Fall
verschiebt es alles ganz furchtbar. :frowning:

… habe gerade in den andere Postings die Adresse gefunden - an der Stelle, wo Du es verwendest, darf die hr nicht ein clear: both, sondern nur ein clear: left bekommen. Dann geht alles, ich habs gerade ausprobiert.

Greetinx
Christian

#20

Hallo Christian,

… habe gerade in den andere Postings die Adresse gefunden -
an der Stelle, wo Du es verwendest, darf die hr nicht ein
clear: both, sondern nur ein clear: left bekommen. Dann geht
alles, ich habs gerade ausprobiert.

wieder nicht, ich habs gerade eingepflegt. :frowning:
test.spd-bodenmais.de

Gruß

Thomas