background ist nicht über die komplette Divbox verteilt

MyXoToD

Hi Leute ich habe ien Problem und zwar dieses:

http://www.abload.de/img/frageew46.png

Die "main_container"-Div Box geht um die Pagetrailbox, Menubox und Contentbox drumherum. Sie weißt ihnen die maximalbreite von 898px zu.
Da ich ein Loch unter dem content bekomme wenn das menü länger ist oder umgekehrt hab ich mir gedacht weiß ich einfach dem main_container ein background zu und zwar ein 1px hohes und 898px breites Bild was klar sein sollte. dieses hab ich dann auf repeat-y gestellt und dann müsste es sich ja eigentlich bis zu schluss der divbox wiederholen, das tut es aber nicht, sondern wenn ich mit FireBug schau, hört der Main-container direkt nach der Grünmarkierten Pagetrailbox auf. wenn ich dem main-container eine feste höhe gebe klappt es, aber die höhe muss ja variierbar bleiben.

Wisst ihr wie ich das anstellen könnte?

Bitte um schnelle hilfe, will das template heute noch fertig bekommen.

Danke im Voraus.

Santos

synaptic

joa statt nen bild zu verlinken hätteste lieber nen linkzum problem posten sollen.
das is einfacher zu prüfen ...

MyXoToD

Das ganze ist und soll noch nicht online... ich mach das noch lokal mit xampp

PHP

<div class="main_container">

            <div class="pagetrail"></div>

            <div class="menu_container">
                <a class="menu_button_top" href="index.php?action=bla">Startseite</a>
                    <?php if ($_GET['action'] == "bla" or $_GET['action'] == "bla" or $_GET['action'] == "bla" or $_GET['action'] == "#") { ?>
                    <a class="menu_sub_button" href="index.php?action=bla">Steckbrief</a>
                    <a class="menu_sub_button" href="index.php?action=bla">Hobbys</a>
                    <a class="menu_sub_button" href="index.php?action=bla">Konzerte</a>
                    <?php } ?>
                <a class="menu_button" href="index.php?action=bil">Bilder</a>
                <a class="menu_button" href="?action=vid">Videos</a>
                <a class="menu_button_bottom" href="?action=end">Ende</a>
            </div>

            <div class="content_container">
                <div class="content_top"></div>
                <div class="content_center"></div>
                <div class="content_bottom"></div>
            </div>

        </div>

Alles anzeigen

Code

body {
background-color:#000000
}


.header_container {
background:transparent url(../images/layout/mb_header.jpg) no-repeat scroll 0 0;
height:173px;
margin-left:auto;
margin-right:auto;
margin-top:-8px;
width:898px
}


.main_container {
margin-left:auto;
margin-right:auto;
width:898px
}


.pagetrail {
width:898px;
height:47px;
background:transparent url(../images/layout/mb_pagetrail.jpg) no-repeat scroll 0 0
}


.menu_container {
float:left
}


a.menu_button_top {
background:transparent url(../images/layout/mb_menu_top.jpg) no-repeat scroll 0 0;
width:211px;
height:38px;
display:block
}


a.menu_button_top:hover {
background:transparent url(../images/layout/mb_menu_top_active.jpg) no-repeat scroll 0 0;
width:211px;
height:38px;
display:block
}


a.menu_button_bottom {
background:transparent url(../images/layout/mb_menu_bottom.jpg) no-repeat scroll 0 0;
width:211px;
height:34px;
display:block
}


a.menu_button_bottom:hover {
background:transparent url(../images/layout/mb_menu_bottom_active.jpg) no-repeat scroll 0 0;
width:211px;
height:34px;
display:block
}


a.menu_button {
background:transparent url(../images/layout/mb_menu.jpg) no-repeat scroll 0 0;
width:211px;
height:28px;
display:block
}


a.menu_button:hover {
background:transparent url(../images/layout/mb_menu_active.jpg) no-repeat scroll 0 0;
width:211px;
height:28px;
display:block
}


a.menu_sub_button {
background:transparent url(../images/layout/mb_sub_menu.jpg) no-repeat scroll 0 0;
width:211px;
height:18px;
display:block
}


.content_container {
float:right;
}


.content_top {
background:transparent url(../images/layout/mb_content_top.jpg) no-repeat scroll 0 0;
height:38px;
width:687px
}


.content_center {
background:transparent url(../images/layout/mb_content_center.jpg) repeat-y scroll 0 0;
width:687px
}


.content_bottom {
background:transparent url(../images/layout/mb_content_bottom.jpg) no-repeat scroll 0 0;
height:27px;
width:687px
}


.footer_container {
background:transparent url(../images/layout/mb_footer.jpg) no-repeat scroll 0 0;
height:114px;
width:898px;
margin-left:auto;
margin-right:auto;
clear:both;
}

Alles anzeigen

Grevas

Versuchs mal mit nem Background-color ob es angezeigt wird

UND

width:687px

da fehlen einige ";" ! Eigentlich in jeder letzten Zeile, solltest sie immer dran machen...

sejuma

Wer floatet, muss auch clearen: http://www.ohne-css.gehts-gar.net/0042.php

Unregistriert

Zitat von Grevas

Versuchs mal mit nem Background-color ob es angezeigt wird

UND

width:687px

da fehlen einige ";" ! Eigentlich in jeder letzten Zeile, solltest sie immer dran machen...

wieso er hat in einer einzeiligen zuweisung das semilkon hinten weggelassen, was durchaus machbar ist. und auch bei mehreren anweisungen kann man das letzte weglassen, ansonsten clearen. Und deine background-anweisungen sind auch veraltet. Nicht alles in background reinknallen.

Background-color: ;
Background-image: url();
background-repeat: no-repeat;

Grevas

background-image macht Probleme mit IE, nicht immer, aber warum benutzen wenns nicht sein muss?

Und warum immer ein ";" obwohls nicht zwingend erforderlich ist? Weil es unsauber ist und förmlich darum bittet das sich Fehler einschleichen sobald man mal was "schnell" ändern will. Aber ist auch nur eine Empfehlung meinerseits.

MyXoToD

Also danke erstmal für eure Antworten.
Ich habe das gestern auf die schnelle geschrieben und mir sind die fehlenden Semikolons (Semikolen? :D) nicht auf gefallen, danke für den Hinweis.
Das Problem ist mittlerweile gelöst. Ich habe als erstes dem footer_container das

Code

clear: both;

weggenommen und unten in den main_container ein leeres Div eingefügt, welchem ich

Code

clear: both;

gegeben habe.
Klappt wunderbar, zumindest im FireFox.
Hier mache ich es wie immer, Im FireFox anpassen und wenn die Seite online gehen soll nochmal nen extra style für IE's anlegen und alles was falsch ist korrigieren.

Danke nochmals.

Santos

Tags