Danke an alle!
Ich konnte das Problem mit Forumhilfe lösen!
Beiträge von Sabine-Imhof
-
-
Hallo,
hab ich versucht über color und background-color, macht er nicht. Weder Firefox noch IE, zeigen beide die body-Farbe.Gruss
-
Danke aber ich wollte den Header weiss lassen. Da sollte ein weisses Logo rein, das optisch mit dem Hintergrund verschmilzt.
-
Guten Tag,
ich bin ein Neuling, habe mich intensiv in CSS eingelesen und versucht meine erste einfache Homepage zu erstellen.
Mein Problem ist, dass mir kein passender CSS-Code gelingt, der den Contenthintergrund meiner Page über die gesamte Seitenhöhe darstellt.
Ich habe einen fixen Footer erstellt, der auch richtig angezeigt wird im Browser aber zwischen Content und Footer klafft bei wenig Inhalt ein unschöner weisser Bereich, die ich gerne mit der Hintergrundfarbe des Inhalts gefüllt hätte.
Wie bekomme ich den Content (#content_wrapper) dazu, dass er mit seiner Hintergrundfarbe die ganze Höhe der Seite ausfüllt, auch wenn der Inhalt nicht bis nach unten zum Footer reicht?
Ich hoffe, es erbarmt sich jemand.Gruss
Sabine[TABLE='width: 500']
[tr][td]Der HTML-Code lautet:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<link href="styles/se_page.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="wrapper">
<div id="header">
<div id="header_text">Ueberschrift</div>
<div id="slogan_shadow">
<div id="slogan">Unter-Ueberschrift</div>
</div>
</div>
<div id="content_wrapper">
<div id="content_block">
<div id="content">
<h3>Inhalt</h3>
</div>
<div id="side_bar">
<ul class="sidemenu">
<li><a href="#" class="active_sidemenu">Navigation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">NavigatioN</a></li>
</ul>
</div></div>
[/td][/tr][tr][td]
</div>
<div id="footer">
<p>Footertext</p>
</div>
</div>
</body>
</html>CSS:
html, body {
height: 100%;
}body {
margin:0;
padding:0;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
color: #333333;
}/* Ueberschriften */
h1 {
font-size: 2em;
margin-top: .5em;
margin-bottom: 1em;
margin-left: 15px;
}
h2 {
font-size: 1.7em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 15px;
}
h3 {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 15px;
font-size: 1.5em;
text-decoration:normal;
}
h4 {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 15px;
font-size: 1.5em;
text-decoration:normal;
}/* Links */
a {
text-decoration:none;
font-variant:normal;
color: #996699;
margin:0;
padding:0;
}
a:hover {
color: #ffcccc;
text-decoration: underline;
}/* Paragrapheneinstellung */
p {
margin:0;
padding:0;
}/* Listeneinstellung */
ul {
list-style-type: disc;
list-style-image: url(../images/bullet.png;
}
ol {
list-style-type:decimal-leading-zero;
}
li {
line-height: 1em;
}/* Wrapper ganzer Content*/
* html #wrapper {
height: 100%;
}#wrapper {
margin: 0 auto;
position: relative;
min-hight:100%;
height:auto !important;
}/* Header */
#header {
background-attachment: scroll;
background-image: url(../images/gesichter.jpg);
background-repeat: no-repeat;
background-position: center right;
min-height: 139px;
height: 139px;
}
#header_text {
display: block;
font-size: 3em;
font-variant: normal;
color: #333333;
padding-top: .6em;
margin-left: 25px;
}
#header #slogan_shadow {
font-size:1.3em;
color: #FFFFFF;
margin-top:0;
clear:both;
margin-left:25px;
line-height:1em;
}
#header #slogan {
color: #666666;
position: relative;
top: -20px;
left: 1px;
}/* Content Wrapper */
#content_wrapper {
clear:both;
float:left;
background-color: #e9e3de;
min-width: 100%;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #666666;
height: 100%;
}
/* Enstellung Content 800 pixel */
#content_block {
width: 800px;
margin: 0 auto;
position:relative;
}/* Side bar */
#side_bar {
float: left;
width: 190px;
margin-top: 50px;
}/* content div stil*/
#content {
margin-left:10px;
float:right;
width:590px;
}/* Stile Sidemenue navigation */
.sidemenu {
margin:0;
margin-bottom:1em;
margin-top:1.5em;
padding:0;
list-style-type: none;
list-style-image:none;
}
.sidemenu a {
width: 180px;
display: block;
line-height: 1.6em;
font-size: 1.1em;
text-transform:uppercase;
padding-left:10px;
background-color: #e9e3de;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #666666;
}
#side_bar .sidemenu a:hover {
text-decoration:none;
background-color: #F0E3DA;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #996699;
border-bottom-color: #CCCCCC;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #996699;
}
#side_bar .active_sidemenu {
border-right-width: 3px;
border-right-style: solid;
border-right-color: #996699;
border-bottom-color: #996699;
border-bottom-style: solid;
border-bottom-width: 1px;
}/* Stile fuer content paragraphs */
#content p {
text-align:justify;
line-height:1.3em;
margin-bottom: 1em;
padding-left: 10px;
padding-right: 10px;
}
#content li {
font-size:1.1em;
margin-left:25px;
color:#000;
list-style-type: circle;
}/* Bildelemente rechts */
#rechts {
float:right;
width: 260px;
height: 130px;
margin-left: 10px;
margin-right: 10px;
}/* Footer */
[/td][/tr]
#footer {
position: fixed;
padding: 10px;
bottom: 0;
left: 0;
right: 0;
background-color: #666666;
color: #e9e3de;
text-align:center;
font-size:.-2em;
font-variant:normal;
}
#footer a:hover {
color: #F0E3DA;
text-decoration:none;
}
[/TABLE]