tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
10
ZUGRIFFE
234
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 06.03.10 15:10 #1
    DeDome DeDome ist offline Grünschnabel
    Registriert seit
    Mar 2010
    Beiträge
    3
    Hi,

    ich versuche eine ordentlich sortierte horizontale Liste darzustellen. Im ff wird sie auch weitestgehend in Ordnung angezeigt. Im IE 6 - 8 jedoch absolut schlecht.
    Im Anhang ein Screenshot:
    Hier noch die css
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

     
.underlinemenu{
font-weight: bold;
width: 100%;
font-family:Verdana,Helvetica,sans-serif; 
font-size:12px;
 
}
 
.underlinemenu ul{
 
text-align: center; 
 
}
 
.underlinemenu ul li{
float: left;
display: block;
margin: 0px;
width:110px;
min-height: 20x;
color: #003d8f;
padding: 6px 3px 0px 3px; 
/*margin-right: 20px; /*spacing between each menu link*/
margin: 10px;
margin-bottom: 0;
margin-top: 0;
}
 
 
.underlinemenu ul li a{
color: #003d8f;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
 
}


    und hier das menü
    HTML-Code:
    <ul>
  <li><a href="index.php?galerie=reception">Reception</a></li>
  <li><a href="index.php?galerie=zimmer">Zimmer</li>
  <li><a href="index.php?galerie=fruehstuecksraum">Fr&uuml;hst&uuml;cksraum</a></li>
  <li><a href="index.php?page=preise">Preise</a></li>
  <li><a href="index.php?galerie=hotelbar">Hotelbar</a></li>
  <li><a href="index.php?galerie=restaurant">Restaurant</a></li>
  <li><a href="index.php?galerie=parkplaetze">Parkpl&auml;tze</a></li>
  <li><a href="index.php?galerie=tourismus">Tourismus</a></li>
  <li><a href="index.php?galerie=kosmetikstudio">Beauty & Wellness</a></li>
  <li><a href="index.php?galerie=tagungsraume">Tagungen & Veranstaltungen</a></li>
  <li><a href="index.php?galerie=provencalischer_garten">provencalischer Garten</a></li>
  <li><a href="index.php?galerie=kleine_gaeste">Kleine G&auml;ste</a></li>
</ul>
    Danke schon mal für eure Mühen!
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Falsche Listenformatierung-screenshot_ie8.jpg  
     
    Zitieren Zitieren
  2. 06.03.10 15:21 #2
    Maik Tutorials.de Gastzugang
    Hi,

    versuch's mal hiermit:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    .underlinemenu ul{
margin:0;
padding:0;
text-align: center;
 
}
 
.underlinemenu ul li{
display:inline;
margin: 0px;
width:110px;
min-height: 20x;
color: #003d8f;
padding: 6px 3px 0px 3px;
/*margin-right: 20px; /*spacing between each menu link*/
margin: 10px;
margin-bottom: 0;
margin-top: 0;
}
 
 
.underlinemenu ul li a{  
float:left;
color: #003d8f;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
 
}

    mfg Maik
     
    Zitieren Zitieren
  3. 06.03.10 15:38 #3
    DeDome DeDome ist offline Grünschnabel
    Registriert seit
    Mar 2010
    Beiträge
    3
    Hi,

    erst mal danke, habs gerade ausprobiert. Im Anhang 2 Screenshots
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Falsche Listenformatierung-screenshot2_ff.jpg   Falsche Listenformatierung-screenshot2_ie8.jpg  

     
    Zitieren Zitieren
  4. 06.03.10 16:09 #4
    Maik Tutorials.de Gastzugang
    Ich behaupte jetzt mal, dass du dein HTML-Dokument ohne, oder mit einer falschen Doctype-Deklaration den Browsern nicht im standardkonformen Modus übergibst, womit sie alle in den proprietären "Quirks Mode" schalten, und IE8, wie auch IE7 sich in diesem Darstellungsmodus wie der IE6 aus dem letzten Jahrhundert verhalten, und in der Floatumgebung bei den horizontalen margin-Regeln den "Doubled Float-Margin-Bug" produzieren.

    Deinen Schnappschuß kann ich nämlich mit meiner Testseite im IE8 nicht reproduzieren, es sei denn, ich entferne den Doctype vor dem <html>-Tag:

    HTML-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" xml:lang="de" lang="de">

    mfg Maik
     
    Zitieren Zitieren
  5. 06.03.10 16:31 #5
    DeDome DeDome ist offline Grünschnabel
    Registriert seit
    Mar 2010
    Beiträge
    3
    Hi,

    es war die falsche Doctype-Deklaration. Mit deiner klappt es jetzt mal im IE. Hatte mir die Anordnung zwar etwas anders vorgestellt, aber ich bin froh, dass es überhaupt mal ordentlich angezeigt wird.
    Allerdings führt es im ff weiterhin zu einer unsauberen Darstellung. Hier mal der Link zur Seite
    http://crystal.public-port.de
     
    Zitieren Zitieren
  6. 06.03.10 18:06 #6
    Maik Tutorials.de Gastzugang
    Ich schätze, da wirst du die einzelnen padding- und margin-Werte der <li>- und <a>-Elemente noch ein wenig nachjustieren müssen, damit die Links sauber in eine Zeile passen, und nicht zuvor nach unten umbrechen.

    mfg Maik
     
    Zitieren Zitieren
  7. 06.03.10 18:10 #7
    Maik Tutorials.de Gastzugang
    Übrigens brechen die Links weitaus extremer um, wie es jetzt im FF der Fall ist, und zuvor im IE der Fall war, wenn im Browser der Schriftgrad vergrößert wird.

    Es soll ja schließlich Menschen geben, die wegen ihrer Sehschwäche im Browser die Schrift größer eingestellt haben, als du es in der Seite vorsiehst.

    mfg Maik
     
    Zitieren Zitieren
  8. 08.03.10 23:36 #8
    Avatar von Eagle-PsyX-
    Eagle-PsyX- Eagle-PsyX- ist offline Mitglied Gold
    Registriert seit
    Sep 2007
    Beiträge
    149
    Versuch mal die li-Elemente oder die Links in der Liste auf padding: 0; zu setzten.
    Also z.B. ganz unten ins Stylesheet hinzufügen.
    Code css:
    1
