BadKiss
Threadersteller
Dabei seit: 07.08.2008
Ort: Bayern
Alter: -
Geschlecht: 
|
Verfasst Do 07.08.2008 20:33
Titel [CSS] Div bottom anordnen |
  |
|
Halli hallo beisammen,
ich habe ein kleines (sehr nervendes) Problem.
Ich möchte gerne ein Div bottom anordnen, allerdings kann ich das nicht mit absolute machen, da ein Text um das Div floaten soll.
Hier mal ein Screen, wie es im Moment aussieht:
Ist-Zustand
Und wie es aussehen sollte (Text mit PS eingefügt):
Soll-Zustand
Im Moment ist das rechte Div noch top positioniert und relative, ich möchte es allerdings unten am footer etwa haben, allerdings funktioniert das ohne absolute nicht bzw es funktioniert soweit, wenn man top: 200px; macht schon, allerdings floatet der Text dann nicht um das Div, sondern um die vorherige Stelle (da wo das Div im Moment angeordnet ist).
Außerdem sollen die 2 Divs in der Höhe variierbar sein (also je nach Text innen drin angepasst).
Hier noch der HTML Source:
| Code: | <div id="content">
<div id="content_text">
<div id="contentleft">
<div id="contentleft_top"></div>
<div id="navigation_l">
Linkmenu links<br />
</div>
<div id="contentleft_bottom"></div>
</div>
<div id="contentright">
<div id="contentright_top"></div>
<div id="navigation_r">
Linkmenu rechts<br />
</div>
<div id="contentright_bottom"></div>
</div>
Text, der im Content stehen soll,
welcher um die 2 Divs floaten soll!
</div>
</div>
<div id="footer">
<div id="footer_text">
Footerteil
</div>
</div> |
und CSS Source:
| Code: | #content{
position: relative;
top: 0px;
left:0px;
width:804px;
height:auto;
float:left;
margin: auto;
background-image:url(image/hg.jpg);
background-repeat:repeat-y;
z-index:2;
}
#content_text{
position: relative;
top: 0px;
left:78px;
width:646px;
margin-left:-78px;
height:auto;
float:left;
margin: auto;
}
#contentleft {
position:relative;
float:left;
top:0px;
left:-78px;
margin-right:-78px;
width:168px;
height:auto;
background-image:url(image/left.jpg);
background-repeat:repeat-y;
}
#contentleft_top {
position:relative;
float:left;
top:0px;
left:0px;
width:168px;
height:52px;
background-image:url(image/left_top.jpg);
background-repeat:no-repeat;
}
#contentleft_bottom {
position:relative;
float:left;
bottom:20px;
left:0px;
width:168px;
height:58px;
margin-bottom:-20px;
background-image:url(image/left_bottom.jpg);
background-repeat:no-repeat;
}
#contentright {
position:relative;
float:right;
right:-75px;
margin-left:-75px;
width:154px;
height:auto;
background-image:url(image/right.jpg);
background-repeat:repeat-y;
}
#contentright_top {
position:relative;
float:left;
top:0px;
left:0px;
width:154px;
height:52px;
background-image:url(image/right_top.jpg);
background-repeat:no-repeat;
}
#contentright_bottom {
position:relative;
float:left;
bottom:20px;
left:0px;
width:154px;
height:28px;
margin-bottom:-20px;
background-image:url(image/right_bottom.jpg);
background-repeat:no-repeat;
}
#navigation_l {
position: relative;
float:left;
top: -20px;
left: 25px;
width: 105px;
height:auto;
text-align:center;
}
#navigation_r {
position: relative;
float:left;
top: -20px;
left: 25px;
width: 105px;
height:auto;
color:#E7E4D6;
text-align:center;
} |
Ich hoffe man versteht mein Problemchen und mir kann jmd helfen, wäre unglaublich dankbar dafür, da ich schon Ewigkeiten an dem Problem hänge 
Lg,
Bad
Zuletzt bearbeitet von BadKiss am Do 07.08.2008 21:01, insgesamt 2-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
