[Kroan]

Hallo allerseits,

ich denke ich habe hier eine richtige Noob Frage am Start. Habe schon rum gegoogled aber irgendwie funktioniert keiner der angegebenen Lösungen.

Muss vielleicht dazu erwähnen, dass ich eigentlich kein Webentwickler bin und deshalb bei meinem Projekt mehr learning by doing betreibe als sonst was.^^

Also folgendes:

Im Header Bereich sind alle Links der Website. Also habe ich mir im CSS eine Klasse linkheader angelegt:

.linkheader
{
         width:954px;
         height:66px;
         margin-left:35px;
         display:block;

}

Diese dient nur als "Rahmen" für den Inhalt. Inhalt sind 9 Links, welche ich wie folgt deklariert habe:

.linkheader a
{

         width:104px;
         height:66px;
         border-left:2px;
         border-left-color:#FFFFFF;
         border-left-style:dotted;
         color:#FFFFFF;
         text-decoration:none;
         text-align:center;
         line-height:66px;

         font-size:22px;
         float:left;
         background:#896957;
}

.linkheader a:hover
{
         background:#B6265F;
}

Nun müsste der erste Link, ohne linken Border sein, damit das Design passt. Also wollte ich hierfür einfach eine neue Klasse machen und diese dem ersten Link zuweisen. Das übernimmt er aber nicht, sondern einfach weiterhin die Hauptklasse.

Hier mal noch die Klasse für den ersten Link:

.first
{
         width:104px;
         height:66px;
         color:#FFFFFF;
         text-decoration:none;
         text-align:center;
         line-height:66px;
         font-size:22px;
         float:left;
         background:#896957;
}

Versucht habe ich schon:
- Von Klasse auf ID wechseln.
- Von Klasse auf ID wechseln, aber die klasse für den ersten beibehalten
- "Subklassen" von linkheader erzeugen über .linkheader .first a oder .linkheader a.first

Joa...so binde ich das Ganze übrigens in das HTML Dokument ein:

<div class="linkheader">
                <a href="" class="first">Link Nummer 1</a>
</div>

Ja also die Frage:

Wie schaffe ich es, dass der erste Link (und später dann ja auch der selektierte Link) anders gestaltet wird?

Ich bedanke mich schon mal herzlich im Voraus und verbleibe bsi dahin mit freundlichen Grüßen.

Kroan

[explanator]

Zitat von Kroan

Habe schon rum gegoogled aber irgendwie funktioniert keiner der angegebenen Lösungen.

Dann machst du vielleicht etwas grundlegendes falsch.

und deshalb bei meinem Projekt mehr learning by doing betreibe als sonst was.

Dann ändere das und lerne auch was du da anwenden willst. Grundlegende Funktionalitäten erlernt man nicht so, sondern durch anlesen der Elemente und deren Eigenschaften, sowie deren CSS-Möglichkeiten.

Nun müsste der erste Link, ohne linken Border sein, damit das Design passt. Also wollte ich hierfür einfach eine neue Klasse machen

Falscher Ansatz, dazu gibt es eine CSS-Eigenschaft.

Wie schaffe ich es, dass der erste Link (und später dann ja auch der selektierte Link) anders gestaltet wird?

Mit CSS. Lese dich ein, kann ich nur sagen, sonst bist du 10 Minuten später mit der nächsten Frage hier.

Lesetipp:
HTML5-Handbuch - Webkompetenz

[Kroan]

Hi,
erstmal Danke für die Antwort.

Zitat von explanator

Dann machst du vielleicht etwas grundlegendes falsch.

Davon geh ich aus darum dachte ich ich frage mal nach, wo man sich auskennt.

Zitat von explanator

Dann ändere das und lerne auch was du da anwenden willst. Grundlegende Funktionalitäten erlernt man nicht so, sondern durch anlesen der Elemente und deren Eigenschaften, sowie deren CSS-Möglichkeiten.

Also... ich kenne keinen besseren Weg als learning by doing.^^ Das beinhaltet das letztlich ja auch. Erst schau ich mir an was es gibt und wie es funktionieren soll (wie es letztlich funktioniert ist ja öfter auch mal was anderes). Und dann wird es ausprobiert.

Zitat von explanator

Falscher Ansatz, dazu gibt es eine CSS-Eigenschaft.

Meinst du first-child? Also a:first-child? Wenn ja, dass funktioniert leider auch nicht.


Viele Grüße

Kroan

[explanator]

Lade es hoch auf einen Webspace und zeige uns den Link, damit wir uns das ansehen können.

[lottikarotti]

Hallöchen,

Zitat von Kroan

Also... ich kenne keinen besseren Weg als learning by doing.^^

Nur leider bleibt von "learning by doing" recht schnell nur noch "doing" übrig -- und zwar "everything wrong". Gerade bei Themen wie HTML und CSS ist das Wissen um die Thematik ausschlaggebend für einen erfolgreichen Einsatz. Der beste Weg um sich dieses Wissen anzueignen ist Little Boxes durchzuarbeiten. Viele Dinge regeln sich anschließend von selbst.

Viele Grüße,
lotti

[Kroan]

So, danke an euch Beide für die Hilfe.

Ich verspreche hoch und heilig, dass ich mir irgendwann die Zeit dafür nehme um die Dinge richtig zu lernen. Habe nur im Moment neben Studium, Arbeit und diesem Ehrenamt das ich übernommen habe keine Zeit dafür und das Projekt muss ja auch fertig werden.

Also an alle die vielleicht mal ein ähnliches Problem haben, bei mir hat nun folgendes geklappt (Danke an explanator, der mich in die Richtung geschubst hat).

In meiner .css Datei habe ich noch folgendes deklariert:

.linkheader a:first-child
{
         border-left:0px;
}

Wichtig war hier, zu sagen das border-left hier 0px ´hat. Anders als ich erwartet hatte, übernahm a:first-child trotzdem noch alle Eigenschaften von a außer natürlich denen, die "überschrieben" wurden. Das heißt das first-child den 2px breiten Border von a übernahm und deshalb sah es so aus, als würde nichts geschehen. Darum reicht es auch nur den Border auf 0px zu setzen und sonst keine weiteren Angaben zu machen.


Viele Grüße

Kroan