2
3

    .underlinemenu ul li, .underlinemenu ul li a {
  padding:0; 
}
     
    Zitieren Zitieren
  9. 09.03.10 21:00 #9
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Maik Beitrag anzeigen
    Ich schätze, da wirst du die einzelnen padding- und margin-Werte der <li>- und <a>-Elemente noch ein wenig nachjustieren müssen, damit die Links sauber in eine Zeile passen, und nicht zuvor nach unten umbrechen.
    Zitat Zitat von Eagle-PsyX- Beitrag anzeigen
    Versuch mal die li-Elemente oder die Links in der Liste auf padding: 0; zu setzten.
    Also z.B. ganz unten ins Stylesheet hinzufügen.
    Code css:
    1
2
3

    .underlinemenu ul li, .underlinemenu ul li a {
  padding:0; 
}
    Deine beiden gruppierten Selektoren wären die "Not-/Holzhammer"-Methode, falls sich da nichts rührt

    Und mit welcher Begründung nimmst du hier die vertikalen Innenabstände (padding-top, padding-bottom) raus?

    Die frühzeitigen Umbrüche beruhen auf den horizontalen Dimensionen.

    mfg Maik
     
    Zitieren Zitieren
  10. 11.03.10 07:44 #10
    EaglePsyX_mobil Tutorials.de Gastzugang
    Hi,
    nein ich meinte ich sehe die verschachtelten Padding-Elemente als Problem.
    Entweder <li> oder das Kindelement <a> aber doch nicht beides?

    P.S.: Bin am anderen Gerät ohne meine Benutzerdaten online...
     
    Zitieren Zitieren
  11. 11.03.10 16:40 #11
    Maik Tutorials.de Gastzugang
    Zitat Zitat von EaglePsyX_mobil Beitrag anzeigen
    nein ich meinte ich sehe die verschachtelten Padding-Elemente als Problem.
    Entweder <li> oder das Kindelement <a> aber doch nicht beides?
    Da stimme ich dir soweit zu, hab ich doch schon vor Tagen in Post #6 empfohlen, die einzelnen margin- und/oder padding-Werte zu überprüfen, aber deinem Vorschlag folgend lautet der Deklarationsblock dann entweder:
    Code css:
    1
2
3

    .underlinemenu ul li {
  padding:0;
}
    oder:
    Code css:
    1
2
3

    .underlinemenu ul li a {
  padding:0;
}
    aber nicht mit gruppierten Selektoren:
    Code css:
    1
2
3

    .underlinemenu ul li, .underlinemenu ul li a {
  padding:0;
}

    Letztlich führen unser beider Vorschläge aber nur zum Erfolg, solange der Seitenbesucher in seinem Browser den Schriftgrad nicht größer eingestellt hat, wie von DeDome angenommen / vorausgesetzt - siehe Post #7.

    mfg Maik
     
    Zitieren Zitieren
« CSS Menu Vorlage verändern | onmouseover nur einmalig? »

Ähnliche Themen

  1. Listenformatierung - Unterpunkte
    Von UnoDosTres im Forum CSS
    Antworten: 1
    Letzter Beitrag: 29.04.07, 22:50
  2. CSS Listenformatierung
    Von Pantalaimon im Forum CSS
    Antworten: 3
    Letzter Beitrag: 20.02.07, 06:09
  3. Falsche Platzierung im IE
    Von kevkev im Forum CSS
    Antworten: 9
    Letzter Beitrag: 15.03.05, 06:43
  4. Falsche IF Abfrage ?
    Von Don Stefano im Forum PHP
    Antworten: 4
    Letzter Beitrag: 03.03.05, 17:30
  5. Falsche Typumwandlung
    Von theindra im Forum .NET Archiv
    Antworten: 0
    Letzter Beitrag: 07.02.05, 20:24