Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 03.12.2008, 00:13
weblearner weblearner ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links