[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:
(1510 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:
(1497 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.
Gruß Sabine


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:
(1473 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:
(1456 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
Gruß Sabine


als Antwort auf: [#326781]
X

Aktuell

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
29.09.2022

IDUGS#85 Press2id

Zoom Meeting
Donnerstag, 29. Sept. 2022, 19.00 - 21.00 Uhr

Vortrag

Kennst du WordPress? Vielleicht. Verwendest du WordPress? Ja, klar! WordPress ist das am weitesten verbreitete System für die Erstellung von Webseiten. Um Webseitenbau soll es auf dieser IDUG aber nicht gehen. Gregor zeigt press2id (github.com/grefel/press2id). Seine Open-Source-Lösung für die Verbindung von Web und InDesign. Richtig gelesen: InDesign liest mithilfe von press2id die Inhalte der WordPress-Webseiten und generiert daraus Zeitschriften, Kataloge, Programmhefte oder Bierdeckel (das zeigen wir natürlich auch!). So wird die „Content First“ Theorie zu einer konkret anwendbaren Praxis, ohne gleich die ganz großen Räder zu drehen. Versprochen: Jeder kann nach der IDUG innerhalb kürzester Zeit Daten von WordPress nach InDesign importieren. Aber Achtung: Prinzipiell kann press2id aus jeder Website, oder besser Contentmanagementsystem (CMS) Daten auslesen und nach InDesign importieren! Spannend, oder? Danach geht es in die Praxis: Stefan hat die Webseite des Parktheater Iserlohn (parktheater-iserlohn.de) gestaltet. Die gedruckten Spielpläne (parktheater-iserlohn.de/interaktive-spielplaene) werden mit press2id realisiert. Wir schauen in den Maschinenraum und zeigen, wie die Lösung des Projekts realisiert wurde.

Nein

Organisator: InDesign Usergroup Stuttgart

Kontaktinformation: Christoph Steffens, E-Mailidug AT satzkiste DOT de

https://idugs85.eventbrite.de/

Von Wordpress nach InDesign
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

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

Enfocus World Tour 2022