[GastForen Web allgemein HTML und CSS / Stylesheets Breite eines Links definieren

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Breite eines Links definieren

Canio
Beiträge gesamt: 174

11. Dez 2007, 10:53
Beitrag # 1 von 4
Bewertung:
(1571 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ich möchte meinen Links in meinem Menü eine Hintergrundgrafik verpassen.

Der html-Code wird von Joomla! vorgegeben, leider in Tabellen-Struktur:


Code
	<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
<tr align="left">
<td><a href="p;id=20&amp;Itemid=49" class="mainlevel" id="active_menu">Wärmepumpen</a>
<div style="padding-left: 4px"><img src="#" alt="" /><a href="#" class="sublevel">Noch mehr</a></div>
<div style="padding-left: 4px"><img src="#" alt="" /><a href="#" class="sublevel">Untermenü 2</a></div>
</td>
</tr>
<tr align="left">
<td><a href="#" class="mainlevel">Beispiel-Content</a></td>
</tr>
</table>


CSS:

Code
  a.sublevel { 
display: block;
width: 220px;
white-space: nowrap;
background: transparent url("images/navi_left_button_blue.gif") no-repeat;
}


Für a.mainlevel soll natürlich das selbe gelten, und die src-Angabe ist natürlich auch korrekt.

Nun möchte ich, dass jeder Link mit der Klasse .sublevel genau 220px breit ist, um die Hintergrundgrafik anzuzeigen. Doch leider erscheint die Grafik nur als ein 1-Px breiter Streifen links neben dem Link. Was versteh ich hier nicht???

Hoffe ich hab mich verständlich ausgedrückt.
X

Breite eines Links definieren

SabineP
Beiträge gesamt: 7586

11. Dez 2007, 13:20
Beitrag # 2 von 4
Beitrag ID: #326649
Bewertung:
(1558 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Canio,

>> Der html-Code wird von Joomla! vorgegeben

Hast Du Angst davor den Code zu ändern?

Poste doch mal die URL zu der betreffenden Seite.
Mit dem geposteten Codeschnipsel ist der Darstellungsfehler nicht nachvollziehbar.


als Antwort auf: [#326615]
(Dieser Beitrag wurde von SabineP am 11. Dez 2007, 13:22 geändert)

Breite eines Links definieren

Canio
Beiträge gesamt: 174

12. Dez 2007, 08:54
Beitrag # 3 von 4
Beitrag ID: #326781
Bewertung:
(1534 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Angst vorm Code hab ich nicht. Ich bin Joomla-Newbie, aber ist ja auch nicht das Problem.

Die Testseite befindet sich hier: http://web30.mitho-rhein-server.de/tecalor/index.php.

Es geht nur um die Navigation auf der linken Seite. Ich möchte allen Menüpunkten, auch den Untermenüs eine Hintergrundgrafik geben.


als Antwort auf: [#326649]

Breite eines Links definieren

SabineP
Beiträge gesamt: 7586

12. Dez 2007, 10:06
Beitrag # 4 von 4
Beitrag ID: #326798
Bewertung:
(1517 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Canio,

mit diesem HTML-Code wird das nichts werden.
Um einem Link eine Breite zu geben muß man den Link mit display:block formatieren.

Und genau das hat zur Folge, daß zwischen diesem Bild und Link ein Umbruch entsteht.
<img src="#" alt="" /><a href="#" class="sublevel">Noch mehr</a>

Du könntest jetzt versuchen mit


<img class="platzhalter" src="#" alt="" /><a href="#" class="sublevel">Noch mehr</a>

.platzhalter{float:left}


den Link rechts neben das Bild zu bekommen.


Ich würde aber eine andere Lösung vorschlagen.
Verwende am besten eine Liste, dann mußt Du die Menüpunkte nicht mit Hilfe von Bildern einrücken.

Hier ein Beispiel mit Hintergrundbild:
http://css.maxdesign.com.au/...atic2/vertical06.htm

Und hier findwest Du zahlreiche weitere Beispiele:
http://css.maxdesign.com.au/listamatic2/index.htm


als Antwort auf: [#326781]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
18.06.2024

Online
Dienstag, 18. Juni 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow
Veranstaltungen
02.07.2024

Online
Dienstag, 02. Juli 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

Kontaktinformation: E-Mailschulungen AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow