tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von dreifragezeichen
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
523
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 30.01.11 14:18 #1
    Adan0s Adan0s ist offline Mitglied
    Registriert seit
    Oct 2004
    Beiträge
    15
    Hallo,

    ich habe aktuell ein CSS-Problem mit der Portierung eines Templates auf vBulletin4.

    http://www.adan0s.de/misc/template.png

    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-Code:
    <!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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

    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;
}
     
    Zitieren Zitieren
  2. 30.01.11 16:03 #2
    dreifragezeichen dreifragezeichen ist offline Mitglied Gold
    Registriert seit
    Feb 2006
    Beiträge
    107
    Vielleicht bleibt ja dieses Layout-Konzept nach der vB-Portierung, was es im Titel verspricht:

    Ansonsten das anhängliche vBulletin-Stylesheet vor die Brust nehmen, und ggfs. im vBulletin-Template-Mosaik-Dschungel den Code sondieren, ausmisten
    Geändert von dreifragezeichen (30.01.11 um 16:10 Uhr)
    Adan0s bedankt sich. 
    Zitieren Zitieren
  3. 08.03.11 18:29 #3
    Avatar von DrEvil
    DrEvil DrEvil ist offline Mitglied Gold
    Registriert seit
    Apr 2004
    Beiträge
    101
    Schau dir sonst mal die !important-Regel in SelfHTML an. Vielleicht hilft sie dir.
    Ist sicherlich nicht die sauberste Lösung, aber in deinem Fall vielleicht akzeptabel.
     
    Auch wenn ich wüsste, dass morgen die Welt unterginge, würde ich heute noch einen Apfelbaum pflanzen. - M.L.King -
    Zitieren Zitieren
« Problem im IE mit position:absolute | padding-top in <p> verschiebt <div> »

Ähnliche Themen

  1. Umstrukturierung von Handymenüs
    Von derchris28 im Forum Handy, PDA & mobile Welt
    Antworten: 1
    Letzter Beitrag: 24.02.07, 05:54
  2. Umstrukturierung
    Von Scope im Forum Relationale Datenbanksysteme
    Antworten: 4
    Letzter Beitrag: 06.05.02, 22:50