Menu Fehler

[EuropaChat]

Hallo,

Habe folgendes Problem: Wenn ich im CSS Code vom Menü bei diesem Code das #men davor schreibe wird es so angezeigt wie auf dem Screen (falsch) mache ich das #men nicht hin,
wird es richtig dargestellt. Das Problem ist, das #men muss dran bleiben.

Screen: http://www.bilder-upload.eu/show.php?file=z9kxdeNGeIwGC4e.jpg

Code:

#men * {margin:0;padding:0;font:normal normal normal 1em/1em sans-serif;text-decoration:none;}

Was kann ich tun?

 

[SpiceLab]

Zunächst das Browserverhalten ohne den Universalselektor "*" im Anschluß des ID-Bezeichners #men prüfen:

#men  {margin:0;padding:0;font:normal normal normal 1em/1em sans-serif;text-decoration:none;}

 

[EuropaChat]

Jetzt sieht es so aus: http://wakeboarder.lima-city.de

 

[SpiceLab]

Na, dann lässt sich doch beim Vergleich der beiden Darstellungen daraus deutlich und erkennbar ableiten, dass in dem DIV #men HTML-Elemente enthalten sind, die die beiden CSS-Regeln margin:0 u. padding:0 benötigen, andere jedoch wiederum nicht, die durch den Universalselektor einbezogen wurden.

Und wo ist hier nun das Problem, das so umzusetzen?

#men  {margin:0;padding:0;font:normal normal normal 1em/1em sans-serif;text-decoration:none;}

/* Zusatz zu meinem zuletzt gezeigten CSS */
#men p,
#men h2,
#men dl,
#men dt,
#men dd {
margin:0;
padding:0;
}

 

[EuropaChat]

Irgenwie verstehe ich nicht deinen Zusatz gezeigten CSS Code. Wie soll ich das nun machen?

 

[SpiceLab]

Meinen Zusatz vielleicht einfach in dein Stylesheet an besagter Stelle hineinkopieren? Was sonst?

Junge, junge ... ein wenig mitdenken ist bei dir wohl Glückssache, denn dafür braucht's nun wirklich keine sonderlichen Kenntnisse in CSS :suspekt:

 

[EuropaChat]

Achso das in den CSS Code darunter oder.

#men p,
#men h2,
#men dl,
#men dt,
#men dd {
margin:0;
padding:0;
}

Wenn ja, jetzt sieht es wieder anders aus. http://wakeboarder.lima-city.de

So hab ich es:

#men {margin:0;padding:0;font:normal normal normal 1em/1em sans-serif;text-decoration:none;}
#men {font-size:10px}
#men {width:218px;}
#men p, #men div {margin:9px;}
#men .img a {border-bottom:1px solid #99f;}
#men .bsection {border:1px solid #99f;}
#men .img a, .bsection * {padding:.3em;}
#men a, dt {color:#aad;display:block;}
#men h2 {background:#eef;color:#779;font-weight:bold;font-size:1.1em;}

#men p,
#men h2,
#men dl,
#men dt,
#men dd {
margin:0;
padding:0;
}

 

[SpiceLab]

Sorry, hatte was vergessen :-(

#men p,
#men h2,
#men dl,
#men dt,
#men dd {
margin:0;
padding:3px 0; /* Ergänzung für vertikale Abstände - den "3px"-Wert evtl. den eigenen Vorstellungen angleichen */
}

 

[EuropaChat]

Irgendwie ist das so komisch. Kann man es einfacher auch machen? Weil das zeigt es ganz anders an als gewollt.

 

[SpiceLab]

Wie gesagt, der Universalselektor "*" bezieht alle HTML-Elemente ein, die innerhalb des <div>-Elements #men enthalten sind, und erhalten die festgelegte Formatierung, was dir so nicht zusagt.

Also liegt es nun an dir, anstelle der universellen Formatierung, diese gezielt auf einzelne, bestimmte Elemente anzuwenden.

Sollte meine denkbare Gruppierung der Selektoren noch immer zu "universell" sein, kannst du sie auch problemlos in einzelne Selektoren aufsplitten, um zwischen ihren Formatierungen differenzieren zu können.

Die drei Punkte zwischen den {}-Klammern sind hier selbstverständlich durch die jeweiligen Angaben zur margin- und padding-Eigenschaft zu ersetzen.

#men p { ...}
#men h2 { ... }
#men dl { ... }
#men dt { ... }
#men dd { ... }

Anfürsich hast du alles Wissenswerte beisammen, um nun den Darstellungsfehler deinen Wünschen entsprechend zu korrigieren.