XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   header verrutscht... (http://xhtmlforum.de/showthread.php?t=54815)

weblearner 03.12.2008 00:13

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>&nbsp;</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>&nbsp;</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>

style.css

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%;
}

soweit so gut... weiss jem. rat?
danke schonmal,
weblearner!

regloh 03.12.2008 15:50

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?

weblearner 03.12.2008 17:00

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;
die zeile besagt ja eigentlich dass img1.gif (der grüne hintergrung) endlos nach unten verläuft oder steh ich jetzt total auf der leitung? jedenfalls tut er das nicht... siehe meine page...
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>

und meine style.css:
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;
}

wär euch nochmal sehr dankbar wenn ihr da schnell drüber schauen könntet....
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.....

inta 03.12.2008 17:22

Zitat:

Zitat von regloh (Beitrag 413006)
Warum arbeitest du noch mit html4.01?

Warum sollte er nicht?

Zitat:

Zitat von weblearner (Beitrag 413019)
gibts noch was anderes? bin grad ein bissel iritiert.....

Gibt es schon, aber lass dich nicht verwirren. HTML 4.01 ist gut, es besteht in der Regel kein Anlass etwas anderes zu nutzen.

weblearner 03.12.2008 19:34

ok...
glück gehabt.... ich dacht schon ich käme hier mim hinterletzten ;)

inta 03.12.2008 20:14

Ich hatte eben keine Zeit mir dein Problem anzuschauen, aber jetzt:

Entferne bei #content die Höhenangabe, die ist für dein Problem verantwortlich.
Du solltest sehr vorsichtig mit Höhenangaben sein und sie wenn möglich vermeiden.

weblearner 03.12.2008 20:34

hey inta!
hammer! es funkt! tausend dank!
(auch von meiner freundin weil ich jetzt wieder gut drauf bin ;) )
ich bin glücklich!
thx,
weblearner!


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:03 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023