✔ Footer Background in FF nicht sichtbar
- Themenstarter selle1
- Beginndatum
- Status
Versuchs mal so:
Code:
#footer-wrap {
clear: both;
color: #FFF;
margin: 0 auto;
padding: 0;
font-size: 88%;
background-image: url('./bg-bot.gif');
}Ich hab das ganze jetzt mal veruscht nachzustellen, was mir leidern icht gelungen ist.
Ist das Bild auch wirklich im selben Verzeichnis wie das HTML Dokument? Wenn das Ding auf einem Linux Server liegt, dann ist normalerweise die Groß- / Kleinschreibung wichtig.
Hier mal mein Beispiel:
Bei mir geht es.
Ist das Bild auch wirklich im selben Verzeichnis wie das HTML Dokument? Wenn das Ding auf einem Linux Server liegt, dann ist normalerweise die Groß- / Kleinschreibung wichtig.
Hier mal mein Beispiel:
HTML:
<html>
<head>
<style type="text/css">
#footer-wrap {
clear: both;
color: #FFF;
margin: 0 auto;
padding: 0;
font-size: 88%;
background-image: url('./bg-bot.gif');
}
</style>
</head>
<body>
<div id="footer-wrap">
Test
</div>
</body>
</html>Bei mir geht es.
selle1
Erfahrenes Mitglied
Hallo ,
HIER
und anbei das Stylesheet:
HIER
und anbei das Stylesheet:
HTML:
/********************************************
HTML ELEMENTS
********************************************/
/* top elements */
* {
padding: 0; margin: 0;
}
body {
margin: 0; padding: 0;
font: normal .70em/1.6em Verdana, Tahoma, sans-serif;
color: #BDBDBD;
background: #385A96;
text-align: center;
}
/* links */
a {
color: #FFF;
text-decoration: none;
}
a:hover {
color: #FFF;
text-decoration: underline;
}
/* headers */
h1, h2, h3 {
font: normal 1.3em 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
}
h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; text-transform:uppercase; font-weight: bold;}
h3 { font-size: 1.3em; font-weight: bold; }
p, h1, h2, h3 {
margin: 0;
padding: 10px 15px;
}
ul, ol {
margin: 10px 30px;
padding: 0 15px;
color: #FFF;
}
/* images */
img {
border: 3px solid #555;
}
img.no-border {
border: none;
}
img.float-right {
margin: 5px 0px 5px 15px;
}
img.float-left {
margin: 5px 15px 5px 0px;
}
a img {
border: 3px solid #555;
}
a:hover img {
border: 3px solid #CCC !important; /* IE fix*/
border: 3px solid #555;
}
code {
margin: 5px 0;
padding: 10px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
/* white-space: pre; */
background: #0A1646;
}
acronym {
cursor: help;
border-bottom: 1px solid #777;
}
blockquote {
margin: 15px;
padding: 0 0 0 20px;
background: #0A1646;
font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;
}
/* form elements */
form {
margin: 10px 15px;
padding: 0;
background: #0A1646;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border:1px solid #eee;
font: normal 1em Verdana, sans-serif;
color:#777;
}
textarea {
width: 250px;
padding:2px;
font: normal 1em Verdana, sans-serif;
border:1px solid #eee;
height:100px;
display:block;
}
input.button {
margin: 0;
font: bold 1em Arial, Sans-serif;
border: 1px solid #CCC;
background: #FFF;
padding: 2px 3px;
color: #333;
}
/***********************
LAYOUT
************************/
#wrap {
margin: 0px auto 0 auto;
text-align: left;
}
#wrap, #footer-wrap {
width: 1100px;
}
/* header */
#header {
position: relative;
text-align: right;
height: 250px;
background-image: url(index.jpg);
}
#header h1#logo {
position: absolute;
top: 50px;
left: 20px;
margin: 0;
padding: 0;
font: bolder 50px 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
visibility: visible;
}
#header h2#slogan {
position: absolute;
top: 50px; left: 65px;
color: #FFF;
text-indent: 0px;
font: bold 12px Tahoma, 'Trebuchet MS', Sans-serif;
text-transform: none;
}
/* content-wrap */
#content-wrap {
clear: both;
margin: 0px; padding: 0;
background: #385A96 url(../../images/bg-mid.gif) repeat-x 100% 0%;
}
/* box */
.box {
margin: 0px 15px;
border: 1px solid #0A1646;
background-color: #1B2455;
}
/* main */
#main {
margin: 0px 15px 0 270px;
padding-top: 40px;
}
#main .box {
margin-left: 0;
}
/* sidebar */
#sidebar {
float: left;
width: 220px;
height: 500px;
margin-left: 150px;
padding-top: 20px;
}
#sidebar ul.sidemenu {
margin: 0 0 0 15px; padding: 0;
}
#sidebar ul.sidemenu li {
display: inline;
list-style: none;
}
#sidebar ul.sidemenu li a {
display: block;
padding: 5px 10px 5px 15px;
text-decoration: none;
color: #CCC;
font-weight: bold;
}
#sidebar ul.sidemenu li a:hover {
color: #FFCC33;
}
/* Footer */
#footer-wrap {
clear: both;
color: #FFF;
margin: 0px auto 20px auto;
padding: 0;
font-size: 88%;
background-image: url(bg-bot.gif);
}
#footer-wrap a {
text-decoration: none;
font-weight: bold;
color: #FFF;
}
#footer-wrap .footer-left{
float: left;
width: 65%;
padding-bottom: 20px;
}
#footer-wrap .footer-right{
float: right;
width: 30%;
padding-bottom: 20px;
}
/* menu tabs */
#header ul {
position: absolute;
top: 20px; right: 20px;
margin:0; padding: 0;
list-style:none;
font: bold 1.3em 'Trebuchet MS', Tahoma, verdana, sans-serif;
height: 2.3em;
}
#header li {
display:inline;
margin:0; padding:0;
}
#header a {
float: left;
margin:0;
padding:3px 10px 2px 10px;
text-decoration:none;
color: #CCC;
}
#header a:hover {
border-top: 5px solid #CCC;
}
#header #current a {
color: #FFF;
border-top: 5px solid #FFF;
}
/* end menu tabs */
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* additional classes */
.clear { clear: both; }
.gray { color: #A0A0A0; }
.yellow { color: #FFCC33;}
.comments {
text-align: right;
padding: 7px 15px;
margin: 20px 15px 15px 15px;
background: #0A1646;
}
M
Maik
Hi,
richte mal für das DIV #footer-wrap entsprechend des Hintergrundbildes eine Höhe ein:
richte mal für das DIV #footer-wrap entsprechend des Hintergrundbildes eine Höhe ein:
Code:
#footer-wrap {
clear: both;
color: #FFF;
margin: 0 auto;
padding: 0;
font-size: 88%;
background-image: url(bg-bot.gif);
height:65px;
}
- Status
