Inhalt "reißt" Lücke in den Content-Bereich

marco563

Hallo und frohe Ostern!

Ich weiß überhaupt nicht richtig wie ich das Problem beschrieben soll, deshalb wusste ich auch nicht wirklich wie ich mir Google zur Hilfe machen sollte. Ich hoffe ihr könnt mir helfen.

Also: mein Layout besteht aus einem Content- bzw. Hauptbereich und einer Sidebar (rechts). Der Hintergrund dieser Bereich ist einfach und schlicht weiß.
Wenn ich in den Content-Bereich oder die Sidebar irgendetwas schreibe, verschwindet der weiße Hintergrund plötzlich und das Hintergrundbild der Seite wird sichtbar, besser gesagt es wiederholt sich.

Ich weiß einfach nicht woran das liegt. Vielleicht kann mir ja jemand von euch helfen.

Link zur Seite: http://schnell.sp02.ab-webspace.de/fspdesign/

Den Quelltext habt ihr ja dann auch direkt. Hier noch die style.css.

Code

* {
margin:0;
padding:0;
background-image: url(img/hintergrund.png);
}

html,body{margin:0;padding:0;}


#wrap {
width:737px;
height: 100%;
margin:38px auto;
background-color:#ffffff;
float:left;
}


#header {
width:735px;
height: 96px;
margin:0 auto;
background-image:url(img/header.png);
border-left:1px solid;
border-right:1px solid;
border-top:1px solid;
}


#navi {
width:735px;
height: 33px;
margin:0 auto;
background-image:url(img/navibg.png);
}

#subnavi {
width:735px;
height: 22px;
margin:0 auto;
background-image:url(img/subnavibg.png);
}


#main {
width:735px;
height: 760px;
margin:0 auto;
background-image: url(img/contentmiddle.png);
float: left;
}


#sidebar {
width:200px;
float:right;
background-color:#ccc;
clear: both;
}


#content {
margin-right:220px;
width:500px;
float: left;
clear: both;
}

#footer {
background-color: #fff;
clear:left;
}

Alles anzeigen

Danke schon mal und einen schönen Ostersonntag noch.

Grevas

Ohje... Dein CSS ist wirklich wirr.

Versuchs mal so:

HTML

#content  {
padding-top: 30px;
margin-right: 1px;
/* ja hier kommt sonst nichts rein! */
}
#main {
...
width: 736px; /* Die Grafik ist nämlich so breit - wobei die überhaupt kein Sinn hat *rolleyes* */
}
#sidebar {
...
margin-right: 1px;
}

Alles anzeigen

Den clear machst du vor dem Footer - oder gar nicht. In dem Fall sollte es unnötig sien.

marco563

Danke, aber jetzt ist die Lücke noch größer :D.

Stimmt, eigentlich macht die Grafik da keinen Sinn, allerdings wollte "background-color" nicht funktionieren.

Gruß,
Marco

Grevas

Es gibt keine "Lücke", dein Hintergrund ist weiß - also? Kannst dem Content auch noch die entsprechende Höhe geben. ( 730px )

/P.S. Klar hat background-color nicht funktioniert. Du hast auch * { background-image } ... Du gibst also allen Elementen diesen Hintergrund -> dann brauchst dich nicht wundern, dass deine Farbe nicht angezeigt wird *rolleyes*

marco563

Ja, der Hintergrund des Content-Bereichs ist weiß, aber da wo eigentlich der Text stehen sollte, verschwindet eben dieser und der Rasen im Hintergrund wird sichtbar. Eigentlich sollte es da ja auch "weiß sein".

Grevas

Nicht nach deiner CSS Anweisung! Du hast ALLEN Elementen diesen Hintergrund verpasst, auch #content . Ich empfehle dir diesen Hintergrund richtig einzubetten, wenn du zu faul bist mach halt #content { background-image: none; }

marco563

Danke, jetzt klappt's. Habe ich gar nicht gemerkt, dass ich das allgemein angegeben habe.

Vielen Dank! Ich wünsche dir noch schöne Feiertage.

Tags