zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden header verrutscht...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.12.2008, 23:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.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
  #2 (permalink)  
Alt 03.12.2008, 14:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.12.2008, 16:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard

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.....
Mit Zitat antworten
  #4 (permalink)  
Alt 03.12.2008, 16:22
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von regloh Beitrag anzeigen
Warum arbeitest du noch mit html4.01?
Warum sollte er nicht?

Zitat:
Zitat von weblearner Beitrag anzeigen
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.12.2008, 18:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard

ok...
glück gehabt.... ich dacht schon ich käme hier mim hinterletzten
Mit Zitat antworten
  #6 (permalink)  
Alt 03.12.2008, 19:14
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.12.2008, 19:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard

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

Stichwörter
header, verrutscht

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:02 Uhr.