nicht angemeldet
Bilder werden nicht als Content erfasst
Guten Tag,
ich habe ein Layout mit CSS realisiert. Der Bereich des Content soll sich mit height: 100%; an den Inhalt anpassen und sich dementsprechend verlängern. Das funktioniert auch soweit. Sofern allerdings Bilder ins Spiel kommen, passt sich der Content weiterhin nur an den Text an. Wie kann ich dafür sorgen, dass der Hauptteil sich auch verlängert, wenn Bilder den "Rahmen sprengen"? :(
html {
background: #f1f1f1;
}
body {
font: 10pt georgia;
text-align: justify;
color: #8f8f8f;
position: relative;
width: 800px;
left: auto;
right: auto;
margin: auto;
padding: 5px;
}
a:link { color: #7c7c7c; text-decoration:none; }
a:visited { color: #7c7c7c; text-decoration:none; }
a:hover { color: #676767; text-decoration: underline; }
a:active { color: #7c7c7c; text-decoration: none; }
h1, h2 {
font-weight: bold;
border-bottom: 1px solid #999;
width: 730px;
}
h3 {
font-weight: bold;
border-bottom: 1px solid #999;
width: 300px;
}
img {
margin: 10px;
margin-top: 5px;
margin-bottom: 0px;
}
/* --- SPECIAL DIVS --- */
/* header (logo, aktuell), navigation, content, footer */
container {
background: #ff0000;
padding: 0px;
position: absolute;
}
#head {
background: url(head.png) repeat-y;
width: 100%;
height: 100%;
padding: 5px 20px 5px 20px;
}
#header {
background: url(content.png) repeat-y;
width: 100%;
height: 100%;
padding: 5px 30px 0px 20px;
}
#aktuell {
background: #ebebeb;
width: 300px;
height: 150px;
margin-right: 40px;
padding: 0px 5px 5px 5px;
float: right;
border:1px solid #ebebeb;
-moz-border-radius:10px;
-khtml-border-radius:10px;
}
#middle {
width: 100%;
float: left;
padding: 5px 0px 0px 20px
}
#content {
background: url(content.png) repeat-y;
width: 100%;
height: 100%;
z-index: 1;
}
#inhalt {
background: #fff;
width: 750px;
height: 100%;
margin-left: 30px;
padding: 30px 0px 0px 0px;
}
#footer {
background: url(footer.png) no-repeat;
width: 100%;
height: 100%;
padding: 5px 20px 5px 20px;
}
/* --- NAVIGATION --- */
ul#Navigation {
margin: 0; padding: 5px;
text-align: center;
background: #a0ca78;
width: 748px;
height: 20px;
margin-right: 40px;
padding: 5px;
float: left;
border:1px solid #ebebeb;
-moz-border-radius:10px;
-khtml-border-radius:10px;
}
ul#Navigation li {
list-style: none;
float: left;
position: relative;
margin: 0; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 9.2em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
font-weight: bold;
background-color: #a0ca78;
color: #676767;
text-decoration: none;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9.2em; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 7em; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
color: #676767; background-color: #a0ca78;
}
-
Guten Tag,
Die Seite kenn ich doch? Es hilft dir nicht mit einem anderen Namen das selbe Problem zu beschreiben. Streng genommen ist das jetzt kein Doppelpost, sondern ein dreifachpost.
Warum machst du schon wieder ein Thread auf?
-
Guten Tag,
Mein Fehler sorry. Das ist doch was anderes :)
-
-
Guten Tag,
Ich seh das so:
Du gibst dem body ein width 800px.
Dem Content 100% = 800px;
Text darin macht den "Content" max.800px breit bevor er umbricht.
Eine Grafik die grö0er 800px ist kann den Content somit nicht größer machen als er darf.-
Guten Tag,
Jetzt fällt mir auf das du von height sprichst. Dann kann ich das grad nicht nachvollziehen. Denn wenn ich eine Grafik in den Content lege dann verlängert der sich nach unten. Was meinst du mit "Bild das den Rahmen sprengt"? Und in welchen Browser tritt das Problem auf?
-
-
Om nah hoo pez nyeetz, extra007!
ich habe ein Layout mit CSS realisiert. Der Bereich des Content soll sich mit height: 100%; an den Inhalt anpassen und sich dementsprechend verlängern.
Der Bereich des Content sollte sich auch ohne height: 100%; an den Inhalt anpassen, es sei denn der Inhalt oder Teile des Inhaltes wurden aus dem Fluss genommen.
Dein height: 100% für das Div Content hat im übrigen überhaupt keine Wirkung, es sorgt dafür, dass es so hoch wird, wie das Div Container. Dies wiederum ist so hoch, wie sein Inhalt es erfordert.
Ebenso hast du für das Div header eine Höhe von 100% angegeben. Das ist bestimmt nicht gewollt und so sei froh, dass diese Angabe nicht umgesetzt wird.
Zudem hast du zwar nicht gerade eine Div-Suppe, aber dennoch ein Süppchen. Versuche, semantischere Elemente zu finden.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, extra007!
ich habe ein Layout mit CSS realisiert. Der Bereich des Content soll sich mit height: 100%; an den Inhalt anpassen und sich dementsprechend verlängern.
Ich glaub nun verstanden zu haben was er haben möchte. Da wie du richtig sagst das height:100% sinnfrei ist an der Stelle. Und wenn Text oder eine Grafik eingesetzt wird wird der Content richtig verlängert.
ABER: Ich denke sein Problem liegt darin, dass er ein background-image in den Content legen möchte mit 100% height und sich wundert warum das Div sich nicht vergrößert.
DENN: Alles andere funktioniert ja.
-