Fragen zu meiner neuen HP

Blobby · 16 November 2008

Hallo liebe Community,

Ich habe mich seit Anfang des Monats mit HTML sowie CSS auseinander gesetzt. Ein paar Tutorials und halt ausprobieren. Ich habe auf jeden Fall schon fast das Design meiner Seite fertig. Ich habe jedoch 3 Probleme.

1. Ich habe, wenn ich meine Seite mit IE öffne ein kleines unschönes Wiederholen des backgrounds über der Navigation. Im FF ist alles ganz normal dargestellt.

2. Ich habe schon mehrere Male probiert meine Seite zu zentrieren. Mit eher weniger Erfolg. Alles unterhalb der Navigation ist linksbündig geblieben und manchmal hat sich die Navigation komisch eingerückt bzw. völlig abgegrenz durch einen "margin".

3. Im IE wird meine Navigation nicht richtig benutzt. Wenn ich über die Buttons fahre, droppt das Menu nicht runter, wie im FF.

Wo liegen meine Fehler und lässt sich vielleicht noch etwas an meinem CSS bzw. HTML Code optimieren?

Das ganze sieht zur Zeit so aus:

Der HTML-Code ist folgender:

HTML:

<html>
<head>
<title>Test</title>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div id=header>
   <div id=header-logo>
    <img src="logo.gif"> 
   </div>
   <div id=header-schrift>
    <img src="schrift.gif">
   </div>
  </div>
  <div id=header-sponsoren>
   <div id=header-sponsor1>
    <img src="sponsor.gif">
   </div>
   <div id=header-sponsor2>
    <img src="sponsor.gif">
   </div>
   <div id=header-sponsor3>
    <img src="sponsor.gif">
   </div>
   <div id=header-sponsor4>
    <img src="sponsor.gif">
   </div>
  </div>
   <ul id="Navigation"> 
    <li><a href="/news" class="news" title="News"><span class="Invisible">News</span></a> 
     <ul> 
      <li><a href="/news">Aktuelle News</a></li> 
      <li><a href="/archiv">News-Archiv</a></li> 
     </ul> 
    </li> 
    <li><a href="/team" class="team" title="Team eN"><span class="Invisible">Team eN</span></a> 
     <ul> 
      <li><a href="/players">Players</a></li> 
      <li><a href="/configs">Configs</a></li> 
      <li><a href="/equipment">Ausr&uuml;stung</a></li> 
     </ul> 
    </li> 
    <li><a href="/article/3454" class="media" title="Media"><span class="Invisible">Media</span></a> 
     <ul> 
      <li><a href="/demos">Demos</a></li> 
      <li><a href="/videos">Videos</a></li> 
      <li><a href="/other">Sonstiges</a></li> 
     </ul> 
    </li> 
    <li><a href="/forum" class="forum" title="Forum"><span class="Invisible">Forum</span></a></li> 
    <li><a href="/community" class="community" title="Community"><span class="Invisible">Community</span></a></li>
   </ul>
  <div id=body-links>
   <div id=body-hotnews>
    <iframe src="http://www.giga.de/tunnelteaser.php" width="797" height="315" scrolling="No" frameborder="0" name="teaser"></iframe>
   </div>
   <div id=body-content>
    <img src="content.gif"> 
   </div>
  </div>
  <div id=body-rechts>
   <div id=body-login>
    <img src="login.gif">
   </div>
   <div id=body-next>
    <img src="next.gif">
   </div>
   <div id=body-last>
    <img src="last.gif">
   </div>
  </div>
</body>
</html>

Der CSS-Code ist dieser hier:

HTML:

*
{
margin: 0px;
padding: 0px;
}

body
{
background: url(bg.gif) repeat;
}

span.Invisible 
{ 
display: none; 
}

#Navigation 
{
width: 1000px;
background: url(navi-bg.gif) no-repeat;
list-style: none;
}

#Navigation li 
{ 
width: 200px;
float: left;
font-size: 1.0em;
position: relative;	
}

li a.news:link, li a.news:visited, li a.news:focus, li a.news:active 
{
width: 200px;
height: 25px;
display: block;
border: none;
background: url(news.gif) no-repeat;
background-position: 0 -25px;
}

li a.news:hover 
{ 	
background: url(news.gif) no-repeat; 
background-position: 0 0; 
border: none; 
}
	
li a.media:link, li a.media:visited, li a.media:focus, li a.media:active 
{ 
width: 200px; 
height: 25px; 
display: block; 
border: none;
background: url(media.gif) no-repeat; 
background-position: 0 -25px; 

}

li a.media:hover 
{ 	
background: url(media.gif) no-repeat; 
background-position: 0 0; 
border: none; 
}
	
li a.community:link, li a.community:visited, li a.community:focus, li a.community:active 
{ 
width: 200px; 
height: 25px; 
display: block; 
border: none;
background: url(community.gif) no-repeat; 
background-position: 0 -25px; 
}

li a.community:hover 
{ 	
background: url(community.gif) no-repeat; 
background-position: 0 0; 
border: none; 
}
	
li a.forum:link, li a.forum:visited, li a.forum:focus, li a.forum:active 
{
width: 200px; 
height: 25px; 
display: block; 
border: none;
background: url(forum.gif) no-repeat; 
background-position: 0 -25px; 
}

li a.forum:hover 
{ 	
background: url(forum.gif) no-repeat; 
background-position: 0 0; 
border: none; 
}
	
li a.team:link, li a.team:visited, li a.team:focus, li a.team:active 
{ 
width: 200px; 
height: 25px; 
display: block; 
border: none;
background: url(team.gif) no-repeat; 
background-position: 0 -25px; 
}

