|
|||
Hintergrundfarbe bis zum Boden
Hallo Leute,
ich habe ein grundsätzliches CSS Problem. Ich habe schon gesucht und gemerkt, dass es eine einfache Lösung dafür nicht zu geben scheint. Ich habe ein dreispaltiges Layout. Diese drei Spalten befinden sich in einem Hauptcontainer, der mir ein mittiges Layout sichern soll. Also einen Hintergrund der per body Tag generiert wird und darauf die eigentliche Webseite, die ca. 670 Pixel breit ist. Innerhalb dieser Breite befindet sich das dreispaltige Layout. Das Problem. Die linke Spalte hat eine andere Hintergrundfarbe, als der body Hintergrund. Diese Farbe wird aber nur bis zum Ende des Content (ein Menü) geführt. Danach kommt die Grundhintergrundfarbe wieder zum Vorschein. Sieht voll blöd aus. Zu sehen ist das hier: http://www.dsl-user.de Komischerweise funzt es mit dem IE. Also mal mit dem Firefox anschauen. Könnt ihr mir einen Tip geben? Danke! |
Sponsored Links |
|
|||
ist zwar gerade nicht relevant... aber statt
Code:
<body bgcolor="#FFFFFF"> Code:
<body> Code:
body {background:#fff;} height:800px; |
Sponsored Links |
|
|||
http://www.alistapart.com/articles/fauxcolumns
Zitat:
|
|
|||
Hallo Leute,
erstmal danke für Eure Tips. Klappt aber alles nicht. Ich habe nun gesehen, dass der Hauptcontainer nur bis unter den orangen Streifen geht. Dort hört er beim Firefox einfach auf. Ich kapier das nicht. Im IE geht er brav bis unten an den Rand. Versteht das jemand??? |
|
||||
Validier auch mal Deine Fehler (head abschliessen!) - vielleicht hängt es ja auch damit zusammen?
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
|||
Keine Kontrolle über Code
Hi,
ich hab' mir mal deinen Quelltext und -2- von den -3- (!) eingebundenen CSS-Dateien angeschaut. Ich kenne TYPO3 nicht, glaube aber, dass dieses CMS den Code generiert und du nur bedingt Kontrolle darüber ausüben kannst. Um den Fehler zu beheben müsste man sich tief in die Innereien von TYPO3 begeben oder die CSS-Dateien aufwändig prüfen und anpassen ... Mein Tipp: Erstelle dein Layout zunächst außerhalb deines CMS (brücksichtige dabei die Hinweise der bisherigen Antworten) und binde dann die CSS-Datei in dein CMS ein. Gruß Matti |
|
||||
Es kann eigentlich nur so sein, dass Du Dein DIV für den umgebenden Container zu früh geschlossen hast!
Dein Quelltext ist allerdings aufgrund seiner Breite und seiner vielen Kommentare sehr schwer zu verfolgen - da solltest Du in eigenem Interesse mal nachbessern!
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
|||
Zitat:
Code:
body { height: 100%; margin: 0; padding: 0; background: #0B1B58; color: #FFF; font: normal 12px verdana, geneva, arial, helvetica, sans-serif; } #container { width:760px;margin:0px auto;text-align:left;background-color:#1C3651; background: url(/fileadmin/assets/templates/main/res/backgroundpic.gif); background-repeat:repeat-y; border: 5pt solid #0000ff; } #header { height: 60px; width: 100%; margin: 0; border: 0; padding: 0; } #logo { float: left; width: 269px; margin: 5px; border: 0; padding: 0; } /* Platz fuer Werbung */ #werbung { float: left; background-color: #1C3651; height: 100%; } /* Headermenu */ #headermenu { float: left; width: 100%; height: 20px; padding: 3px 0 0 0; background-color: #F90; text-align: left; } #headermenu A { padding-right: 15px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; background-color: #F90; color:white; font-weight: bold; } #headermenu A:hover { text-decoration: underline; background-color: #F90; color:navy; } #leftbox { float: left; background: url(/fileadmin/assets/templates/main/res/background180.gif); background-repeat:repeat-y; border: 5pt solid #0000ff; padding: 0px; margin: 0px 0px 0px 0px; padding: 20px 0 0 0; margin: 0; border: 0; color: white; width: 180px; } #menu1 { width: 100%; margin: 0; border: 0; padding: 0; } #content { float: left; background: url(/fileadmin/assets/templates/main/res/backgroundpic.gif); background-repeat:repeat-y; width: 550px; margin: 0; height: 100% border: 0; padding: 10px; } #footer { float: left; width: 100%; height: 20px; background-color: #069; color: white; } Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Base template, header, menu, content and footer. </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="res/layout.css" type="text/css" media="screen" /> <link rel="stylesheet" href="res/content.css" type="text/css" media="screen" /> </head> <body> <div id="container"> <div id="header"> <div id="logo">logo</div> <div id="werbung"> Tag für Werbung </p> </div> </div> <div id="headermenu"> headermenu</p> </div> <div id="leftbox"> <div id="menu1"> <ul class="menu1-level1"> <li class="menu1-level1-no">Menu item 1 <li class="menu1-level1-no">Menu item 2 <li class="menu1-level1-act">Menu item 3 (act) <ul class="menu1-level2"> <li class="menu1-level2-no">Menu item 4 <li class="menu1-level2-act">Menu item 5 (act) [/list] <li class="menu1-level1-no">Menu item 6 [/list] </div> </div> <div id="content"> content</p> </div> <div id="footer"> dsl-user.de 2005</p> </div> </div> </body> </html> |
Sponsored Links |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
preg_replace treibt mich in den Wahnsinn | olik | Serveradministration und serverseitige Scripte | 14 | 30.03.2009 15:30 |
DIV bis GANZ unten | burnZ | CSS | 5 | 27.07.2008 14:14 |
Hintergrundfarbe eines aktivierten Links | fidel | CSS | 5 | 15.06.2006 03:18 |
css div container bis zum boden strecken | hyperterminal | CSS | 5 | 14.05.2005 11:28 |
Box bis ganz an den Boden | Zwacky | CSS | 4 | 01.01.2005 19:51 |