Gleich zwei Fragen zu CSS

[dn3d_fanboy]

Hallo zusammen,
ich habe mich irgendwie total verfranzt und habe daher gleich zwei Fragen.
Hier erstmal ein Bild, damit ihr wisst, worum es geht:

Zum 1. frage ich mich, warum der Text ("Archiv") soweit unten steht, da dieser eigentlich im oberen Feld stehen sollte (also dem mit Rahmen).

Zum 2. sieht man wahrscheinlich schon, dass ich versucht habe, die untere div-Box unter die obere zu schieben. Leider funktioniert das nicht ganz, da beide divs relative sind. Aber irgendwie komme ich nicht drauf, wie ich es hinkriegen soll.
Gibt es da irgendeinen Weg oder müssen die divs absolut positioniert sein?

Hier noch der CSS-Code:

#sidebar-area    {width: 250px;
                min-height: 240px;
                margin: 30px 0px 0px 0px;
                float:right;
                }        
                
#archiv-top     {width: 240px;
            height: 30px;
            border: 3px solid #e06526;
            background: #eee8ca;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
            -moz-box-shadow: 0px 0px 5px #6b6b6b;
            -webkit-box-shadow: 0px 0px 5px #6b6b6b;
            box-shadow: 0px 0px 5px #6b6b6b;
            /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
            z-index: 1;}
            
#archiv-top p    {font-family: Yellowtail, Arial, sans-serif;
                font-size: 28px;
                font-weight: bold;
                color: #e06526;
                text-decoration: none;
                text-shadow: 1px 1px 0px #000000;
                text-align: center;
                }
                
#archiv-body    {width: 200px;
                min-height: 240px;
                margin: -15px 25px 0px 25px;*/
                /*padding: 5px 10px 5px 10px;*/
                background: #eee8ca;
                background: -moz-linear-gradient(left, #1e5799 0%, #eee8ca 0%, #e8d7b9 50%, #eee8ca 100%);
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(0%,#eee8ca), color-stop(50%,#e8d7b9), color-stop(100%,#eee8ca));
                background: -webkit-linear-gradient(left, #1e5799 0%,#eee8ca 0%,#e8d7b9 50%,#eee8ca 100%);
                background: -o-linear-gradient(left, #1e5799 0%,#eee8ca 0%,#e8d7b9 50%,#eee8ca 100%);
                background: -ms-linear-gradient(left, #1e5799 0%,#eee8ca 0%,#e8d7b9 50%,#eee8ca 100%);
                background: linear-gradient(to right, #1e5799 0%,#eee8ca 0%,#e8d7b9 50%,#eee8ca 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#eee8ca',GradientType=1 );
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
                -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24);
                -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24);
                box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.24);
                /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS
                float:right;*/
                z-index: 2;}

sidebar-area ist hierbei das umschließende div, archiv-top der Bereich für die Überschrift (also die Schrift, die jetzt falsch dargestellt wird), archiv-body ist das div, welches hinter archiv-top geschoben werden soll.


HTML:

<div id="sidebar-area">
            
                <div id="archiv-top">
                
                    <p>Archiv</p>
                
                </div>
                
                <div id="archiv-body"></div>
            
            </div>

Vielleicht kann mir jemand helfen.

Ich danke euch schnmal im Voraus.

 

[stefan_2]

AW: Gleich zwei Fragen zu CSS

Moin,

also der Text Archiv sitzt zu tief, weil Du vergessen hast die margin zu löschen

setze mal im <p> style "margin: 0;"

Das mit dem position-tag hast Du schon richtig gesehen, Du mußt in archiv-top und archiv-body einfach ein "position: relative;" zufügen und schon klappt es (bei mir jedenfalls) :lol:

Allerdings fehlt dann bei mir die erste Zeile im archiv-body-Kasten. Aber das kannst Du ja mit der position wieder rausreißen...

Ach ja, vergessen: z-index zählt andersherum! Höhere Zahlen stehen über kleineren!

Viel Erfolg
Stefan

 

[dn3d_fanboy]

AW: Gleich zwei Fragen zu CSS

Hallo Stefan,
vielen Dank für deine Hilfe, so hat es geklappt. Ich hatte gedacht, das position:relative als Standard gilt, wenn nichts angegeben wird.
Das mit dem z-index habe ich auch schon rausgefunden

Ein Problem habe ich dennoch: der Text ("Archiv") ist jetzt zwar im richtigen div, allerdings ganz unten. Ich hätte ihn aber gerne vertikal mittig stehen, aber egal was ich ändere (margin des Text oder padding des div) es lässt sich nicht ändern.

Hat da jemand vielleicht eine Idee?

 

[TehTux]

AW: Gleich zwei Fragen zu CSS

...Ich hatte gedacht, das position:relative als Standard gilt, wenn nichts angegeben wird...

position: static;

ist Standard

...Ich hätte ihn aber gerne vertikal mittig stehen...

line-height: 28px;

(28px => Höhe vom Elternelement)

Hier das Ergebnis: http://jsfiddle.net/WwyfJ/

Viele Grüße
Jan

 

[dn3d_fanboy]

AW: Gleich zwei Fragen zu CSS

line-height: 28px;

(28px => Höhe vom Elternelement)

Hier das Ergebnis: http://jsfiddle.net/WwyfJ/

Viele Grüße
Jan

Super, das hat geklappt. Danke dir!