kleines Problem mit Linkliste (margin left)

[Xeno]

Hallo zusammen!

Ich habe auf meiner Unterseite Michael Ritter das ärgerliche Problem, dass die Links (genauer eigentlich nur die Aufzählungszeichen) den von mir gewünschten Abstand links von 20px nicht einhalten, obwohl ich das doch im CSS so definiert habe.

Mein CSS:

*                         { 
                        margin:0; 
                        padding:0; 
                                        }
                                
p, #navi              { 
                        margin:0 0 20px 20px; 
                                        }
                                
h1, h2, h3             { 
                        margin:0 0 10px 20px; 
                                        }
                                
h1                     { 
                        font-size:180%; 
                                        }
                                
h2                     { 
                        font-size: 160%; 
                                        }
                                
h3                     { 
                        font-size: 140%; 
                                        }
                                
body                     { 
                        background-color:#B4DC00; 
                        font-family:Verdana, sans-serif; 
                                        }
                                
a, span                 { 
                        text-decoration:none; 
                                        }
                                
a:link                 { 
                        color:#2F54FF; 
                                        }
                                
a:visited             { 
                        color:#FF4B4B; 
                                        }
                                
a:hover                 { color:#FEFF49; 
                                        }
                                
span                     { 
                        color:#2F54FF; 
                                        }
                                
.linkliste li         { 
                        margin: 0 0 0 20px; 
                                        }
                                
#navi                 { 
                        list-style-type:none; 
                        float:left; 
                        width:100%;  
                        background-color:#FFFFFF; 
                        margin-top:5px; 
                                        }
                                
#navi li             { 
                        float:left; 
                        position:relative; 
                                        }
                                
#navi a, span         { 
                        padding:10px; 
                        display:block; 
                        background-color:#FFFFFF;
                                        }
                                    
#navi li ul         { 
                        position:absolute; 
                        left:-999999px; 
                        top:auto; 
                                        }
                                    
#navi ul li         { display:block; 
                        width:100%; 
                        font-size:90%; 
                                        }
                                        
#navi li:hover ul { 
                        left:0; 
                                        }
                                        
#navi a:hover         { 
                        color:#FF40CF; 
                                        }
                                        
#navi span             { 
                        background-color:#D2A5FF 
                                        }

Ich habe doch die Links bzw. die Linkliste mit .linkliste benamst und dieser Klasse die Formatierung { margin: 0 0 0 20px; } verpasst. Die wird irgendwie ignoriert.

Herzlichen Dank für Ideen, wie das zu reparieren ist!

Lg Xeno

 

[Tronjer]

Versuche es mal mit:

.linkliste > li {
margin-left: 20px;
}

 

[Xeno]

Versuche es mal mit:

.linkliste > li {
margin-left: 20px;
}

Lieber Tronjer

Das bewirkt leider nichts. Danke trotzdem für die rasche Antwort!

Lg Xeno

 

[Tronjer]

Wenn ich das im Firebug eingebe, rücken alle Städte um 20px nach rechts.

 

[Xeno]

Wenn ich das im Firebug eingebe, rücken alle Städte um 20px nach rechts.

Hmmm.... das Problem ist, dass der margin-left schon berücksichtigt wird, abner irgendwie ohne die Aufzählungszeichen der Listenpunkte. Als der Text der Links ist schon um 20px eingerückt (bei mir aber auch schon in der ursprünglichen Version ohne das > ), aber die Aufzählungszeichen sind links der Einrückung, was stört.

Interessantes Problem!

 

[Tronjer]

Hmmm.... das Problem ist, dass der margin-left schon berücksichtigt wird, abner irgendwie ohne die Aufzählungszeichen der Listenpunkte. Als der Text der Links ist schon um 20px eingerückt (bei mir aber auch schon in der ursprünglichen Version ohne das > ), aber die Aufzählungszeichen sind links der Einrückung, was stört.

Interessantes Problem!

Er wird eben nicht berücksichtigt, weil sich auf die <ul> das im Universal-Selektor definierte

* {
   margin: 0;  
   padding: 0;
}

vererbt. Das kann man im Firebug erkennen.

Dass der Text etwas von den list-style Elementen abgesetzt ist, hat nicht mit deinen Style-Anweisungen zu tun.

 

[Xeno]

Das mit der Vererbung der Reset-Anweisungen aufs <ul> verstehe ich. Nur dann müsste ja alles wie gewünscht klappen, wenn ich einfach nur .linkliste { margin-left: 20px; } schreibe (ohne "li"), aber das ist ebenfalls wirkungslos. obwohl ich ja jetzt das <ul> eigentlich direkt anspreche.

