WebWork Magazin - Webseiten erstellen lassen, Online Medien, html

Webhoster, Webhosting Provider und Domain registrieren

Home | Registrieren | Einloggen | Suchen | Aktuelles | GSL-Webservice | Suleitec Webhosting
Reparatur-Forum | Elektro forum | Ersatzteilshop Haushalt und Elektronik


Homepage und Webhosting-Forum

HTML, XHTML, CSS , style, XML, Javascript und mehr, Fragen, Tipps und Anregungen zu diesen Basic Techniken - hier rein !


Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » Link Formatierung via CSS » Antworten
Benutzername:
Passwort: Passwort vergessen?
Inhalt der Nachricht: Fett | Kursiv | Unterstrichen | Link | Bild | Smiley | Zitat | Zentriert | Quellcode| Kleiner Text
Optionen: Emailbenachrichtigung bei Antworten
 

Die letzten 5 Postings in diesem Thema » Alle anzeigen
von zen_meister
Danke für die Tipps und Lösungsansätze!

@Philipp Gérard: Der Vorschlag mit <div> hat genau zu dem gesuchten Ergebnis geführt. Funzt auch in allen aktuellen Browsern (IE, NC, Opera, Firefox, usw.).

von subjective
Allerdings macht hier unter Umständen mal wieder der IE Probleme, da er zum einen :before gar nicht kennt, zum anderen :hover nur für <a> macht.
von Philipp Gérard
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11:
.navi {
    background-image: url(bg.gif);
    background-repeat: repeat-x;
    background-position: 0px bottom
}
.navi a {
    background-image: url(pfeil.gif);
    background-repeat: no-repeat;
    padding-left: 15px;
    background-position: 5px center
}


1:
<div class="navi"><a href="foo.php">foo</a></div>
von HoRnominatoR
theoretisch machbar, praktisch wird dein kunde wohl aber einen veralteten browser benutzen so dass der pfeil nicht angezeigt wird.

1: 
2: 
3: 
4: 
5: 
6: 
7:
.navi {
 background:url(striche.png) bottom repeat-x;
}

.navi a:before {
 content:url(pfeil.png);
}


alternativ den pfeil als extra image einfuegen, oder ein entsprechendes hintergrundbild machen, dass sowohl linie (entsprechend lang oder laenger) als auch pfeil enthaelt mit background:url(striche-pfeil.png) bottom no-repeat;
von zen_meister
Die Linie kann zwar auch mit CSS (dotted) erzeugt werden, jedoch nicht 100% gemäß grafischer Vorlage (Kundenwunsch).

Das hat ja die ganze Problematik verursacht!?

Nach oben