|
|||
Content verschiebt sich Header nicht.
Hi Leute,
ich habe folgendes Problem: Ich habe eine Header Grafik und einen Contentbereich. Außerdem habe ich eine Hinweisbox definiert. Wenn die Hinweisbox aktiv ist, dann rutscht der Content nach unten aber nicht der Header. Ich bin nun am Ende mit meinem Latein. Bitte helft mir. Hir mal das Css: Code:
/*Als erstes wird das Fenster definiert, dass erscheint, wenn man Javascript deaktiviert hat*/ .hinweis { background-image : url(images/javaaktiv.png); text-align: center; width : 1000px; height : 27px; font-size : 15px; margin-top : 0; color : #fff; font-weight : bold; margin : 0 auto; z-index: 100; } .hinweis a { color : #000; } /*Jetzt wird der Bodybereich und der Header definiert*/ body { margin : 0 auto; padding : 0; background-color : #ffffff; background-image : url('images/hintergrund.jpg'); background-repeat : repeat-x; background-attachment : scroll; background-position : left top; } #style-main { position : relative; width : 100%; left : 0; top : 0; } #style-site-background-lite { position : absolute; width : 100%; height : 100px; left : 0; top: 0; } #style-site-background-lite-image { background-image : url('images/header.png'); background-repeat : no-repeat; height : 100px; width : 1000px; margin : 0 auto; } html:first-child #style-site-background-lite { border : 1px solid transparent; } .cleared { float : none; clear : both; margin : 0; padding : 0; border : none; font-size : 1px; } .style-way { position : relative; z-index : 0; margin : 0 auto; width : 1000px; min-width : 69px; min-height : 69px; } .style-way-body { position : relative; z-index : 1; padding : 36px; } .style-way-tr, .style-way-tl, .style-way-br, .style-way-bl, .style-way-tc, .style-way-bc, .style-way-cr, .style-way-cl { position : absolute; z-index : -1; } .style-way-tr, .style-way-tl, .style-way-br, .style-way-bl { width : 96px; height : 96px; background-image : url('images/ecken.png'); } .style-way-tl { top : 0; left : 0; clip : rect(auto,48px,48px,auto); } .style-way-tr { top : 0; right : 0; clip : rect(auto,auto,48px,48px); } .style-way-bl { bottom : 0; left : 0; clip : rect(48px,48px,auto,auto); } .style-way-br { bottom : 0; right : 0; clip : rect(48px,auto,auto,48px); } .style-way-tc, .style-way-bc { left : 48px; right : 48px; height : 96px; background-image : url('images/olul.png'); } .style-way-tc { top : 0; clip : rect(auto,auto,48px,auto); } .style-way-bc { bottom : 0; clip : rect(48px,auto,auto,auto); } .style-way-cr, .style-way-cl { top : 48px; bottom : 48px; width : 96px; background-image : url('images/llrl.png'); } .style-way-cr { right : 0; clip : rect(auto,auto,auto,48px); } .style-way-cl { left : 0; clip : rect(auto,48px,auto,auto); } .style-way-cc { position : absolute; z-index : -1; top : 48px; left : 48px; right : 48px; bottom : 48px; background-color : #ffffff; } .style-way { margin-top : 135px !important ; } #style-site-background-simple-look, #style-site-background-look, #style-site-background-lite { min-width : 1000px; } /*Ende Header und Body*/ /*Nun kommt das Menü*/ .style-menue a, .style-menue a:link, .style-menue a:visited, .style-menue a:hover { text-align : left; text-decoration : none; outline : none; letter-spacing : normal; word-spacing : normal; } .style-menue, .style-menue ul { margin : 0; padding : 0; border : 0; list-style-type : none; display : block; } .style-menue li { margin : 0; padding : 0; border : 0; display : block; float : left; position : relative; z-index : 5; background : none; } .style-menue li:hover { z-index : 10000; white-space : normal; } .style-menue li li { float : none; } .style-menue ul { visibility : hidden; position : absolute; z-index : 10; left : 0; top : 0; background : none; } .style-menue li:hover > ul { visibility : visible; top : 100%; } .style-menue li li:hover > ul { top : 0; left : 100%; } .style-menue:after, .style-menue ul:after { content : "."; height : 0; display : block; visibility : hidden; overflow : hidden; clear : both; } .style-menue, .style-menue ul { min-height : 0; } .style-menue ul { background-image : url('images/leer.gif'); padding : 10px 30px 30px 30px; margin : -10px 0 0 -30px; } .style-menue ul ul { padding : 30px 30px 30px 10px; margin : -30px 0 0 -10px; } .style-menue { padding : 16px 16px 16px 16px; } .style-menuee { position : relative; height : 64px; z-index : 100; } .style-menuee .l, .style-menuee .r { position : absolute; z-index : -1; top : 0; height : 64px; background-image : url('images/menue.png'); } .style-menuee .l { left : 0; right : 5px; } .style-menuee .r { right : 0; width : 928px; clip : rect(auto,auto,auto,923px); } .style-menue ul li { clear : both; } .style-menue a { position : relative; display : block; overflow : hidden; height : 32px; cursor : pointer; text-decoration : none; margin-right : 4px; margin-left : 4px; } .style-menue a .r, .style-menue a .l { position : absolute; display : block; top : 0; z-index : -1; height : 96px; background-image : url('images/menuepunkt.png'); } .style-menue a .l { left : 0; right : 6px; } .style-menue a .r { width : 412px; right : 0; clip : rect(auto,auto,auto,406px); } .style-menue a .t { font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size : 14px; font-style : normal; font-weight : bold; letter-spacing : -1px; text-transform : none; font-variant : small-caps; color : #ffffff; padding : 0 16px; margin : 0 6px; line-height : 32px; text-align : center; } .style-menue a:hover .l, .style-menue a:hover .r { top : -32px; } .style-menue li:hover > a .l, .style-menue li:hover > a .r { top : -32px; } .style-menue li:hover a .l, .style-menue li:hover a .r { top : -32px; } .style-menue a:hover .t { color : #e7e9e7; } .style-menue li:hover a .t { color : #e7e9e7; } .style-menue li:hover > a .t { color : #e7e9e7; } .style-menue a.active .l, .style-menue a.active .r { top : -64px; } .style-menue a.active .t { color : #919a8d; } .style-menue ul a { display : block; text-align : center; white-space : nowrap; height : 32px; width : 180px; overflow : hidden; line-height : 32px; margin-right : auto; background-image : url('images/untermenue.png'); background-position : left top; background-repeat : repeat-x; border-width : 0; border-style : solid; } .style-menuee ul.style-menue ul span, .style-menuee ul.style-menue ul span span { display : inline; float : none; margin : inherit; padding : inherit; background-image : none; text-align : inherit; text-decoration : inherit; } .style-menue ul a, .style-menue ul a:link, .style-menue ul a:visited, .style-menue ul a:hover, .style-menue ul a:active, .style-menuee ul.style-menue ul span, .style-menuee ul.style-menue ul span span { text-align : left; text-indent : 12px; text-decoration : none; line-height : 32px; color : #f6f5ee; font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size : 12px; font-style : normal; font-weight : bold; letter-spacing : -1px; text-transform : uppercase; } .style-menue ul ul a { margin-left : auto; } .style-menue ul li a:hover { color : #f0ede0; background-position : 0% -32px; } .style-menue ul li:hover > a { color : #f0ede0; background-position : 0% -32px; } .style-menuee .style-menue ul li a:hover span, .style-menuee .style-menue ul li a:hover span span { color : #f0ede0; } .style-menuee .style-menue ul li:hover > a span, .style-menuee .style-menue ul li:hover > a span span { color : #f0ede0; } /*Das Menü ist jetzt zu Ende*/ .style-contentLayout { position : relative; margin-bottom : 9px; width : 928px; } .style-messageHeader { text-decoration : none; margin : 0.2em 0; padding : 0; font-weight : normal; font-style : normal; letter-spacing : normal; word-spacing : normal; font-variant : normal; text-decoration : none; font-variant : normal; text-transform : none; text-align : left; text-indent : 0; line-height : inherit; font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size : 24px; font-style : normal; font-weight : bold; letter-spacing : -1px; font-variant : small-caps; text-align : left; color : #3e443c; } .style-messageHeader a, .style-messageHeader a:link, .style-messageHeader a:visited, .style-messageHeader a:hover { font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-size : 24px; font-style : normal; font-weight : bold; letter-spacing : -1px; font-variant : small-caps; text-align : left; margin : 0; color : #3e443c; } .style-messageHeader img { border : none; vertical-align : middle; margin : 0; } .style-messageHeader a:link { font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif; text-decoration : none; text-align : left; color : #920110; } .style-messageHeader a:visited, .style-messageHeader a.visited { font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif; text-decoration : none; text-align : left; color : #000000; } .style-messageHeader a:hover, .style-messageHeader a.hovered { font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif; text-decoration : none; text-align : left; color : #000000; } body { font-family : Tahoma, Arial, Helvetica, Sans-Serif; font-size : 12px; font-style : normal; font-weight : normal; color : #52594f; } a { font-family : Tahoma, Arial, Helvetica, Sans-Serif; text-decoration : underline; color : #920110; } a:link { font-family : Tahoma, Arial, Helvetica, Sans-Serif; text-decoration : underline; color : #920110; } a:visited, a.visited { font-family : Tahoma, Arial, Helvetica, Sans-Serif; text-decoration : underline; color : #393e37; } a:hover, a.hover { font-family : Tahoma, Arial, Helvetica, Sans-Serif; text-decoration : none; color : #000000; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { font-weight : normal; font-style : normal; text-decoration : none; } /*Hier wird der Footer definiert*/ .style-Footer { position : relative; z-index : 0; overflow : hidden; width : 928px; margin : 5px auto 0 auto; text-decoration : none; } .style-Footer .style-Footer-inner { height : 1%; position : relative; z-index : 0; padding: 20px; text-align:center; font-size : 14px; text-decoration : none; } .style-Footer .style-Footer-background { position : absolute; z-index : -1; background-repeat : no-repeat; background-image : url('images/footer.png'); width : 928px; height : 50px; bottom : 0; left : 0; } .style-Footer .style-Footer-text p { margin : 0; } .style-Footer .style-Footer-text { display : inline-block; color : #ffffff; font-family : Tahoma, Arial, Helvetica, Sans-Serif; padding-left: 20px; font-size : 14px; text-decoration : none; } .style-Footer .style-Footer-text a:link { text-decoration : none; color:#FFF; font-family : Tahoma, Arial, Helvetica, Sans-Serif; text-decoration : none; font-size : 14px; } .style-Footer .style-Footer-text a:visited { text-decoration : none; color:#FFF; font-family : Tahoma, Arial, Helvetica, Sans-Serif; text-decoration : none; font-size : 14px; } .style-Footer .style-Footer-text a:hover { text-decoration : none; color : #fdfbf2; font-family : Tahoma, Arial, Helvetica, Sans-Serif; text-decoration : none; font-size : 14px; } .style-site-footer { margin : 1em; text-align : center; text-decoration : none; color : #887a44; text-decoration : none; } #copyright{ color: #999; text-align: center; text-decoration:none; } HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" > <head> <title>Home</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <!--Als erstes prüfen wir, ob Javascript aktiviert ist oder nicht. Wenn es nicht aktiviert ist, wird ein Hiweis angezeigt es zu aktivieren. Wenn Javascript deaktiviert ist, wird alles was zwischen <noscript> </noscript> steht angezeigt. Wenn es aktiviert ist wird dieser Teil ignoriert.--> <noscript> <div class="hinweis"> Bitte aktiviere Javascript, damit du alle Vorteile von Quizpower.de nutzen kannst. Eine Anleitung findest du <!--Nun überprüfe ich, welcher Browser benutzt wird, damit javascript.php weis zu was eine Anleitung gegeben werden muss--> <a href="javascript.php?b=mozilla&v=1.9.2.2"/>hier.</div> </noscript> <div id="style-site-background-look"></div> <div id="style-site-background-lite"> <div id="style-site-background-lite-image"></div> </div> <div id="style-main"> <div class="style-way"> <div class="style-way-tl"></div> <div class="style-way-tr"></div> <div class="style-way-bl"></div> <div class="style-way-br"></div> <div class="style-way-tc"></div> <div class="style-way-bc"></div> <div class="style-way-cl"></div> <div class="style-way-cr"></div> <div class="style-way-cc"></div> <div class="style-way-body"> <div class="style-menuee"> <div class="l"></div> <div class="r"></div> <ul class="style-menue"> <li id="current" class="active item15"><a href="http://.de/" class="active"><span class="l"> </span><span class="r"> </span><span class="t">Home</span></a></li> <li ><a href="/Meinprofil"><span class="l"> </span><span class="r"> </span><span class="t">Mein Profil</span></a></li> <li ><a href="/login"><span class="l"> </span><span class="r"> </span><span class="t">punkt 1</span></a></li> <li ><a href="/FAQ"><span class="l"> </span><span class="r"> </span><span class="t">punkt 3</span></a></li> <li ><a href="/proxy"><span class="l"> </span><span class="r"> </span><span class="t">punkt 4</span></a></li> <li ><a href="/Chat"><span class="l"> </span><span class="r"> </span><span class="t">punkt 5</span></a></li> <span class="l"> </span><span class="r"> </span><span class="t"></span> <span class="l"> </span><span class="r"> </span><span class="t"></span> <span class="l"> </span><span class="r"> </span><span class="t"></span></ul> </div> <p>Hallo und herzlich willkommen ,</p> <p>hier kannst du in Kürze viele tolle Spiele spielen Rätseln lösen und vieles mehr. Im Moment steht dir aber schon ein Proxy zur Verfügung. Du benötigst dazu nur einen kostenlosen Account und schon gehts los.</p> <p>Viel Spaß</p> <div class="cleared"></div> <div class="style-Footer"> <div class="style-Footer-inner"> <div class="style-Footer-text"> <a href="impressum.php" />Impressum | <a href="kontakt.php" />Kontakt | <a href="haftung.php" />Haftungsausschluss </div> </div> <div class="style-Footer-background"></div> </div> <div class="cleared"></div> </div> </div> <div class="cleared"></div> <div id="copyright">© 2010 </div> </div> </body> </html> Der copyright wird rot unterstrichen angezeigt erst beim drüberfahren wird er normal warum?! Danke schon Mal LG rs-web Geändert von rs-web (28.03.2010 um 18:55 Uhr) |
Sponsored Links |
|
|||
HTML-Code:
#style-site-background-lite { position : absolute; width : 100%; height : 100px; left : 0; top: 0; } Brauchst du doch gar nicht, wenn ich das richtig sehe. Nimm es einfach raus Oo
__________________
Walter IT-Services Michael Walter http://www.walter-it.de http://blog.walter-it.de |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tabellen als Div Container | SpecialFighter | (X)HTML | 7 | 12.10.2010 17:40 |
Ungewöhnlicher abstand beim clearen von floats | adrianno | CSS | 14 | 16.09.2009 14:20 |
Dynamische Höhe im Content und DIV immer unten | keaton | CSS | 8 | 13.12.2006 18:19 |
DIV Länge automatisch anpassen | judicious | CSS | 10 | 08.05.2006 16:30 |
Seitenaufbau mit DIVs und 100% Höhe | vespasquire | CSS | 6 | 12.09.2004 15:21 |