Es geht darum, dass die list-style-Elemente erst 20px vom linken Rand weg erscheinen. Ich hatte das schon mal in einer früheren Fassung (mit viel einfacherer Navi) der Seite. Ich kann morgen versuchen mit den Archiv-Dateien herauszufinden, wie ich das gemacht habe damals.

Wenn Du noch eine Idee hast, wie immer sehr gerne!

Lg Xeno

 

[Xeno]

Ich glaub' ich habe die Lösung jetzt:

*                         { 
                        margin:0; 
                        padding:0; 
                                        }
                                
p, #navi              { 
                        margin:0 0 20px 20px; 
                                        }
                                        
ul li                    { 
                        margin:0 0 0 20px; 
                                        }            
                                
h1, h2, h3             { 
                        margin:0 0 10px 20px; 
                                        }
                                
h1                     { 
                        font-size:180%; 
                                        }
                                
h2                     { 
                        font-size: 160%; 
                                        }
                                
h3                     { 
                        font-size: 140%; 
                                        }
                                
body                     { 
                        background-color:#B4DC00; 
                        font-family:Verdana, sans-serif; 
                                        }
                                
a, span                 { 
                        text-decoration:none; 
                                        }
                                
a:link                 { 
                        color:#2F54FF; 
                                        }
                                
a:visited             { 
                        color:#FF4B4B; 
                                        }
                                
a:hover                 { color:#FEFF49; 
                                        }
                                
span                     { 
                        color:#2F54FF; 
                                        }
                                
.linkliste             { 
                        margin-left: 20px; 
                                        }
                                
#navi                 { 
                        list-style-type:none; 
                        float:left; 
                        width:100%;  
                        background-color:#FFFFFF; 
                        margin-top:5px; 
                                        }
                                
#navi li             { 
                        float:left; 
                        position:relative; 
                                        }
                                
#navi a, span         { 
                        padding:10px; 
                        display:block; 
                        background-color:#FFFFFF;
                                        }
                                    
#navi li ul         { 
                        position:absolute; 
                        left:-999999px; 
                        top:auto; 
                                        }
                                    
#navi ul li         { display:block; 
                        width:100%; 
                        font-size:90%;
                        margin:0; 
                                        }
                                        
#navi li:hover ul { 
                        left:0; 
                                        }
                                        
#navi a:hover         { 
                        color:#FF40CF; 
                                        }
                                        
#navi span             { 
                        background-color:#D2A5FF 
                                        }

Ich habe neu eine Anwesung für ul li , die akzeptiert wird. In der navi muss die noch aufgehoben werden, da sonst Zerreffekte in der Navi entstehen.

Danke an Tronjer fürs Mitdenken!

Lg Xeno

P.S.: Ich schalte die reparierte Seite bzw. das neue CSS dann erst morgen scharf.

 

[Tronjer]

Die Vererbung in CSS hat gelegentlich ihre Tücken. Ein in einer Klasse definiertes Attribut überschreibt nicht in jedem Fall die Anweisung des übergeordneten Elements. Je tiefer du den Style definierst, desto höher seine Gewichtung, oder anders fomuliert erhält bsw.

ul li .linklist {
  margin: 20px !important;
}

eine höhere Priorität als ein reines

.linklist {
  margin: 20px;
}

Wobei CSS, wie mein alter Tutor mal formulierte, keine "exakte Wissenschaft" und obendrein browser-spezifisch ist. Insofern bringt try & error da manchmal mehr als reines theory crafting. Hauptsache es funktioniert.

 

[mermshaus]

Ein Stichwort dazu wäre Spezifität von Selektoren.

- SELFHTML: Stylesheets / CSS-Formate definieren / Kaskade - Anwendung von Stylesheets auf Dokumente

 

[Xeno]

Danke für diese interessanten Postings. Es geht in der Tat fast sicher um das Problem der Hierarchie der Anweisungen. Es ist tatsächlich für einen Einsteiger recht komplex. Ich habe jetzt die oben gepostete Formatierung scharf geschaltet, was das ursprüngliche Problem löst, mir dafür aber wieder Störungen in der Navi verursacht. Die aktuelle Seite ist Michael Ritter

Beispielsweise ist die lila Färbung der aktuellen Seite in der Navi im Falle der Hauptseite nicht linksbündig zur ganzen Navi, so dass es dort einen weissen Abstand hat.

Ich pröble weiter herum - Ideen sind natürlich willkommen!

Lg Xeno

 

