Css Problem

Internet
1

Hallo zusammen,

ich habe heute versucht, allein mit einem Editor und einem Bildbearbeitungsprogramm meine Homepage neu zu desigenen und bin schon mal mächtig stolz.

Allerdings habe ich irgendwo einen Fehler, da der Textbereich über das Layout der Seite herausschwappt.

Das Layout besteht aus drei Grafiken die ich in einer CSS Datei in drei Container gefasst habe, leider weiß ich auch nicht die Option, damit die mittlere Grafik mit der Seite mitwächst. Die Option:
height: repeat;
ist wohl falsch :frowning: und vieleicht ist mein problem dait schon behoben.

Zu sehen: http://www.focusing-beratung.de/hp/layout.html

CSS:

#container {
width: 713px;
border: 0px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#container {
font-family: Helvatica, "Trebuchet MS", Geneva, Arial, SunSans-Regular, sans-serif;
}
#banner {
background:#fff url(images/kopf.jpg);
padding: 0px;
margin: 0px;
height: 169px;
}
#content {
background:#fff url(images/koerper.jpg);
padding: 30px;
margin: 0px;
height: repeat;
}
#footer {
background:#fff url(images/footer.jpg);
padding: 0px;
margin: 0px;
height: 52px;
}
/\* Formatierungen Navigation \*/
#nav ul li a{
 text-decoration:none;
 color:#666;
}
#nav ul li a:hover{
color:#000;
}
/\* Formatierungen Textfeld\*/
#text{
float: right;
width: 450px;
padding: 0px 0px;
font-size:1.2em;
color:#000;
background-color:#f7f7f7;
border:1px dashed #666;
margin:0px 0px;
padding:5px 5px;
}

danke und Grüße Andreas

2

Hallo,

da Du das div, in dem dein Text ist, als float: right definiert hast, wird es im document flow ganz nach rechts geschoben und erlaubt anderen Elementen, links davon vorbei zu „fließen“. Die einfachste und auch browserunabhängige Lösung dafür wäre, nach diesem div ein
einzufügen. Das ist zwar semantisch nicht so ganz korrekt, aber dafür pragmatisch und effektiv.

Mit Elementen, die als float definiert werden, muss man aufpassen und sie meistens von Hand „clearen“, das heißt ein Element folgen lassen, dass das clear-property gesetzt hat.

Daniel

3

Hallo Daniel,

danke für den Tipp, aber wenn ich

einfüge, dann wird der float Befehl ignoriert und es setzt mir text und Menü untereinander. Allerdings wie gewünscht komplett in die Grafik.

Grüße Andreas

4

Hallo,

füge es als letztes Element in dein #content-div ein, dann geht das. Ich hatte nicht genau hingesehen und gedacht, du hättest das #text-div nach dem #nav-div.

Daniel

5

Hallo Daniel,

vielen Dank es hat funktioniert :smile:

Viele Grüße Andreas