li a.team:hover 
{ 	
background: url(team.gif) no-repeat; 
background-position: 0 0; 
border: none; 
}
		
#Navigation ul 
{
display: none;
list-style: none;
position: absolute;		
}
	
#Navigation li:hover ul, #Navigation li.over ul 
{		
display: block;
}
	
#Navigation li ul li 
{
line-height: 20px;
width: 115px;
padding: 0 4px;
font-weight: bold;
font-size: 0.8em;
background: url(drop-bg.gif) repeat;
}
	
#Navigation li ul a:link, #Navigation li ul a:visited, #Navigation li ul a:active, #Navigation li ul a:focus 
{
display: block;
width: 112px;
line-height: 20px;
background: url(drop-normal.gif) repeat-x;
text-decoration: none;
color: #666;
border-bottom: none;
padding-left: 3px;
}
	
#Navigation li ul a:hover 
{
background: url(drop-hover.gif) repeat-x;
text-decoration: none;
color: #666;
border-bottom: none;
}


#header
{
width:1000px;
height:160px;
background: url(header-bg.gif) repeat;
}

#header-logo
{
width:200px;
height:160px;
float:left;
}

#header-schrift
{
width:800px;
height:160px;
float:right;
}

#header-sponsoren
{
width:1000px;
height:25px;
background: url(sponsor-bg.gif) repeat;
}

#header-sponsor1
{
width:100px;
height:25px;
float:left;
margin-left:120px;
margin-right:120px;
}

#header-sponsor2
{
width:100px;
height:25px;
float:left;
margin-right:120px;
}

#header-sponsor3
{
width:100px;
height:25px;
float:left;
margin-right:120px;
}

#header-sponsor4
{
width:100px;
height:25px;
float:left;
margin-right:120px;
}

#body-links
{
width:797px;
height:900px;
float:left;
}

#body-hotnews
{
width:797px;
height:315px;
}

#body-content
{
width:797px;
height:585px;
background: url(content-bg.gif) repeat;
}

#body-rechts
{
width:203px;
height:900px;
float:left;
background: url(body-rechts-bg.gif) repeat;
}

#body-login
{
width:203px;
height:200px;
background: url(container-rechts-bg.gif) repeat;
}

#body-next
{
width:203px;
height:200px;
background: url(container-rechts-bg.gif) repeat;
}

#body-last
{
width:203px;
height:200px;
background: url(container-rechts-bg.gif) repeat;
}

PS:
Lässt euch nicht vom Grün des Giga-Teasers irritieren. Der wird noch umgeschrieben.

neuroleptika · 16 November 2008

Blobby schrieb:
1. Ich habe, wenn ich meine Seite mit IE öffne ein kleines unschönes Wiederholen des backgrounds über der Navigation. Im FF ist alles ganz normal dargestellt.

2. Ich habe schon mehrere Male probiert meine Seite zu zentrieren. Mit eher weniger Erfolg. Alles unterhalb der Navigation ist linksbündig geblieben und manchmal hat sich die Navigation komisch eingerückt bzw. völlig abgegrenz durch einen "margin".

3. Im IE wird meine Navigation nicht richtig benutzt. Wenn ich über die Buttons fahre, droppt das Menu nicht runter, wie im FF.

Das ist der untere Abstand von img (Zeilenhöhe). Das der ff das img ohne Abstand direkt auf der Zeilenhöhe darstellt liegt am Quirksmodus. Ursache ist der Fehlende Doctype. Je nach Doctype sollte der Abstand dann auch im Firefox zu sehen sein. Mit display: block für #header-sponsoren img sollte er verschwinden und damit kein Platz zum Wiederholen des background-image haben.
Die Seite zentrierst du, indem du alles mit einem div umspannst und eine feste Breite+automatischen Außenabstand gibst ( z.B. width: 1000px; margin: 0 auto; )
Der IE6 kennt :hover nur für <a>. Auf A List Apart: Articles: Suckerfish Dropdowns findest du ein Javascript welches dem IE6 eine weitere Klasse beim hovern über <li> gibt.

Bei Problemen mit background-images solltest du immer einen Link angeben.
Bei Problemen mit dem IE immer die Version dazuschreiben.

Das ich die Probleme auch so erkennen konnte lag nur daran, daß diese Fehler sehr häufig vorkommen.

Blobby · 18 November 2008

So ...
1. Hat vollkommen geklappt.
2. Hat für FF geklappt. Für IE (Version weiß ich nicht, wie ich sie herausfinde) hat es leider nicht geklappt.
3. Werde ich mich noch mal umhören.

Wie übernehme ich 2. auch für IE?

Efchen · 18 November 2008

zu 2: Du musst den IE, wie die anderen Browser auch, durch Wahl eines geeigneten Doctypes in den Standards Mode versetzen. Tust Du das nicht, ist der IE im Quirks Mode in dem er das Zentrieren so nicht kann.

Die Version des IE bekommst Du über "?" -> "Info"

Infos zum Thema Doctype gibts hier: LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype

Blobby · 18 November 2008

Darf ich jetzt noch dumm fragen, wie man einen Browser in einen geeigneten Doctype versetzt und ihn in den Standards Mode versetzt?

E: Sry ... habs übersehn xD

Efchen · 18 November 2008

Ja, ich habs erst nachträglich eingefügt ;-)
Auf Seite 3 steht eine Übersicht über alle möglichen Doctypes und ihre Auswirkung auf die Browser.
Lies aber ruhig alles, man sollte wissen, was man tut :-)

Fragen zu meiner neuen HP

Blobby

Neues Mitglied

neuroleptika

Aktives Mitglied

Blobby

Neues Mitglied

Efchen

Guest

Blobby

Neues Mitglied

Efchen

Guest

Neueste Beiträge