zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Content mit DIV passt sich nicht dem Inhalt an

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.01.2012, 21:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2012
Beiträge: 6
Thomas79 befindet sich auf einem aufstrebenden Ast
Standard Content mit DIV passt sich nicht dem Inhalt an

Hallo Community,

ich brauche die Hilfe von Spezialisten. Ich habe eine klassische Seite mit Header, Content und Footer gebastelt. Leider wird der Content-Bereich nicht automatisch dem Inhalt angepasst. D. h. entweder lege ich eine fixe Höhe fest, dann läuft Text der darüber hinausgeht einfach heraus oder ich setze die Höhe auf 100 %, dann "springt" mir der Footer unter den Header. Kann bitte einer mal ein Auge auf den Code werfen und mir sagen, wo der Fehler ist?

Wie es momentan aussieht:



Body-Ausschnitt aus der HTML-File:
HTML-Code:
<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>
               Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>

				</div>
        	</div>
      <div id="footer"> <a href="impressum.htm">Impressum |</a> © Copyright</div>
	</div>
</body>
... und die dazugehörige CSS

HTML-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;
}

#wrapper {
        margin: 10px auto;
        height: 100%;
        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-weight: bold;*/
        /*text-align: center;*/
        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-weight: bold;*/
        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;
        /*padding-left: 10px;*/

}

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#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;
        height: 200px;
}

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;
        /*padding-left: 30px;*/
        float:left;
        width: 500px;
}

div#rightContent p {
		padding-top: 6px;
        padding-bottom: 6px;
}

div#rightContent img {
        /*float: left;
        padding-right: 10px;
        padding-top: 10px;*/
}

div#footer {
        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: auto;
	min-height: 240px;
}

div.impressumleftcol {
	width: 180px;
	float:left;
}

div.impressumrightcol {
	padding: 0;
	padding-left:180px
}
/* Impressum - END*/
Bin schon mal für jede Hilfe dankbar!

Grüsse
Thomas
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.01.2012, 21:34
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.992
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

#content hat eine Höhe von 200 Pixeln. Das Element kann also nicht mitwachsen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.01.2012, 06:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2012
Beiträge: 6
Thomas79 befindet sich auf einem aufstrebenden Ast
Standard

Hallo Praktikant,

die Höhe 200px habe ich nur zu Testzwecken eingetragen! Nun hab ich die Höhe wieder auf 100 % und wie geschildert "rutscht" der Footer wie im nachfolgendem Screenshot hoch.



Danke für weitere Hilfe!

Grüsse
Thomas
Mit Zitat antworten
  #4 (permalink)  
Alt 14.01.2012, 07:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

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;
}
Ein Tipp noch, du solltest deine Dateien mal validieren.


Gruß
Webcoder
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.01.2012, 07:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2012
Beiträge: 6
Thomas79 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 14.01.2012, 07:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

JA, die CSS sieht sehr wüst aus.

Solche Fehler (doppeltes Semikolon)
Code:
div#content {
        background: url(../img/tuerkisVerlauf.gif) #fff;;
führt häufig zu einer falschen Interpretation der nachfolgenden Eigenschaften.
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
  #7 (permalink)  
Alt 14.01.2012, 07:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2012
Beiträge: 6
Thomas79 befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Hinweis (hätte ich wahrscheinlich übersehen). Die Überarbeitung folgt noch.

Eine letzte Frage habe ich allerdings noch. Wieso wird der Rand vom Content-Bereich nicht mit dem Text verlängert.

Momentaner Stand:


Wie gesagt, Content steht auf 100% ?!

Grüsse
Thomas
Mit Zitat antworten
  #8 (permalink)  
Alt 14.01.2012, 08:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Thomas79 Beitrag anzeigen
Wie gesagt, Content steht auf 100% ?!
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.
Mit Zitat antworten
  #9 (permalink)  
Alt 14.01.2012, 09:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.01.2012
Beiträge: 6
Thomas79 befindet sich auf einem aufstrebenden Ast
Standard

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*/
Grüsse
Thomas
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.01.2012, 11:34
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

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>
Das Ganze sieht jedoch sehr nach einer Frickellösung aus und du solltest dich dringend noch einmal mit Grundlagen beschäftigen.
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
container, content, div, überlauf

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
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 14:30
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 16:23
Problem: Ein Div wächst mit dem Inhalt nicht mit (Firefox!). pager CSS 2 30.03.2006 19:03
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 18:57
layout v.o.n.u.: 30px, rest, 30px mit div möglich? docstevie CSS 2 20.02.2005 19:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:43 Uhr.