Toxictype
New member
Jetzt bastel ich schon einige Zeit mit CSS-Templates herum, habe mir für eine Site ein individuelles angefertigt und alles lief...
bis ich den Firefox öffnete...
Ich habe es mit diversen float- und clear-Varianten versucht, aber ich komme nicht weiter. Ich habe mir Links im Netz zu float, clear, after, etc, angesehen, finde aber keinen Ansatzpunkt. Ich hoffe, ihr könnt mir weiterhelfen.
Im IE sieht alles so aus, wie es sein soll.
Ich stelle die test.html + test.css als Code und die Grafiken als Anhang ein!
Das Problem:
Im Firefox bekomme ich das Hintergrundbild einfach nicht zwischen die beiden DIVs "left" und "right". Es wird nach unten geschoben.
HILFÄÄÄ!
test.html:
test.css:
Tox
bis ich den Firefox öffnete...
Ich habe es mit diversen float- und clear-Varianten versucht, aber ich komme nicht weiter. Ich habe mir Links im Netz zu float, clear, after, etc, angesehen, finde aber keinen Ansatzpunkt. Ich hoffe, ihr könnt mir weiterhelfen.
Im IE sieht alles so aus, wie es sein soll.
Ich stelle die test.html + test.css als Code und die Grafiken als Anhang ein!
Das Problem:
Im Firefox bekomme ich das Hintergrundbild einfach nicht zwischen die beiden DIVs "left" und "right". Es wird nach unten geschoben.
HILFÄÄÄ!
test.html:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS - DIVs</title>
<link type="text/css" href="test.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="container_bg">
<div id="container">
<div id="banner">
<div align="center"><img src="gra1.gif"><img src="gra2.gif"><img src="gra3.gif"><img src="gra4.gif"></div>
</div>
<!-- clearen -->
<div style="clear:both;"></div>
<div class="right"> </div>
<!-- end menu right -->
<div class="left"> </div>
<!-- end menu left -->
<div id="content_bild">
<div class="menu"> <a class="font_links" href="#">LINK 1</a> <a class="font_links" href="#">LINK 2</a> <a class="font_links" href="#">LINK 3</a></div>
</div>
<!-- clearen -->
<div style="clear:both;"></div>
<div id="content">Textinhalt</div>
<!-- clearen -->
<div style="clear:both;"></div>
<div id="footer">Links</div>
</div>
<!-- clearen -->
<div style="clear:both;"></div>
</div>
</body>
</html>test.css:
PHP:
body {
background-color : #ffffff;
font-size : 10px;
font-family : Verdana, Arial, SunSans-Regular, Sans-Serif;
padding : 0;
margin : 0;
}
#container_bg {
width : 100%;
margin : 0 auto;
background-image : url(bg.gif);
background-repeat : repeat-x;
/* border: 1pt solid #DFA655; */
}
#container {
width : 825px;
margin : 0 auto;
background-color : #ffffff;
/* border: 1pt solid #80C325; */
}
#banner {
background-color : #ffffff;
padding : 0;
margin : 0;
/* border: 1pt solid #FF00FF; */
}
#content {
padding : 0;
margin : 10px 100px;
width : 625px;
height : 210px;
}
.menu {
margin : 220px 0 0 0;
background-color : #a8a8a8;
border-top : 1pt solid #ffffff;
border-bottom : 1pt solid #ffffff;
width : 100%;
height : 20px;
}
.left {
float : left;
width : 100px;
margin : 0;
padding : 0;
height : 250px;
background-color : #565656;
}
.right {
float : right;
width : 100px;
margin : 0;
padding : 0;
height : 250px;
background-color : #565656;
}
#footer {
color : #ffffff;
clear : both;
margin : 0 100px 0 100px;
text-align : right;
height : 20px;
background-color : #565656;
}
#content_bild {
background-color: #ffffff;
padding: 0;
margin: 0 100px;
background-image: url(start1_250.jpg);
background-repeat: no-repeat;
width: 625px;
height: 250px;
}Tox
Anhänge
Zuletzt bearbeitet:
