Hallo
ich bastel gerade an meiner Page und sitze grad aufm Schlauch. Ich habe auf der linken Seite 2 div Container mit Menues drinne und rechts daneben sollte ein Content div Container sein (Sie angehängtes Bild). Nun habe ich Probleme mit der Ausrichtung und benötige Hilfe. Es bleibt immer auf der Höhe des 2. Menues hängen.
Danke für euere Hilfe
Hier meine Codeschnippsel:
PHP Datei:
PHP-Code:
<div class="content_style">
<div id="test">
<div id="left">
<div class="menu_title_left"></div>
<div class="menu_title_right"></div>
<div class="menu_title">About me</div>
<div class="menu_main">
<span style="cursor: pointer" onClick="loadContent(1);">› Steckbrief</span><br>
<span style="cursor: pointer" onClick="loadContent(2);">› Downloads</span><br>
<span style="cursor: pointer" onClick="loadContent(3);">› Gästebuch</span><br>
<span style="cursor: pointer" onClick="loadContent(4);">› Kontakt</span><br>
<span style="cursor: pointer" onClick="loadContent(5);">› Impressum</span><br>
<div class="menu_footer_left"></div>
<div class="menu_footer_right"></div>
<div class="menu_footer"></div>
</div>
</div>
<div style="clear:both;"></div>
<div id="left">
<div class="menu_title_left"></div>
<div class="menu_title_right"></div>
<div class="menu_title">About me</div>
<div class="menu_main">
<span style="cursor: pointer" onClick="loadContent(1);">› Steckbrief</span><br>
<span style="cursor: pointer" onClick="loadContent(2);">› Downloads</span><br>
<span style="cursor: pointer" onClick="loadContent(3);">› Gästebuch</span><br>
<span style="cursor: pointer" onClick="loadContent(4);">› Kontakt</span><br>
<span style="cursor: pointer" onClick="loadContent(5);">› Impressum</span><br>
<div class="menu_footer_left"></div>
<div class="menu_footer_right"></div>
<div class="menu_footer"></div>
</div>
</div>
</div>
<div id="right">
<div class="content_title_1"></div>
<div class="content_title_2"></div>
<div class="content_title_3"></div>
<div class="content_title_4"></div>
<div class="content_title_5"></div>
<div class="content_main">
<div id="mainArea"></div>
<div id="mainAreaInternal" class="content_main"></div>
<!-- End Main Area Internal -->
<div id="mainAreaLoading" class="content_main" style="display: none"></div>
</div>
<div class="content_footer_left"></div>
<div class="content_footer_right"></div>
<div class="content_footer"></div>
</div>
CSS Datei:
Code:
.menu_title {
height:22px;
background-image:url(../images_page/img_8.jpg);
background-repeat:repeat;
}
.menu_title_right{
float:right;
width:18px;
height:22px;
background-image:url(../images_page/img_9.jpg);
}
.menu_title_right2{
float:right;
width:18px;
height:22px;
background-image:url(../images_page/img_9_1.jpg);
}
.menu_title_left {
float:left;
width:20px;
height:22px;
background-image:url(../images_page/img_7.jpg);
}
.content_title_1 {
float:left;
width:16px;
height:22px;
background-image:url(../images_page/img_10.jpg);
}
.content_title_2{
float:left;
width:273px;
height:22px;
background-image:url(../images_page/img_11.jpg);
background-repeat:repeat;
}
.content_title_3 {
float:left;
width:20px;
height:22px;
background-image:url(../images_page/img_12.jpg);
}
.content_title_4 {
float:left;
width:273px;
height:22px;
background-image:url(../images_page/img_8_1.jpg);
background-repeat:repeat;
}
.content_title_5 {
float:right;
width:18px;
height:22px;
background-image:url(../images_page/img_13.jpg);
}
.menu_footer {
height:15px;
background-image:url(../images_page/img_20.jpg);
background-repeat:repeat;
}
.menu_footer_right{
float:right;
width:18px;
height:15px;
background-image:url(../images_page/img_21.jpg);
}
.menu_footer_left {
float:left;
width:20px;
height:15px;
background-image:url(../images_page/img_19.jpg);
}
.content_style {
width:762px;
height:350px;
background-color:#ffffff;
}
.menu_main{
height:24px;
}
.content_main{
background-color:#004972;
max-height:300px;
}
.content_footer {
height:18px;
background-image:url(../images_page/img_24.jpg);
background-repeat:repeat;
}
.content_footer_right{
float:right;
width:18px;
height:18px;
background-image:url(../images_page/img_25.jpg);
}
.content_footer_left {
float:left;
width:16px;
height:18px;
background-image:url(../images_page/img_23.jpg);
}
#left {
width:150px;
margin:1px;
float:left;
background-image:url(../images_page/img_222.jpg);
background-repeat:repeat;
}
#right {
width:600px;
height:400px;
margin:1px;
float:right;
}
#test {
}
.content_style #left .menu_main span {
text-align: justify;
}