Aktives Mitglied
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 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:
Vielleicht kann mir jemand helfen.
Ich danke euch schnmal im Voraus.
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:
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;}
HTML:
Code:
<div id="sidebar-area">
<div id="archiv-top">
<p>Archiv</p>
</div>
<div id="archiv-body"></div>
</div>
Ich danke euch schnmal im Voraus.