Sponsored Links |
|
|||
|
|
|||
Hi Thomas79
deinem footer fehlt die Eigenschaft (clear) damit er unterhalb des Inhalts beginnt. Code:
div#footer { clear:both; background: #313c48; width: 842px; padding: 5px; height: 20px; } Gruß Webcoder
__________________
Websites erstellen ist ein Hobby von mir. |
|
|||
Hallo Webcoder,
vielen DANK, das Attribut hat gefehlt! Welche Dateien sollte ich deiner Meinung nach überprüfen? Meinst du die CSS? Da hab ich gestern viel herumgespielt und muss zugegebenerweise mal aufräumen ... Grüsse Thomas |
|
|||
JA, die CSS sieht sehr wüst aus.
Solche Fehler (doppeltes Semikolon) Code:
div#content { background: url(../img/tuerkisVerlauf.gif) #fff;;
__________________
Websites erstellen ist ein Hobby von mir. |
|
|||
|
|
|||
100% von was?
Höhenangaben sind eigentlich überflüssig, gerade die Prozentualen. Wenn 100% die Fensterhöhe ist, dann wäre deine Div bei einem 120% hohen Inhalt um 20% zu kurz, oder? Also ändere mal die Höhe in eine Mindesthöhe (min-height:100%) oder lasse sie gleich ganz weg. Ansonsten müsstest du die Höhe vom Body her durchgehend angeben, wenn ich mich recht entsinne.
__________________
Websites erstellen ist ein Hobby von mir. |
|
|||
Sorry für die weitere Belästigung
Height: 100% Wenn ich die Höhenangabe in einem prozentualen Wert (min-height oder height = 100%) angebe, funktioniert der Verlauf nicht mehr: Sobald ich einen festen Werte (z. B. 350) angebe, funktioniert der Verlauf, allerdings sind die Ränder zum Teil nicht durchgezogen und in Bezug auf Flexibilität ist das Ergebnis bzw. diese Vorgehensweise unbrauchbar. Momentan schaut die CSS wie folgt aus: Code:
/* Start - CSS Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; background: #fff; /*background: #c4e6eb;*/ } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { color: #000; text-decoration: none; } /* End - CSS Reset*/ h3 { font-size: 14px; font-weight: bold; } body { margin: 0; padding: 0; height: 100%; } #wrapper { margin: 10px auto; height: auto; width: 850px; padding: 5px; } div#header { border-top: 1px solid #fff; border-left: 1px solid #313c48; border-right: 1px solid #313c48; background:url(../img/header_home_logo.jpg) #313c48; background-position:bottom; background-repeat:no-repeat; height: 191px; width: 840px; padding: 5px; padding-top: 0; border-bottom: 1px solid #313c48; } div#header p{ color: #fff; } div.whiteBox { border: 1px solid #313c48; background: #fff; width: 180px; margin-left: 42px; padding-left: 15px; padding-bottom:5px; float: left; } div.whiteBox p { color: #000000 !important; font-size: 26px; padding-left: 10px; padding-top: 9px; } div.whiteBox ul { padding-top: 10px; } div.whiteBox ul li { padding-top: 10px; padding-left: 10px; font-size: 10px; } div.whiteBox ul li a:hover { color: #9dd0d0; } div.headerTitle { /*width: 220px;*/ /*float: left;*/ } div.headerTitle p { font-size: 26px; padding-top: 8px; padding-lefT: 15px; width: 220px; float: left; } div.headerNavi { padding-top: 10px; float:right; } div.headerNavi ul { padding-top: 8px; padding-right: 10px; } div.headerNavi ul li { display: inline; font-size: 12px; color: #fff; } div.headerNavi ul li a { color: #fff; } div.headerNavi ul li a:hover { color: #9dd0d0; } div.overlay { width: 180px; margin-left: 50px; margin-top: 73px; text-align: center; } div.overlay h1{ font-size: 14px; font-weight: normal; padding-bottom:3px } div.overlay h2{ font-size: 17px; font-weight: normal; padding-bottom:15px } div.navileft { border: 1px solid #313c48; background: #fff; width: 180px; margin-left: 42px; padding-left: 15px; padding-bottom:5px; float: left; } div.navileft p{ color: #000000 !important; font-size: 26px; padding-left: 10px; padding-top: 9px; } div.navileft a{ padding-top: 10px; font-size: 10px; } div#content { background: url(../img/tuerkisVerlauf.gif) #fff; background-position: top; background-repeat: repeat-x; width: 840px; padding: 5px; border-left: 1px solid #313c48; border-right: 1px solid #313c48; /*min-height: 100%;*/ } div#content h1 { font-size: 18px; padding-bottom: 10px; } div#content p { font-size: 12px; line-height: 18px; } div#leftContent { float:left; width: 285px; margin-top: -30px; } div#leftContent div.whiteBox { width: 180px; background: url(../img/grauVerlauf.gif) #fff; background-position: bottom; background-repeat: repeat-x; } div#leftContent div.whiteBox p { padding-top: 5px; font-size: 14px; font-weight: bold; } div#leftContent div.whiteBox ul { padding-bottom: 10px; } div#leftContent div.whiteBox ul li{ border-bottom: 1px solid #3572a1; padding-bottom: 5px; margin-right: 15px; } div#rightContent { padding-top: 30px; float:left; width: 500px; } div#rightContent p { padding-top: 6px; padding-bottom: 6px; } div#rightContent b { font-weight:bold;} div#rightContent img { /*float: left; padding-right: 10px; padding-top: 10px;*/ } div#footer { clear: both; background: #313c48; width: 842px; padding: 5px; height: 20px; } div#footer p { color: #fff; font-size: 11px; text-align:center; padding-top: 5px; } div#footer a { color: #fff; font-size: 11px; text-align:center; padding-top: 5px; } /* Impressum - START*/ div.impressum { padding-top: 20px; height: 100%; ; } div.impressumleftcol { width: 180px; float:left; } div.impressumrightcol { padding: 0; padding-left:180px } /* Impressum - END*/ Thomas |
Sponsored Links |
|
|||
Ehrlich gesagt helfen deine Bilder und "nur" der Quelltext nicht wirklich weiter, besser wäre die ganze Seite mal online zu stellen.
Soweit ich das überblicke, ist der footer kein Unterelement von content, dies führt dazu das content selbst keine höhe hat. Wenn du also footer in content verschiebst, oder ein leeres div mit der Eigenschaft clear einfügst sollte es klappen. Lösung footer verschieben: HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Grundstruktur in CSS</title> </head> <body> <div id="wrapper"> <div id="header"> <div class="whiteBox"></div> <div class="headerTitle"></div> <div class="headerNavi"></div> </div> <div id="content"> <div id="rightContent"> <h1>Home</h1> <p>Test<br> Test<br> ... Test<br> Test</p> </div> <div id="footer"> <a href="impressum.htm">Impressum |</a> © Copyright</div> </div> </div> </body> </html>
__________________
Websites erstellen ist ein Hobby von mir. |
Sponsored Links |
Stichwörter |
container, content, div, überlauf |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
Problem mit position:relative; | McCoRmIcK | CSS | 0 | 08.04.2007 17:23 |
Problem: Ein Div wächst mit dem Inhalt nicht mit (Firefox!). | pager | CSS | 2 | 30.03.2006 20:03 |
dreispaltiges layout, footer soll immer mitwandern | sirrpa | CSS | 14 | 24.11.2005 19:57 |
layout v.o.n.u.: 30px, rest, 30px mit div möglich? | docstevie | CSS | 2 | 20.02.2005 20:58 |