✔ Boxmodel Problem

Status
Nicht offen für weitere Antworten.
layla

layla

Erfahrenes Mitglied
Hi!

Mir wurde ja hier im Forum gesagt das man ein Menu in css mit einer Liste aufbaut. Ok also hab ich das halt gemacht.
HTML: 
<ul class="imenue">
  <li><a href="ghaus.htm">Gästehaus</a></li>
  <li><a href="bauernhof.htm">Bauernhof</a></li>
  <li><a href="reiten.htm">Reiten</a></li>
  <li><a href="umgebung.htm">Umgebung</a></li>
  <li><a href="preise.htm">Preise</a></li>
  <li><a href="anfahrt.htm">Anfahrt</a></li>
  <li><a href="gbuch.htm">Gästebuch</a></li>
  <li><a href="galerie.htm">Bildergalerie</a></li>
</ul>

Code: 
ul.imenue{ height:30px; margin-left:57px;}

.imenue li {
   background: url(Bilder/button.gif) no-repeat; list-style-type:none; margin:0; font-family: verdana; font-size:13pt; text-decoration:none; color: #000000;
}
 .imenue li a {padding-left:40px; padding-top:4px; display:block; text-decoration:none; }
   .imenue li a:link, .imenue li a:visited {font-family: verdana; font-size: 13pt; text-decoration:none; color: #000000; }
   .imenue li a:hover { color:white; }
   .imenue li a:active { color:black; }

Das 1 Problem war das der IE die Buttons so weit auseinander getan hat. Jemand hat mir gesagt ich müsste alle li in eine Zeile schreiben. Ok das hat auch geholfen aber jetzt sind die Buttons ganz zusammen gerückt, ich hätte aber gerne einen kleinen Abstand.
2 Problem: Ich habe margin-left:57px; eingetragen im IE passt das ganz genau, aber im Firefox sind die Buttons nach rechts verschoben.
Was muss ich eintragen damit es in beiden Browsern passt?
 
Hi,

das erste Problem sollte über eine entsprechende margin-Angabe in .imenue li zu regeln sein.

Zweites Problem bekommst du in Griff, wenn du zunächst die Innen- und Aussenabstände (padding und
margin)der Liste und der Listenpunkte auf Null setzt.

Weiterhin gibt du in ul.imenue eine Höhe von 30 Pixeln an, die nicht benötigt wird.

Versuch es mal mit folgendem CSS:
Code: 
ul.imenue{ margin-left:57px;}

/* Innen- und Aussenabstände auf Null setzen*/
.imenue, .imenue li{ margin: 0; padding: 0;}

.imenue li {
   background: url(Bilder/button.gif) no-repeat;
   list-style-type:none; margin: 2px 0 0; font-family: verdana; font-size:13pt; text-decoration:none; color: #000000;
}
 .imenue li a {padding-left:40px; padding-top:4px; display:block; text-decoration:none; }
 .imenue li a:link, .imenue li a:visited {font-family: verdana; font-size: 13pt; text-decoration:none; color: #000000; }
 .imenue li a:hover { color:white; }
 .imenue li a:active { color:black; }
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Leider gehts noch immer nicht.
Außerdem werden irgendwie die Buttons so abgeschnitten dargestellt.

Im Anhang hab ich mal einen Screen vom Menu raufgeladen.
Vielleicht is es dann einfacher zu verstehen was das Problem ist.

Die Seite sollte bis spätestens Freitag einwandfrei funktionieren. :(
 

Anhänge

  • screen_firefox.jpg
    screen_firefox.jpg
    28,9 KB · Aufrufe: 14
Ich habs jetzt so hinbekommen das es im IE richtig angezeigt wird aber im Firefox nicht.

Code: 
ul.imenue{ margin-left:57px;}

.imenue li {
   background: url(Bilder/button.gif) no-repeat; height: 30px; list-style-type:none; 
 font-family: verdana; font-size:13pt; text-decoration:none; text-align: center; color: #000000;
}
 .imenue li a {font-family: verdana; font-size: 13pt; display:block; text-decoration:none; }
   .imenue li a:link, .imenue li a:visited {font-family: verdana; font-size: 13pt; text-decoration:none; color: #000000; }
   .imenue li a:hover { color:white; }
   .imenue li a:active { color:black; }
 
Hi,

kann man das ganze mal komplett irgendwo ansehen?

Bei mir wird die Liste mit einem Aussenabstand von 57 Pixel und einem Innenabstand von 40 Pixeln
korrekt angezeigt. Ausserdem sind zwischen den einzelnen Listenpunkten 2 Pixel Abstand (IE und Firefox).
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<style type="text/css">
  <!--
ul.imenue{ margin-left:57px;}
.imenue, .imenue li{ margin: 0; padding: 0;}

.imenue li {
   /*background: url(Bilder/button.gif) no-repeat*/;
   background: #f00;
   list-style-type:none; margin: 2px 0 0; font-family: verdana; font-size:13pt; text-decoration:none; color: #000000;
}
 .imenue li a {padding-left:40px; padding-top:4px; display:block; text-decoration:none; }
 .imenue li a:link, .imenue li a:visited {font-family: verdana; font-size: 13pt; text-decoration:none; color: #000000; }
 .imenue li a:hover { color:white; }
 .imenue li a:active { color:black; }
 //-->
</style>

</head>
<body>
<ul class="imenue"><li><a href="ghaus.htm">Gästehaus</a></li><li><a href="bauernhof.htm">Bauernhof</a></li><li><a href="reiten.htm">Reiten</a></li><li><a href="umgebung.htm">Umgebung</a></li><li><a href="preise.htm">Preise</a></li><li><a href="anfahrt.htm">Anfahrt</a></li><li><a href="gbuch.htm">Gästebuch</a></li><li><a href="galerie.htm">Bildergalerie</a></li></ul>
</body>
</html>
Die Buttongrafik habe ich durch eine Farbe ersetzt.

Ciao
Quaese
 
Das Problem mit den Buttons hab ich behoben hatte keine höhe bei der grafik angegeben.

Hierkannst du dir das mal ansehen.
Schau mir jetzt nochmal deinen Code an.


Hast du vielleicht icq? würde einfacher gehen.
161206462
 
Zuletzt bearbeitet:
Hi,

wie heute schon angedeutet, musst du die Aussen- und Innenabstände der Liste und Listenpunkte
zunächst auf Null setzen. Ergänze dein CSS an der entsprechenden Stelle um die erste Zeile (rot).
Damit sollte das Problem im Firefox behoben sein.
Code: 
.imenue, .imenue li{ margin: 0; padding: 0;}
ul.imenue{ margin-left:57px;}


Weiterhin befindet sich in deinem Quellcode ein Leerzeichen (zwischen IMG und DIV), durch
welches sich eine horizontale Lücke im IE ergibt. Aus diesem Grund solltest du es entfernen.
HTML: 
<img src="test_dateien/pension_01.jpg" usemap="#Map" border="0"> </div>

Ciao
Quaese
 
Ich dachte ich hätte das
Code: 
.imenue, .imenue li{ margin: 0; padding: 0;}
geändert, vielleicht habe ich es auch übersehen.

Danke.

Supa danke hat gefunkt.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück