Adan0s
Grünschnabel
Hallo,
ich habe aktuell ein CSS-Problem mit der Portierung eines Templates auf vBulletin4.
Der Header soll immer 100% Breite haben, während der Container sich auf 80% zentriert ausbreiten darf. Die Hintergrundverläufe links und rechts habe ich per 10% div realisiert.
Das Problem ist nun, dass vBulletin durch den ganzen CSS-Codematsch die Floats der Verläufe zerschiesst und so der Inhalt im Container komplett falsch sitzt.
Meine Frage ist nun: wie kann man die Hintergrundverläufe links und rechts anders lösen?
Hier mein aktueller Code:
ich habe aktuell ein CSS-Problem mit der Portierung eines Templates auf vBulletin4.
Der Header soll immer 100% Breite haben, während der Container sich auf 80% zentriert ausbreiten darf. Die Hintergrundverläufe links und rechts habe ich per 10% div realisiert.
Das Problem ist nun, dass vBulletin durch den ganzen CSS-Codematsch die Floats der Verläufe zerschiesst und so der Inhalt im Container komplett falsch sitzt.
Meine Frage ist nun: wie kann man die Hintergrundverläufe links und rechts anders lösen?
Hier mein aktueller Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Layout</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="mainlinks"><a href="#">Forum</a></div>
</div>
<div id="nav"><div id="navlinks"><a href="#">cat1</a></div></div>
<div class="main_gradiant" id="left"> </div>
<div class="main_gradiant" id="right"> </div>
<div id="container">container</div>
<div id="footer">footer</div>
</body>
</html>
Code:
html, body {
background: grey url(main_bg.jpg) repeat;
padding: 0;
margin: auto;
height: 100%;
min-width: 700px;
}
#header {
background: black url(head_bg.jpg) repeat-x;
height: 116px;
border-bottom: 1px solid black;
position: relative;
}
#nav {
background-color: #5c1a1a;
height: 20px;
}
.main_gradiant {
background-image: url(main_gradiant.png);
height: 385px;
position: relative;
z-index: 1;
}
.main_gradiant#left {
float:left;
width: 10%;
position: relative;
z-index: 1;
}
.main_gradiant#right {
width: 10%;
float: right;
position: relative;
z-index: 1;
}
#container {
background-color: #565656;
color: #fff;
width: 80%;
margin: auto;
min-height: 385px;
border: 1px solid #000;
position: relative;
z-index: 2;
}
#footer {
background: transparent url(footer_bg.png) repeat-x;
width: 80%;
margin: auto; /* Div soll zentriert werden */
height: 100px;
}
