[CSS] Ebenenausrichtung

Toby

Cadet 4th Year
Registriert
Mai 2003
Beiträge
107
Hallo zusammen,

ich hoffe ihr könnt mir wieder mal weiterhelfen.
Ich versuche gerade auf XHTML und CSS umzusteigen. Nur leider happerts des öfteren noch etwas :rolleyes:

Im folgenden Bild seht ihr 3 Ebenen. Die Hauptebene beinhaltet die restlichen 2.

Wie stelle ich es an, daß die inneren zwei Ebenen nebeneinander dargestellt werden ??? - Und nicht untereinander....*grumpf*


ebenen.gif



hier der Auszug aus der HTML-Datei:
Code:
<div id="footer">

<div class="textklein">.textklein</div> <div id="footerlink">#footerlink</div>

</div>


Hier der Auszug aus der CSS-Datei.
#footer {
margin-top:10px;
width: 100%;
background-color: #cc3300;
border-color:#000000;
border-style: ridge;
border-right-width:1px;
border-left-width:1px;
border-top-width:1px;
border-bottom-width:1px;
}

#footerlink {
width: 50px;
background-color:#ff0000;
border-right-width:0px;
border-left-width:0px;
border-top-width:0px;
border-bottom-width:0px;
}


.textklein {
width:100px;
font-weight: 100;
font-size: 0.7em;
font-family: verdana;
font-style: #000000;
text-decoration: normal;
background-color: #ffff00;
}


so long
Toby
 
Schon mal an "float:left;" gedacht?
 
Hi,

ok das mit dem Float:left; funktioniert tadellos.

Nur wie wird es angestellt damit die inneren Elemente unterschiedlich positioniert werden können.

Eine Ebene soll zentriert sein und die andere in der selben Zeile rechtsbündig.


siehe folgendes Image:
ebenen2.gif




Mein Problem ist, ich bekomme die Leerzeile nicht raus.

so long
Toby
 
PuppetMaster schrieb:
Hast du float:right; auf den #footerlink probiert?

Der Footerlink ist float:right; Hab ich nur vergessen zu erwähnen.
Wie gesagt float right bewirkt zwar eine rechte Ausrichtung für Footerlink aber die Leerzeile verschwindet leider deswegen nicht :(
 
wenn die Sache so nicht funzt - wie würdest ihr die Sache ohne Tabellen lösen.

Eine Ebene, und in dieser einen Ebene stehen zwei Wörter. Wort1 ist mittig zentriert und das Wort2 soll ganz rechts zentriert sein.
Das muss doch in Css möglich sein...

so long
Toby
 
<div style="width: 33%; float: left;"></div>
<div style="width: 34%; float: left; text-align: center;">-zentriert-</div>
<div style="width: 33%; text-align: right;">-rechts-</div>
 
Zurück
Oben