Computerhilfen.de Logo
Forum
Tipps
News
Frage stellen

Divs untereinander ausrichten (CSS)

Hi,

also ich habe folgendes Problem: Ich versuche gerade zwei Divs (bzw. "uls") untereinander plazieren neben einer "Inhalts" Div.

Das allein ist kein Problem, ein größeres Div um beide "gespannt" und dann gehts. In dem Fall muss ich aber ohne "Extra" Div auskommen, da die Standardeigenschaft eigentlich vom einen float: right und vom anderen float: left ist, also beide den Inhalt umfließen sollen.

So schaut das nämlich normalerweise aus:
Templatevorschau (das ist nur ein beliebiges Template, aber die Struktur ist bisher immer dieselbe).

Ich wollte die gleichen Container nun anders positionieren und zwar so:



Also sind beide Container rechts positioniert und der Inhalt fließt um beide herum. Nur bekomm ich die Container nicht untereinander, das umfließen klappt zwar, aber dann landet ein Container links neben dem anderen und nicht darunter.

Wie bekomm ich das mit den vorhandenen Mitteln hin?

Danke  :)

Achja, hier die entscheidenden Stellen:

body
{
background-color: <?=$stylesarray[0][1];?>;
color: <?=$stylesarray[1][1];?>;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
margin: 0em 2em 0em 2em;
padding: auto;
}

...

div#Seite {
border: 1px <?=$stylesarray[15][1];?> <?=$stylesarray[14][1];?>;
border-top: 0px;
margin: 0 auto;
width: 900px;
align: center;
background-color: <?=$stylesarray[13][1];?>;
z-index: 100;
}

...

ul#Navigation {
background-color: <?=$stylesarray[4][1];?>;
color: <?=$stylesarray[7][1];?>;
border: 1px <?=$stylesarray[6][1];?> <?=$stylesarray[5][1];?>;
float: left;
width: 13em;
margin: 1em;
padding: 0.2em;
text-align: left;
z-index: 3;
}

...

div#Inhalt {
background-color: <?=$stylesarray[13][1];?>;
color: <?=$stylesarray[16][1];?>;
margin: 0em;
padding: 1em 18em;
text-align: justify;
z-index: 1;
}

...

ul#Shoutbox {
background-color: <?=$stylesarray[4][1];?>;
color: <?=$stylesarray[7][1];?>;
border: 1px <?=$stylesarray[6][1];?> <?=$stylesarray[5][1];?>;
float: right;
width: 11em;
margin: 1em;
padding: 0.2em;
text-align: left;
z-index: 2;
}

Antworten zu Divs untereinander ausrichten (CSS):

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Also irgendwie hab ich bei dieser Stelle das Problem nicht so ganz verstanden:

In dem Fall muss ich aber ohne "Extra" Div auskommen, da die Standardeigenschaft eigentlich vom einen float: right und vom anderen float: left ist, also beide den Inhalt umfließen sollen.

Warum genau kannst Du jetzt nochmal kein extra-Div benutzen? Du schreibst da, dass die Div-Teile den Inhalt umfließen sollen, anstatt dass der Inhalt die Divs umfließt.... wie genau stellst Du dir das vor?

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Habs auch nich verstanden  ???

Kann aber auch an mir liegen ;D

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Willst Du das vieleicht hinbekommen, dass Du nur die CSS-Datei änderst, ohne irgendwas am HTML-Code zu ändern?

In vielen Fällen ist das denke ich nämlich nicht möglich... Du könntest natürlich absolute Positionierung benutzen, dass is ja aber eigentlich keine schöne Lösung.

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Sorry, ich war mal ein paar Tage lang nicht zu Hause :)

Also ich hab mir schon gedacht, dass das vielleicht ein bisschen unverständlich war. Also dann nochmal:

Dermaßen schauen die Templates aus, also rechts eine Shoutbox, links die Navigation; mit float-Definitionen wird erreicht, dass der Inhalt die beiden Elemente umfließt:



Dazu wird im Quelltext erst die Navigation definiert, dann die Shoutbox und zum Schluss der Inhalt.

Nun will ich aus diesen drei Containern so eine Struktur "basteln":



Wichtig ist dabei, dass ich nur die CSS-Datei ändern kann, nicht den Quelltext selber ! Das hat einfach den Grund, dass das ganze online per Mausklick passieren soll, dann wird nur die alte CSS-Datei durch eine neue ersetzt, die von einem anderen Template stammt.

Ich hab das Problem auch einigermaßen gelöst, nur halt mit absoluter Positionierung wie mati schon sagt, aber das ist nicht so wirklich schön gelöst.

Auf der einen Seite darf dann die Navigation nur eine bestimmte Höhe haben, sonst ragt sie über den Container darunter drüber - und auf der anderen Seite sieht das dann so aus, wenn der Inhalt kürzer ist als die beiden Container lang:



Die Container sollten also noch "im Inhalt" liegen, also die gleiche Hintergrundfarbe haben. Ich hab das bisher einfach so gelöst, dass es ein "Oberelement" gab namens "Seite", das die gleiche Hintergrundfarbe wie der Inhalt hatte.

Dieser hat dann die Oberleiste, die Navigation, den Inhalt und die Shoutbox umschlossen. Nach dem Inhalt kam dann noch ein <p style="clear: both"></p>, das dafür gesorgt hat, dass das Div namens "Seite" erst dann aufhört, sobald entweder der Inhalt aufhört oder die beiden Elemente "Shoutbox" und "Navigation" zu Ende sind (falls der Inhalt kürzer ist):

<html>
...

<div id="Seite">

   <div id="Oberleiste">
    ....
   </div>

   <ul id="Navigation">
    ....
   </ul>

   <ul id="Shoutbox">
    ....
   </ul>

   <div id="Inhalt">
    ....
   </div>

   <p style="clear: both"></p>

</div>

...
</html>


Der letzte Befehl im Container "Seite" ist bei absoluter Positionierung ja nun aber zwecklos, weil die Elemente sich ja von dem Inhalts-Container abheben. Also hört die Seite dann auf, sobald der Inhalt aufhört und wenn dieser Kürzer ist als die beiden Elemente entsteht ein unschönes Bild, nämlich dass die Elemente über den "Hintergrund" hinausragen.

Ich nehme aber mal mit meiner CSS-Erfahrung an, dass das anders nicht zu lösen ist als mit absoluter Positionierung. Ich werde dann wohl die Container Navigation und Shoutbox doch wieder rechts und links plazieren müssen.
« Letzte Änderung: 25.10.06, 11:33:09 von Der olle Schwoebel »

« Tipp: Neues Urteil, aktuelle Infos zum Thema "Impressum"Brauche eure Hilfe wegen Voating !!! »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Quellcode
Ein Quellcode, auch als Quelltext bekannt, bezeichnet einen unkompilierten Programm-Code einer Software. Der Quellcode ist meist in einer der verbreiteten Programmierspra...

Unicode
Ein Unicode ist ein "Einheitsschlüssel", der als internationaler Standard gilt. Unicode ist ein digitaler Zeichensatz zur Darstellung von weitestgehend jedem Schrift...

QR-Code
Die Abkürzung QR steht für "Quick Response" und besteht aus einer quadratischen Matrix mit schwarzen und weißen Punktren. Zudem sind auch Striche zu sehen...