zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ausrichten von 3 divs mit CSS aber wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.09.2009, 01:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2009
Beiträge: 9
Muffel2k zeigte ein beschämendes Verhalten in der Vergangenheit
Standard Ausrichten von 3 divs mit CSS aber wie?

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;
}
Angehängte Grafiken
Dateityp: jpg Problem.jpg (67,7 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.09.2009, 01:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich habe mir Deinen riesigen Code nicht wirklich angeschaut, aber das Bild sieht aus, als hättest Du nicht als erstes 2 floatende divs genommen, die die beiden Spalten bilden, und dann mit allen weiteren Elementen gefüllt werden

z.B. sollten die beiden Menüs zusammen in dem links floatenden div stecken, und der Content in dem rechts daneben stehenden (wobei der Content auch selber dieses rechts stehende div sein kann).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.09.2009, 10:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2009
Beiträge: 9
Muffel2k zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

*argh*

ich habe dem Test Container keinen float zugeordnet
Ja manchmal ist es besser ne Pause zu machen als weiter zu coden
Ist meine erste Seite die ich mit CSS komplett ohne Hilfsmittel wie Dreamweaver code deshalb sieht das ganze etwas chaotisch aus. Wird aber noch optimiert sobald alles so funzt wie es soll

Danke heiko für den Wink mit dem Laternenpfahl!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 divs ausrichten iizi CSS 2 20.08.2008 16:34
In einem div, 2 divs mittig ausrichten heohni CSS 1 20.07.2007 15:51
unterschied zwischen IE und FF (css divs) EvilDragon CSS 2 19.06.2006 12:12
nur bestimmte divs mit css formatieren tricky CSS 2 05.03.2004 11:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:07 Uhr.