Link Formatierung via CSS im Forum Homepage Hosting

Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » Link Formatierung via ... - 03 Dez 2024

im Forum für Webhosting Homepage gefunden:

Link Formatierung via CSS

zen_meister

Feiertags-Poster
Threadstarter

Beiträge: 31

Hallo,

ich möchte eine Navigation via CSS erstellen.

Grafische Vorschau gibt´s hier.

Das ganze soll ohne Tabellen realisiert werden.

So, nun zu meinen Problem:

Jeder Link (auch MouseOver) soll links durch einen grafischen Pfeil gekennzeichnet werden und durch eine rote gestrichelte Linie (Grafik) unterlegt werden. Die Linie kann zwar auch mit CSS (dotted) erzeugt werden, jedoch nicht 100% gemäß grafischer Vorlage (Kundenwunsch). Der Pfeil muss dabei immer in der Mitte stehen, da manche Punkte aus 2 Zeilen bestehen.

Wie kann man nun den Pfeil UND die Linie mit CSS und den Grafiken umsetzen?

Vielen Dank für jeden Tipp!!!

---
"Keep It Simple and Stupid"

Profil Editieren Zitieren

subjective

Forenheld

Beiträge: 844

Die einfachste Variante sollte sein die als display:block zu formatieren und mit einem Hintergrundbild zu versehen.

---
Weaverslave

Profil Website Editieren Zitieren

zen_meister

Feiertags-Poster
Threadstarter

Beiträge: 31

das funktioniert mit einem Bild, aber ich möchte ja
1. den Pfeil links&mittig (position: center left) als Hintergrundbild und
2. die gestrichelte Linie als Grafik Position: bottom center
also 2 Grafiken einfügen. Nur mit css ist nur ein Hintergrundbild möglich. Irgendeine Idee wie ich zwei Grafiken gleichzeitig verwenden kann?

---
"Keep It Simple and Stupid"

Profil Editieren Zitieren

Philipp Gérard

Foren-Team

Beiträge: 1502

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8:

.navi {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
	background-image: url(foo.gif);
	background-repeat: no-repeat;
	background-position: 5px center
}

---
Arbeit ist das Feuer der Gestaltung. - Marx

Profil E-Mail Website Editieren Zitieren

zen_meister

Feiertags-Poster
Threadstarter

Beiträge: 31

Die Linie kann zwar auch mit CSS (dotted) erzeugt werden, jedoch nicht 100% gemäß grafischer Vorlage (Kundenwunsch).

Das hat ja die ganze Problematik verursacht!?

---
"Keep It Simple and Stupid"

Profil Editieren Zitieren

HoRnominatoR

Mausakrobat

Beiträge: 161

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;

---
get OPERA for free

Profil E-Mail Website Editieren Zitieren

Philipp Gérard

Foren-Team

Beiträge: 1502

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:

foo

---
Arbeit ist das Feuer der Gestaltung. - Marx

Diese Nachricht wurde geändert von: Philipp Gérard

Profil E-Mail Website Editieren Zitieren

subjective

Forenheld

Beiträge: 844

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 macht.

---
Weaverslave

Profil Website Editieren Zitieren

zen_meister

Feiertags-Poster
Threadstarter

Beiträge: 31

Danke für die Tipps und Lösungsansätze!

@Philipp Gérard: Der Vorschlag mit

hat genau zu dem gesuchten Ergebnis geführt. Funzt auch in allen aktuellen Browsern (IE, NC, Opera, Firefox, usw.).

---
"Keep It Simple and Stupid"

Diese Nachricht wurde geändert von: zen_meister

Profil Editieren Zitieren

	Antworten

Forum » HTML, CSS - Hilfe für das Erstellen einer Homepage » Link Formatierung via ...

Aktuelle Beiträge zur Hilfe im Forum für Homepage - Link Formatierung via CSS im Forum Homepage Hosting	Antworten	Letztes Posting
Unvorhersehbare Layout-Verschiebungen auf meiner Seite - Ideen? in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	0	20.08.2023 20:14 von Freud
Geschenkidee zum Geburtstag in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	2	14.04.2022 16:08 von bryleth03
Webdesigner gesucht in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	2	10.12.2021 15:04 von Rieke
Welcher Hoster ist der Beste? in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	1	10.12.2021 15:02 von Rieke
Warum Wordpress? in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	6	05.07.2021 18:27 von Rieke
Die Idee einen Blog zu führen in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	2	27.02.2021 09:50 von Samira2021
zu viele css dateien?! in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	4	19.01.2021 19:20 von Laurena
WIe kann ich Datum ausblenden? in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	1	23.11.2020 12:21 von noahradar96
Tabelle mit Mannschaftslogos in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	3	23.10.2019 14:54 von andyy
Eigene Website erstellen - kostenlos! in "HTML, CSS - Hilfe für das Erstellen einer Homepage"	0	17.05.2019 15:01 von Fusselchen

Besucher : 8133116 Heute : 461 Gestern : 478 Online : 168 3.12.2024 18:26 0 Besucher in den letzten 60 Sekunden


Nutzungsbedingungen \| Impressum \| Datenschutz \| RSS	Nach oben