|
|||
header verrutscht...
hey ho guten abend im forum!
ich habe das problem dass mein header verrutscht wenn ich zuviel text auf der seite hab und der scrollbalken eingeblendet wird... (benutze firefox version 3.0.4) bemerkbar macht sich das durch einen kleinen aber feinen grünen streifen am linken headerrand... das ist meine seite.... headerproblem wenn ihr euer browserfenster langsam verkleinert könnt ihr sehn wie der grüne rand mal da ist und mal nicht.... wenn man sie im IE 7 anschaut ist der grüne streifen rechts vom header..... leider hab ich keinen plan woran das liegt, ich hab schon einiges gegoogelt und in diversen foren geschaut aber alles negativ.... ich hab euch hier mal meine quellcodes: index.html HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <link rel="stylesheet" type="text/css" href="style.css"> <title>headerproblem</title> <script type="text/javascript"> if(window.navigator.systemLanguage && !window.navigator.language) { function hoverIE() { var LI = document.getElementById("Navigation").firstChild; do { if (sucheUL(LI.firstChild)) { LI.onmouseover=einblenden; LI.onmouseout=ausblenden; } LI = LI.nextSibling; } while(LI); } function sucheUL(UL) { do { if(UL) UL = UL.nextSibling; if(UL && UL.nodeName == "UL") return UL; } while(UL); return false; } function einblenden() { var UL = sucheUL(this.firstChild); UL.style.display = "block"; UL.style.backgroundColor = "silver"; } function ausblenden() { sucheUL(this.firstChild).style.display = "none"; } window.onload=hoverIE; } </script> </head> <body> <div align="center" style="position: inherit"> <div id="header"></div> </div> <div id="content"> <div id="Rahmen"> <ul id="Navigation"> <li><a href="#">header-problem</a> <ul> <li><a href="normal.html">normal</a></li> <li><a href="index.html">verrutscht</a></li> </ul> </li> <li><a href="#">link2</a></li> <li><a href="#">link3</a> <ul> <li><a href="#">link2</a></li> <li><a href="#">link5</a></li> </ul> </li> </ul> <div></div> </div> <p> </p> <h1 align="center">header - problem...</h1> <p>wenn ich hier ganz lange texte schreibe und diese über das normale fenster raus gehen verutscht der header im firefox leicht nach rechts.....<br><br>wenn ich hier ganz lange texte schreibe und diese über das normale fenster raus gehen verutscht der header im firefox leicht nach rechts.....<br><br>wenn ich hier ganz lange texte schreibe und diese über das normale fenster raus gehen verutscht der header im firefox leicht nach rechts.....<br><br>wenn ich hier ganz lange texte schreibe und diese über das normale fenster raus gehen verutscht der header im firefox leicht nach rechts.....<br><br>wenn ich hier ganz lange texte schreibe und diese über das normale fenster raus gehen verutscht der header im firefox leicht nach rechts.....<br><br>wenn ich hier ganz lange texte schreibe und diese über das normale fenster raus gehen verutscht der header im firefox leicht nach rechts.....<br><br>wenn ich hier ganz lange texte schreibe und diese über das normale fenster raus gehen verutscht der header im firefox leicht nach rechts.....<br><br></p> <p> </p> <div id="footer"> <b> <a href="#">fl1</a> | <a href="#">fl2</a> | <a href="#">fl3</a> | <a href="#">fl4</a> | <a href="#">fl5</a> </a></b> </div> </div> </body> </html> Code:
body { margin: 0; padding: 0; background: #0D0D0D url(images/img1.gif) repeat-y center top; font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; color: #0D0D0D; text-align: left; } h1, h2, h3 { text-transform: lowercase; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; font-style: italic; color: #0D0D0D; } h2 { font-size: 18px; } h3 { font-size: 16px; } p, ol, ul, blockquote { line-height: 22px; } a { border-bottom: 1px dotted #0D0D0D; text-decoration: none; color: #CCC000; } a:hover { border: none; } strong { color: #0D0D0D; } /* Header */ #header { width: 700px; height: 280px; margin: auto; background: url(images/img2.jpg); } #header h1 { margin: 0; padding: 40px 0 0 40px; font-size: 30px; text-align: center; } #header h2 { margin: 0; padding: 0 0 0 192px; font-size: 16px; } #header a { border: none; letter-spacing:-1px; color: #0D0D0D; text-align: center; } /* Content */ #content_container { padding-bottom:0em; } #content { width: 700px; margin: 0 auto; padding: 2px; } /* Posts */ .post { margin-bottom: 9px; padding: 10px 20px 10px 20px; background: #30c; border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; background: url(images/post1.jpg) repeat-y 0px 0px; } /* navigation */ div#Rahmen { width: 63.3em; padding: 0.2em; margin: -0.95em; border: 0px solid black; background-color: #0D0D0D; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 54em; w\idth: 63.4em; } div#Rahmen div { clear: left; text-align: center; } ul#Navigation { margin: 0; padding: 0; text-align: center; /*oberste reihe*/ } ul#Navigation li { list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; margin: 0.4em; padding: 0; } * html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */ margin-bottom: 0.1em; } *:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */ margin-bottom: 0.1em; } ul#Navigation li ul { margin: 0; padding: 0; position: absolute; top: 1.6em; left: -0.4em; display: none; /* Unternavigation ausblenden */ } * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */ left: -1.5em; lef\t: -0.4em; } *:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */ background-color: #0D0D0D; padding-bottom:0.4em; } ul#Navigation li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } ul#Navigation li ul li { float: left; display: block; margin-bottom: 0.2em; } ul#Navigation a, ul#Navigation span { display: block; width: 18.3em; /* Breite den in li enthaltenen Elementen zuweisen */ padding: 0em 1em; text-decoration: none; font-weight: bold; border: 0px solid black; border-left-color: #0D0D0D; border-top-color: #0D0D0D; color: #CCC000; background-color:#0D0D0D; } * html ul#Navigation a, * html ul#Navigation span { width: 9em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */ w\idth: 18.49em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */ } ul#Navigation a:hover, ul#Navigation span, li a#aktuell { border-color: url(images/img1.jpg); border-left-color: #0D0D0D; border-top-color: #0D0D0D; color: orange; background-color: #0D0D0D; } li a#aktuell { /* aktuelle Rubrik kennzeichnen */ color: #FF941D; background-color: #0D0D0D; } ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */ background-color: #0D0D0D; } /* footer */ #footer { position:fixed; bottom:0px; background:#0D0D0D; text-align:center; padding:1px; width:100%; } #footer_container { position:fixed; bottom:0; left:0; right:0; text-align:center; margin:0; height:2em; } * html #footer { /*fuer IE */ background:#0D0D0D; height:5%; text-align:center; padding-top:1%; } danke schonmal, weblearner! |
Sponsored Links |
|
|||
Code ist nicht valide:
[Invalid] Markup Validation of http://schuhh.sc.funpic.de/webiste/ - W3C Markup Validator Es ist sogar ein <a>-Tag falsch gesetzt. Im IE6 ist es auch verzerrt. FF zeigts gut an. Ich würde die Navi aber in den Header reinpacken und nicht in den Content. Gehört ja ansich nicht zum Inhalt. Warum arbeitest du noch mit html4.01? |
Sponsored Links |
|
|||
hey!
danke für deine Antwort! danke auch für die page um die eigene seite überprüfen zu können... super cool, hab ich nicht gekannt! jetzt sind alle fehler behoben auf die ich dort aufmerksam gemacht worden bin... allerdings haben die nicht mit meinem problem zu tun gehabt... (leider) ich habe jetzt aber eine evt lösung gefunden... ein paar post nach meinem hat jem. das gleiche problem gehabt... http://xhtmlforum.de/54818-ie7-div-n...-es-fehlt.html dort wurde ein code als verbesserungsvorschlag gemacht... den hab ich mir jetzt mal angeschaut und in meine page eingebaut... funktioniert auch ganz prima bisher... das einzigste was mich stresst ist dass der grüne hintergrund jetzt nicht mehr macht was ich will.... Code:
background: #ffffff url(images/img1.gif) repeat-y center top; neue style ich hab hier mal alles vereinfacht und alles überflüssige wie footer und navigation rausgenommen damit nich so viel quelltext vorhanden ist zum überprüfen... das problem das hier entsteht ist meinermeinung nach dass der "wrapper" dem "content" nicht die chance lässt sich ganz auszubreiten.... ich müsste dem content also eine höhe geben... das ist allerdings suboptimal da meine inhalte auf den verschiedenen seiten ja nicht immer gleich lang sind..... hab ich mich jetzt nur verschrieben oder geht das nicht anders? oder gibts vll eine lösung wie man den content dazu bringen kann "repeat-y" auch wirklich auszuführen...? hier also mal meine index.html: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="robots" content="noindex, nofollow" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>neue style</title> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="content"> inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt...<br /><br />inhalt inhalt inhalt... </div> </div> </body> </html> Code:
* { margin: 0; padding: 0; } html { overflow-y: scroll; height: 100%; } body { background-color: #ff0000; color: #0D0D0D; font-size: 11px; font-family: Georgia, "Times New Roman", Times, serif; height: 100%; text-align: center; } #wrapper { background: #ffffff; margin: 0 auto; width: 704px; min-height: 100%; } #header { margin: 0 auto; width: 700px; background: url(images/img2.jpg); height: 280px; } * html #wrapper { height: 100%; } #content { background: #ffffff url(images/img1.gif) repeat-y center top; margin: 0 auto; padding: 20px; height: 600px; text-align: left; } weblearner! @regloh:der tip mit der navi wird befolg! ist eigentlich echt logisch... was für eine version von FF hast du denn? in meinem 3.0.4 ist es verzerrt.... IE 7 auch... warum arbeite ich mit HTML4.01??ähhhh kp.... ich bin noch nicht allzulang dabei deshalb die frage... gibts noch was anderes? bin grad ein bissel iritiert..... |
Stichwörter |
header, verrutscht |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 21:19 |
Header mit img, h1 und form | Uwe_B | CSS | 22 | 02.10.2008 11:07 |
Div verrutscht unter Header, Hintergrundgrafik wird nicht angezeigt... | unicorn | CSS | 2 | 18.09.2008 16:50 |
Header mit relativ positioniertem div darin verrutscht | unicorn | CSS | 17 | 16.03.2008 18:02 |
Header verrutscht in Opera und Safari | Meccs | CSS | 12 | 04.08.2006 05:41 |