[Tronjer]

Ein margin: 0 auf #nav li sollte für Abhilfe sorgen.

 

[Xeno]

Grundsätzlich ja, das heisst das Problem in der Navi ist dann tatsächlich weg. Umgekehrt ist aber das Problem mit dem fehlenden Einrücken der Links auf Michael Ritter so wieder nicht gelöst.

Ich habe jetzt Folgendes gemacht: Ich habe der Klasse .linkliste li 37,5 Pixel Abstand gegeben statt 20. Komischerweise werden 37,5 (und jeder andere Wert grösser als 20) geschluckt, 20 aber nicht, hier wird das von den Reset-Angaben herkommende 0 genommen. Sehr merkwürdig! Der Übersicht halber mein aktueller CSS-Code (ist aufgeschaltet):

*                         { 
                        margin:0; 
                        padding:0; 
                                        }
                                
p, #navi              { 
                        margin:0 0 20px 20px; 
                                        }



h1, h2, h3             { 
                        margin:0 0 10px 20px; 
                                        }
                                
h1                     { 
                        font-size:180%; 
                                        }
                                
h2                     { 
                        font-size: 160%; 
                                        }
                                
h3                     { 
                        font-size: 140%; 
                                        }
                                
body                     { 
                        background-color:#B4DC00; 
                        font-family:Verdana, sans-serif; 
                                        }
                                
a, span                 { 
                        text-decoration:none; 
                                        }
                                
a:link                 { 
                        color:#2F54FF; 
                                        }
                                
a:visited             { 
                        color:#FF4B4B; 
                                        }
                                
a:hover                 { color:#FEFF49; 
                                        }
                                
span                     { 
                        color:#2F54FF; 
                                        }
                                
.linkliste li         { 
                        margin-left:37.5px; 
                                        }
                                        
                                
#navi                 { 
                        list-style-type:none; 
                        float:left; 
                        width:100%;  
                        background-color:#FFFFFF; 
                        margin-top:5px; 
                                        }
                                
#navi li             { 
                        float:left; 
                        position:relative; 
                                        }
                                
#navi a, span         { 
                        padding:10px; 
                        display:block; 
                        background-color:#FFFFFF;
                        margin:0;
                                        }
                                    
#navi li ul         { 
                        position:absolute; 
                        left:-999999px; 
                        top:auto; 
                                        }
                                    
#navi ul li         { display:block; 
                        width:100%; 
                        font-size:90%;
                        margin:0; 
                                        }
                                        
#navi li:hover ul { 
                        left:0; 
                                        }
                                        
#navi a:hover         { 
                        color:#FF40CF; 
                                        }
                                        
#navi span             { 
                        background-color:#D2A5FF;
                                        }

Diese Lösung funktioniert zumindest im aktuellen Firefox, ist aber wohl nicht so elegant.

Lg Xeno

 

[Tronjer]

Es gibt meistens mehrere Wege, die zum Ziel führen. Du könntest zum Beispiel deine HTML-Struktur weiter ausdifferenzieren, damit sich die Selektoren leichter ansprechen lassen. Das wäre auch semantisch ein eleganterer Ansatz.

<!DOCTYPE html>
<html>
<head>.
</head>
<body>
    <nav>
        <ul>
            <li>
               <a href="#">Hauptseite</a>
            <li>
        </ul>
    </nav>
    <section>
        <article id="links">
            <header>
                <h1>Links</h1>
            </header>
            <p>In meinen Linklisten ....</p>
        </article>
        <article id="cities">
            <header>
                <h2>Stadt Burgdorf, Nachbargemeinden ...</h2>
            </header>
            <section id="burgdorf" class="communities">
               <header>
                   <h3>Stadt Burgdorf</h3>
               </header>
                <ul>
                    <li><a href="#">Stadt Burgdorf></a><li>
                    <li>...</li>
                <ul>
            </section>
            <section id="nachbargemeinde" class="communities">
               <header>
                   <h3>Nachbargemeinden von Burgdorf</h3>
               </header>
                <ul>
                    <li><a href="#">Kirchberg BE></a><li>
                    <li>...</li>
                <ul>
            </section>
        </article>
    </section>
</body>
</html>

Einen Link zum besseren Verständnis findest du hier:
HTML5 Part 1: Semantic Markup and Page Layout - Jennifer Marsman - Site Home - MSDN Blogs

 

[Xeno]

Lieber Tronjer

Herzlichen Dank für Deinen Input! Ich habe dazu eine allgemeine Frage: Du schlägst vor, dass ich auf HTML 5 wechsle (ich habe meine Seite bisher in HTML 4.01 strict gemacht). Ist die broweserseitige Unterstützung für HTML 5 schon so gut, dass das problemlos geht? Ich habe irgendwi gelesen, erst 2014 (ok, ist schon bald) werde HTML 5 ganz offiziell zum Standard.

Versteh' mich nicht falsch: Ich möchte keine Technik von vorgestern einsetzen (daher kein Layout mit Tabellen, alle Formatierungen über CSS, usw.). Aber ist HTML 5 nicht ein wenig das andere Extrem? Auf browserspezifischen Code möchte ich womöglich verzichten (nicht weil dafür per se zu doof bin, sondern weil das für einen Einsteiger wie mich einen erheblichen Zusatzaufwand bedeutet).

Deshalb war die Wahl von HTML 4.01 strict an sich recht bewusst, da damit die Kompatibilitätfragen praktisch wegfallen (gegen unten erlaube ich mir IE 6 zu ignorieren; umgekehrt soll ja HTML 4.01 voll aufwärtskomatibel zu HTML 5 sein).

Ich habe mich aber natürlich nicht derart fundiert mit diesen Fragen beschäftigt, als dass ich mir jetzt erlauben würde zu sagen der Entscheid sei völlig richtig. Klar ist für mich auch, dass ein Umstieg zu HTML 5 auf jeden Fall kommen wird.

Was ist Deine (bzw. Eure) Meinung zu dem?

Lg Xeno

 

[Tronjer]

Es gibt keinen Grund auf 2014 zu warten. Du kannst jetzt bereits den HTML5 Doctype verwenden. Der lässt sich sehr viel einfacher im Gedächtnis behalten als das umständliche HTML-4-Pendant mit XML Namespace. Für ältere Browser setzt man unbekannte CSS-Selektoren, wie header, article, section, etc., auf display: block. Ein entsprechendes Template findest du hier:

http://http://html5boilerplate.com/

 

[Xeno]

Lieber Tronjer

Danke für das Posting. Es überfordert mich im Moment (noch) etwas. Deshalb wechsle ich noch nicvht auf HTML 5, aber ich nehme Deinen Input ernst und erwäge einen gelegentlichen Wechsel.

Lg Xeno

 

[Tronjer]

Kann ich durchaus nachvollziehen. Ich bin seinerzeit aus einem ähnlichen Anlass wie du eingestiegen und war zu Beginn auch völlig erschlagen vom Information Overload. Eine meiner ersten Fragen in diesem Forum drehte sich um float und clear, das fand ich damals ziemlich kompliziert.

Den HTML5 Doctype kannst du aber trotzdem verwenden, auch wenn du dir die neuen Tags noch nicht einprägen willst.

 

[Xeno]

Danke für die nette Antwort. Ich habe gehofft Du seist nicht zu säuerlich, wenn ich nicht gleich alles umsetzen oder einsetzen kann, was empfohlen wird. Ja, float und clear finde ich am Anfang recht schwer verständlich. Tröstlich, dass es anderen auch so gegangen ist.

Interessant, dass der Doctype trotzdem einsetzbar ist - nein, eigentlich logisch, html 5 ist ja eine Obermenge von html 4.01 strict, dann muss das ja funktionieren. Den Wechsel werde ich deshalb bald machen.

Ist eigentlich der Doctype xml so etwas wie ein Übergang zwischen html 4.01 strict und html 5? Ich habe Einiges darüber gelesen, aber da wurde mir irgendwann etwas schwindlig! Diese Abschlussfrage des Freds ist natürlich fürs Ausgangsproblem nicht mehr zentral; wenn Du sie aus Interesse beantworten willst, gut, sonst aber auch recht!

Lg XEno

 

[Tronjer]

XHTML 1.0 ist eine Neudefinition von HTML 4.01. Die Version 2.0 wurde zu Gunsten von HTML5 nicht mehr weiterentwickelt. Bei XML hingegen handelt es sich um eine Auszeichungsprache, in der man eigene Tags definieren kann. Für dein gegenwärtiges Projekt ist das aber nicht relevant. Du könntest für den HTML 4.01 Doctype ebensogut ein transitional verwenden. Nur loose wäre schlechter Stil.

Davon abgesehen macht es Spaß, jemandem zu helfen, der sich ernsthaft mit der Materie auseinandersetzt und lernwillig ist. Im Gegensatz zu den vielen anderen, die mit ihren iFrames und Tabellenlayout aufwarten. Als Lehrer wirst du das wahrscheinlich nachvollziehen können. ;)