• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Gliederung in ungeordneter Liste greift nicht

I

Industriemeister

Mitglied
Hi,

ich habe in einem Datenbankeintrag folgende Eintrag
HTML: 
<li>Zur Orientierung nun Kommentare/Meinungen zu den Storys unter der Vorschau der <nowrap>Story-Übersicht</nowrap></li>
<li>Für eine verbesserte Übersicht der Serien gibt es nun:</li>
  <ul>
      <li>Eine Übersicht mit Beschreibung der ganzen Serie <em>(In der Navigation)</em></li>
      <li>Und unter der Story eine &quot;Serien-Tour&quot; mit Links zu den anderen Storys der Serie</li>
   </ul>
</li>

Das führende <ul> und abschließende </ul> steht in der Datei die den Datenbankeintrag aufruft.

in der css-datei ist die führende li mit einer classe definiert
Code: 
.newsliste_UpDate { padding-top: 5px;
             padding-left: 10px;
             padding-bottom: 0px;
             margin-top: 0px;
             text-align: left;
             margin-right: 20px;
             list-style-image: url(../Images/dot.gif);
             border-bottom: 1px solid #BF0000;
             }

ich hätte erwartet das die Einrückung dennoch funktioniert, denn der class wurde kein li oder anderes vor ausgestellt.

Wie muss ich die css Angabe erweitern bez. eine weitere hinzufügen?
 
Ich sehe nicht, wie die CSS-Regel und der gezeigte Code zusammenpassen. Du vergibst die CSS-Klasse im HTML-Code überhaupt nicht.

Edit: Für die Frage ist übrigens irrelevant, ob etwas aus der Datenbank kommt. Es ist lediglich interessant, welcher fertige Code an den Browser geschickt wird.
 
Zuletzt bearbeitet:
Wo das herkommt ist sicher unwichtig. War nur eine Randinfo.

Diesen Quelltext wirft das php aus. Und so sollte das dann auch vom html richtig sein und eine Einrückung nach dem ersten <li> erzeugen. Denn dort kommt ja ein weiteres <ul>. Auch selfhtml bestätigt mir das dies so richtig ist. Deshalb denke ich das die Vorgaben im css bei der class die Einrückung unterdrücken. Genau das ist aber meine Schwierigkeit beim css. Wenn ich mehrere Klassen hinter einander habe bin ich nicht so sicher wie das in der css-datei geschrieben werden muss. Damit es dann auf den Code unten entsprechende reagiert.

Ob ich dafür eine Pseudoklasse brauche? Ich denke eigentlich sollte es auch so funktionieren... oder nicht?

HTML: 
<ul class="newsliste_UpDate"><img src="Images/tech_update.gif" alt="" border="1" width="26"><strong> Technisches UpDate</strong><br />
   <li>Zur Orientierung nun Kommentare/Meinungen zu den Storys unter der Vorschau der <nowrap>Story-Übersicht</nowrap></li>
   <li>Für eine verbesserte Übersicht der Serien gibt es nun:</li>
   <ul>
       <li>Eine Übersicht mit Beschreibung der ganzen Serie <em>(In der Navigation)</em></li>
       <li>Und unter der Story eine &quot;Serien-Tour&quot; mit Links zu den anderen Storys der Serie</li>
    </ul>
   </li><br />
</ul>
 
Zuletzt bearbeitet:
Nein, sicher nicht. Direkt unterhalb von <ul> dürfen nur <li>'s kommen. Da darf kein <img> oder Text stehen.
 
Um es zu verdeutlichen.

Falsch:
HTML: 
<ul class="newsliste_UpDate"><img src="Images/tech_update.gif" alt="" border="1" width="26"><strong> Technisches UpDate</strong><br />
   <li>Zur Orientierung nun Kommentare/Meinungen zu den Storys unter der Vorschau der <nowrap>Story-Übersicht</nowrap></li>
   <li>Für eine verbesserte Übersicht der Serien gibt es nun:</li>
   <ul>
       <li>Eine Übersicht mit Beschreibung der ganzen Serie <em>(In der Navigation)</em></li>
       <li>Und unter der Story eine &quot;Serien-Tour&quot; mit Links zu den anderen Storys der Serie</li>
    </ul>
   </li><br />
</ul>

Richtig:
HTML: 
<ul class="newsliste_UpDate">
    <li><img src="Images/tech_update.gif" alt="" border="1" width="26"><strong> Technisches UpDate</strong></li>
   <li>Zur Orientierung nun Kommentare/Meinungen zu den Storys unter der Vorschau der <nowrap>Story-Übersicht</nowrap></li>
   <li>Für eine verbesserte Übersicht der Serien gibt es nun:
   <ul>
       <li>Eine Übersicht mit Beschreibung der ganzen Serie <em>(In der Navigation)</em></li>
       <li>Und unter der Story eine &quot;Serien-Tour&quot; mit Links zu den anderen Storys der Serie</li>
    </ul>
   </li>
</ul>

Ideal:
HTML: 
<h1>Technisches UpDate</h1>
<ul class="newsliste_UpDate">
   <li>Zur Orientierung nun Kommentare/Meinungen zu den Storys unter der Vorschau der <nowrap>Story-Übersicht</nowrap></li>
   <li>Für eine verbesserte Übersicht der Serien gibt es nun:
   <ul>
       <li>Eine Übersicht mit Beschreibung der ganzen Serie <em>(In der Navigation)</em></li>
       <li>Und unter der Story eine &quot;Serien-Tour&quot; mit Links zu den anderen Storys der Serie</li>
    </ul>
   </li>
</ul>
 
in der *.css Datei

Soweit habe ich das so gemacht.
Da aber in meiner css-datei eine Angabe für padding-left steht muss ich da eine Unterscheidung rein bringen.

Code: 
ul.newsliste_UpDate { padding-top: 5px;
             padding-left: 10px;
}

Code: 
li ul.newsliste_UpDate { padding-top: 5px;
             padding-left: 30px;
}

ich bin mir aber nun nicht so sicher wie ich das richtig aufschreibe.
Denn auch die weitere Einrückung wird auf 10px gesetzt.

ich hat bisher nur .newsliste_UpDate

Wie mache ich es richtig? Und warum wird das dann so aufgeschrieben? Wann kommen Punkte mit in die Deklaration?

Danke für die Mühe.
Ich habe nun herausgefunden das ich ul,li .newsliste_UpDate deklarieren muss.
Ich vermute das diese Aufzählung in der Deklaration sein muss damit es für beide gilt.
 
Zuletzt bearbeitet:
Vermuten kannst Du viel. Du musst wissen, welche Selektoren in CSS für was gelten.

Code: 
ul li { .. }

betrifft alle li innerhalb eines ul, somit auch die die <ul><li><ul><li> stehen.

Wenn Du für <ul><li><ul><li> andere Angaben machen willst, kannst Du entweder diese Ausnahmeregelung direkt angeben

Code: 
ul li { .. }
ul li li { .. }

oder in oben stehender Deklaration angeben, dass diese nur für direkte Nachfahren gültig ist:

Code: 
ul > li { .. }

Deine Klasse hattest Du vorhin beim <ul> definiert. Jetzt hast Du sie scheinbar dem <li> zugeordnet. Du musst dir im Klaren sein wie Du was formatieren willst, dann musst Du auch nicht raten wo welche Klasse hin muss.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben