ist das normal?

k1k0 · 8. Juli 2005

Also ich hab mich mal in css versucht (also das erste mal eigentlich). So nun öffne ich die Seite mit dem Standart Internet Explorer von Microsoft. gucke durch und alles ist wunderbar. Dann öffne ich die Seite per Firefox, und was passiert? Alles total verrutscht!

Hier die Seite: el-bone.de

Hier das was in dem stylesheet.css steht:

Code:

h1 {font-family:arial; font-size:14px; color:#FFFFFF; text-align:center;}
   
   h2 {font-family:arial; font-size:12px; color:#FFFFFF; text-align:center;}
   p  {font-family:arial; font-size:10px; color:#FFFFFF;}
   
   a:link	  {color:#FFFFFF; text-decoration:none; font-size:8pt; font-family:arial;}
   a:visited	{color:#FFFFFF; text-decoration:none; font-size:8pt; font-family:arial;}
 a:hover	{color:rgb(135,135,135); text-decoration:underline overline; font-size:8pt; font-family:arial; cursor : crosshair}
   a:active	{color:#FFFFFF; text-decoration:none; font-size:8pt; font-family:arial;}
   
   body	{
   		   scrollbar-face-color:	  #000000;
   	   scrollbar-highlight-color:   #424242;
   	   scrollbar-3dlight-color:   #424242;
   	   scrollbar-darkshadow-color:   #424242;
   	   scrollbar-shadow-color:	  #424242;
   	   scrollbar-arrow-color:	  #FFFFFF;
   	   scrollbar-track-color:	  #FFFFFF;
   
   		   margin-left:   20px;
   	   margin-right:   20px;
   	   margin-top:   20px;
   	   margin-bottom:   20px
      }

Das Proble ist eigentlich nur bei Gästebuch... Mir aber unerklärlich
und das "MENÜ" ist verschoben...

Maik · 8. Juli 2005

Das Problem liegt nicht im CSS-Code, sondern im HTML-Source und u.a. an den erzwungenen Leerzeichen   vor bzw. nach den Links.

Empfehle dir eine Liste zur Strukturierung deiner Navigation -> Listamatic: one list, many options

Maik · 8. Juli 2005

Derzeit sehe ich in deiner Seite folgende Konflikte / Probleme:

Veraltetetes, fehlerhaftes HTML-Markup ( z.B. <font size="5">...</font>, </h2> obwohl kein <h2>-Element im Quelltext notiert ist )
Erzwungene Leerzeichen   zum Ausrichten / Positionieren der Text-Links
Bei Minimierung des IE - Browserfensters staucht das <iFrame>-Element die Tabellenkonstruktion und schiebt die Navigation-Links zum linken Rand (über die Hintergrundgrafik hinweg) -> liegt wohl an den %-Weiten der Tabellenzellen
Das Menü soll aber über einem bestimmten vertikalen Ausschnitt des Tabellenzellen-Hintergundbildes zentriert positioniert / dargestellt werden

Mein Vorschlag: ein CSS-Modell mit DIVs für die Hauptbereiche deiner Seite (header, navi, content) und einer Liste als Navigationselement.

Das Layout basiert auf dem HTML-Source deiner Seite und deinem CSS-Posting.

HTML:

<!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" />
<title>el-bone.de</title>

<style type="text/css">
<!--
body
{
margin: 20px;
}

div
{
margin: 0;
padding: 0;
}

div#box
{
width: 100%;
}

div#head
{
width: 100%;
height: 150px;
text-align: center;
}

div#colspan
{
width: 890px;
}

div#nav
{
width: 140px;
height: 300px;
float: left;
text-align: center;
background: url(menue1.jpg);
background-position: 3px 0;
}

#nav h2
{
padding: 30px 0 0 0;
color: #ffffff;
font-size: 0.9em;
}

#navlist
{
padding: 15px 0 0 0;
margin: 0;
}

#navlist li
{
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
color:#FFFFFF;
text-decoration:none;
font-size:8pt;
font-family:arial;
font-weight: bold;
}

#navlist a:hover
{
color:rgb(135,135,135);
text-decoration:underline overline;
font-size:8pt;
font-family:arial;
font-weight: bold;
cursor :crosshair;
}

#navlist a:active
{
color:#FFFFFF;
text-decoration:none;
font-size:8pt;
font-family:arial;
font-weight: bold;
}

div#content
{
width: 745px;
height: 300px;
margin: 0 0 0 140px;
}

div.clear
{
clear: left;
line-height: 0;
font-size: 0;
}
-->
</style>

</head>
<body>

<div id="box">

<div id="head">
     <img border="0" src="bg.jpg" width="150" height="150" alt="" /><img border="0" src="banner.jpg" width="400" height="150" alt="" /><img border="0" src="bg.jpg" width="150" height="150" alt="" />
</div>

<div id="colspan">

<div id="nav">
     <h2>MENÜ</h2>
     <ul id="navlist">
         <li><a href="index.htm">NEWS</a></li>
         <li><a href="gaestebuch.htm">Gästebuch</a></li>
         <li><a href="Test.htm">TEST</a></li>
         <li><a href="Links.htm">LINKS</a></li>
         <li><a href="El-Crew.htm">El-Crew</a></li>
         <li><a href="D-Loads.htm">D-Loads</a></li>
         <li><a href="Impressum.htm">Impressum</a></li>
     </ul>
</div>

<div id="content">
     <iframe name="I1" width="745" height="300" src="http://www.el-bone.de/newssys/include_this/news.php" border="0" frameborder="0">
    Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.</iframe>
</div>

<div class="clear">&nbsp;</div>

</div><!-- END div#colspan -->

</div><!-- END div#box -->

</body>
</html>

Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

ist das normal?

k1k0

Erfahrenes Mitglied

Maik

Maik

Neue Beiträge