ABAKUS

Verfasst: **08.12.2010, 11:26**

Hallo

möchte innerhalb einer Liste bestimmte Einträge () einrücken und das gif-Bullet das bei li gilt ausschliessen. Kriege es nicht hin, Unten der Code:
Kann jemand helfen
gruss

HTML

<ul id="navlist">
<li><a class="focus">Arbeitnehmer</a>
<a href="1.htm">Gehalt</a>
<a href="2.htm">ArbGZU</a></li>

<li><a href="5.htm">Selbständige</a></li>
<li><a href="6.htm">Künstler</a></li>
</ul>

css-code

#navlist li{
list-style-type: none;
padding-left: 2px;
border-bottom: 1px dashed #999;
}

#navcontainer a{
display: block;
padding-left: 14px;
padding-top: 4px;
padding-bottom: 4px;
width: 140px;
background-image: url('punkt.gif');
background-repeat: no-repeat;
background-position:left;
}

#navcontainer a:link{
color: #0000CC;
text-decoration: none;
}

#navlist a:visited{
text-decoration: none;
}

.focus{
background: #fcee94;
font-family: Verdana, Arial;
font-size: 9pt
}

Verfasst: **08.12.2010, 11:33**

<li><a class="focus">Arbeitnehmer</a>
<a href="1.htm">Gehalt</a>
<a href="2.htm">ArbGZU</a></li>

Und was soll das da drinnen, bzw, warum stehen die nicht in einem <li> ??

Pack die in ein <li>, geb denen eine Klasse und definiere in der Klasse die Breite der Einrückung und, dass Du kein Symbol davor haben willst.

Alternativ mach eine Unterlieste, also etwa so:

Code: Alles auswählen

<ul id="navlist">
	<li>
		<a class="focus">Arbeitnehmer</a>
		<ul class="neue">
			<li><u><a href="1.htm">Gehalt</a></u></li>
			<li><u><a href="2.htm">ArbGZU</a></u></li>
		</ul>
	</li>
	<li>
		<a href="5.htm">Selbständige</a>
	</li>
	<li>
		<a href="6.htm">Künstler</a>
	</li>
</ul>

Verfasst: **08.12.2010, 11:48**

Ich würde dir raten, Listen zu verschachteln. Dann kannst du den jeweiligen Listen CSS-Klassen mit dem gewünschten Stil verpassen und – vor allen Dingen – ist das Ganze dann semantisch korrekt aufgebaut.

Code: Alles auswählen

<ul>
    <li>Arbeitnehmer
        <ul>
            <li>Gehalt</li>
            <li>ArbGZU</li>
        </ul>
    </li>
    
    <li>Selbstständige</li>
    <li>Künstler</li>
</ul>

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Verfasst: **08.12.2010, 12:38**

Hallo, versuche das umzusetzen und hab Probleme mit demm css-code. Also Klasse "einruck" in html gesetzt, so:

<ul>
<li>Arbeitnehmer
<ul class="einruck">
<li>Gehalt</li>
<li>ArbGZU</li>
</ul>
</li>

<li>Selbstständige</li>
<li>Künstler</li>
</ul>

dann für einruck die css-formatierung:

.einruck{
padding-left: 14px;
border-bottom: none;
background-image: none;
}

Ergebnis: es passiert nichts. Der oben geposetet css-code formatiert auch die neue Klasse. Was mache ich falsch?

gruss

Verfasst: **08.12.2010, 13:20**

Was bitte heißt "es passiert nichts"?? Was soll denn passieren?

Guggst Du hier:
https://1nt.de/test-2.html

"padding-left" funktioniert da. "border" und "background" nicht, da beides per default nicht vorhanden ist. Daher die Frage, was soll denn passieren?

Verfasst: **08.12.2010, 13:41**

Die Begriffe Gehalt und ArbGZU (Sekundärbegriffe) sollen genau unter dem Begriff - Arbeitnehmer eingerückt werden, also Angangsbuchstabe beginnt an selber Stelle. Zweitens soll passieren, dass der Bullet-Punkt (kleine Grafik), der links vor Arbeitnehmer steht nicht vor den Sekundärbegriffen Gehalt und ArbGZU erscheinen soll. Hoffe ist jetzt klarer geworden.

gruss

Verfasst: **08.12.2010, 14:19**

Wenn der Anfangsbuchstabe an der selben Stelle beginnen soll, dann ist es ja nicht eingerückt. Eigentlich soll ja nur der Punkt verschwinden.

Das mit der verschachtelten Liste war ja dafür, dass eine weitere Einrückung erfolgt!

So... guggst Du nochmal: https://1nt.de/test-2.html

Verfasst: **08.12.2010, 15:55**

ok, das ist jetzt besser, besonders die Lösung ohne Verschachtelung scheint mir praktisch.

<ul id="navlist">
<li>Arbeitnehmer
<li class="nostyle">Gehalt</li>
<li class="nostyle">ArbGZU</li>
</li>
<li>Selbstständige</li>
<li>Künstler</li>
</ul>

Was mir nicht gelingen will ist die Entfernung der unteren Striche. Diese sollen nur für die Primärbegriffe Arbeitnehmer, Selbst. usw. gelten, nicht aber für Gehalt und ArbGZU. Sind so definiert:

#navlist li{
list-style-type: none;
padding-left: 2px;
border-bottom: 1px dashed #999;
}

Ich versuche sie jetzt für die Sekundärbegriffe wieder zu entfernen, so

.nostyle {
margin-left: 14px;
color: #808080;
border-bottom: none;
}

Geht aber nicht! Weißt Du woran es liegt?
gruss

Verfasst: **08.12.2010, 16:05**

äh, da war eh ein Fehler im Code...

so sollte der heißen:

Code: Alles auswählen

<ul id="navlist">
<li>Arbeitnehmer</li>
<li class="nostyle">Gehalt</li>
<li class="nostyle">ArbGZU</li>
<li>Selbstständige</li>
<li>Künstler</li>
</ul>

hatte die Verschachtelung nur zum Teil gelöscht.

Code: Alles auswählen

.nostyle &#123;
margin-left&#58; 14px;
color&#58; #808080;
border-bottom&#58;none !important;
&#125;

wobei ich das ganze nun wieder nicht verstehe... Erst soll es eingerückt werden, dann nicht und nun kommst Du wieder mit "margin-left: 14px;", rückst also ein...

Verfasst: **08.12.2010, 16:29**

ok, das geht jetzt, danke. Den importent-Ausdruck muss man erst kennen.

Verfasst: **08.12.2010, 16:51**

Hilfe, was bastelt ihr da für unsauberen Code?
Bin hier grad am Handy, daher ist es mit Beispielen eher schlecht.
Die von der Gliederung her saubere Lösung wäre tatsächlich eine weitere ul innerhalb eines sonst leeren Listenpunktes der äußeren Liste. Für die inneren li braucht man dann nicht mal eine Klasse, sondern kann dort sie über ul ul li oder ul li ul li ansprechen.
Und dann gibt es noch so schicke Eigenschaften wie outside, am besten einfach mal bei css4you gucken, was man so mit Listen anstellen kann. Und für den Rest immer mal bei selfhtml stöbern.

ABAKUS

Einträge in Liste einrücken

Einträge in Liste einrücken