Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:
  • Seite:
  • 1
  • 2

THEMA: Buttonlink in einem Beitrag

Buttonlink in einem Beitrag 07 Mai 2011 11:02 #29075

  • phuonker
  • phuonkers Avatar
  • OFFLINE
  • Junior
  • Beiträge: 65
  • Punkte: 0
Gibt es eine einfache Möglichkeit einen schönen Button mit CSS in einem Beitrag zu erstellen? Ich verwende das beez template

Ich bin leider kläglich gescheitert, dies via template.css zu realisieren, da der Link (und entsprechendes CSS) nachträglich durch das layout.css beeinflusst wird.

Ich möchte eigentlich javascript mit onmouse over vermeiden.
Ich bin um jeden Tip froh.

Besten Dank
Grüsse
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 07 Mai 2011 17:11 #29079

  • jimbo
  • jimbos Avatar
  • OFFLINE
  • Gold Mitglied
  • Beiträge: 1705
  • Dank erhalten: 24
  • Punkte: 6516
  • Honor Medal 2010
Du einfach eine neue frei definierbare Klasse im CSS für Deinen Button anlegen. Je nach Konfiguration erscheint diese Klasse dann im Style-Menü des Editors und kann dort für ein Objekt angewählt werden. Das ist dann auch schon alles...

Falls Deine Klasse von einer anderen Formatierung überschrieben wird, heisst das sie ist zu wenig genau definiert, dann musst Du im CSS auch noch die übergeordneten Elemente/Klassen miteinbeziehen, z.B:
.main .article-content a.meinlink:link { ... }
.main .article-content a.meinlink:hover { ... }

Welche Klassen das in Deinem Template genau sind kann man so nicht sagen...
Gruss Dany (Jimbo)
Kein Support per PN.
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 09 Mai 2011 18:32 #29085

  • phuonker
  • phuonkers Avatar
  • OFFLINE
  • Junior
  • Beiträge: 65
  • Punkte: 0
Hi Jimbo
Besten Dank für deinen Tip
Ich habe mich dann mal versucht mit CSS und besseren Id's. Dabei kam die ganze geschicht in meinen Augen etwas komisch raus. Wenn man die Seite das erste Mal aufruft, erscheint entweder die alte link Version oder gar nichts, lädt man sie hingegen nochmals erscheint die Seite mehr oder weniger normal. Ich habe das Gefühl, dass auf meiner Seite machmal die eine manchmal die andere CSS klasse aufgerufen wird, obwohl sie unterschiedliche ID's haben. Die Buttons sehen jetzt noch schrecklich aus, weil ich es mit beweglichen Bildern versucht habe, die noch nicht angepasst sind..
Die Seite lautet www.peachproduction.ch
Hat irgend jemand einen Tip, was da falsch lief und ob die div Formatierung mit der entsprechenden CSS Datei korrekt sind.
Besten Dank
Letzte Änderung: 09 Mai 2011 18:33 von phuonker.
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 09 Mai 2011 18:57 #29086

  • kdwbz
  • kdwbzs Avatar
Habe einmal im Joomla 1.5 , mit Beez-Template und Tiny-Editor ausprobiert:

Geht auch bei Joomla 1.6 .......

- Button als Bild einfügen, z.B. png-Datei
- Rechtsklick auf Bild, in Pop-Up-Menü:
- Link einfügen (Maske)

Bei mehrsprachiger Seite z.B. in Joomfish in jede Uebersetzung den Link
einsetzen.

Fertig
Letzte Änderung: 09 Mai 2011 19:08 von kdwbz. Begründung: Nachtrag
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 09 Mai 2011 21:00 #29090

  • phuonker
  • phuonkers Avatar
  • OFFLINE
  • Junior
  • Beiträge: 65
  • Punkte: 0
Hi kdwbz
In der Tat ist dies eine sehr elegante Lösung, nur erfordert dies meines Wissens javascript und dies ist nicht auf allen browsern eingeschalten und daher ziehe ich eine CSS Variante vor, die halt etwas mühsamer ist, zumal ich noch kein wirklicher CSS Krack bin, was sich aber hoffentlich bald ändern wird
Danke für deine hilfe
Grüsse
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 09 Mai 2011 23:13 #29092

  • phuonker
  • phuonkers Avatar
  • OFFLINE
  • Junior
  • Beiträge: 65
  • Punkte: 0
Nach einer kleineren Analyse habe ich festgestellt, dass man mein Buttonlink " #buttonhome " mittels CSS auf 2 CSS Anweisungen zurückgreift, zum einen auf die selber neue kreierte CSS Anweisung (buttonhome), zum anderen aber noch auf die normalen link Anweisungen von #main etc zurückgreift.

Hier der html code und CSS code. Was ist da falsch oder zu wenig genau definiert?

html:
...
 <div id="Rahmen">
                    <ul id="Privat">
                        <li><a href="fuer-privat-events"></a></li>
                    </ul>
                </div>
...


CSS:
...

div#Rahmen {
    width: 2.1em;
margin: 1px 1px 1px 1px;
    padding: 1.8em;
    border: 0px solid black;
    background-color: white;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
 
  ul#Privat{
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Privat li {
	list-style: none;
	float: left;  /* ohne width - nach CSS 2.1 erlaubt */
	position: relative;
	margin: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
  }
  * html ul#Privat li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Privat li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

 
  *:first-child+html ul#Privat ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
 


  ul#Privat a, ul#Privat span {
    display: block;
    width: 8.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
margin: -31px -87px;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-image: url(../../../images/stories/buttons/Privatevent_up.png);;
  }
  * html ul#Privat a, * html ul#Privat span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Privat a:hover, ul#Privat span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-image: url(../../../images/stories/buttons/Privatevent_down.png);
  }
...

Ich bitte um Hilfe
Vielen Dank

Grüsse
Letzte Änderung: 10 Mai 2011 07:23 von jimbo.
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 10 Mai 2011 07:22 #29096

  • jimbo
  • jimbos Avatar
  • OFFLINE
  • Gold Mitglied
  • Beiträge: 1705
  • Dank erhalten: 24
  • Punkte: 6516
  • Honor Medal 2010
Einen Button als ID (#) einzufügen ist falsch, damit darf der Button nur ein einziges Mal auf einer Seite erscheinen, das heisst, mit einer Bloganansicht ist Deine Seite dann nicht mehr valide.

Mittels Klasse und einem zusätzlich hover einfügen klappt auf jeden Fall, Voraussetzung ist aber, dass die Klasse korrekt angesprochen und vor allem auch das geänderte CSS geladen wird...
Erscheint der "alte Link", ist vermutlich zweiteres nicht der Fall.
Gruss Dany (Jimbo)
Kein Support per PN.
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 10 Mai 2011 17:37 #29101

  • phuonker
  • phuonkers Avatar
  • OFFLINE
  • Junior
  • Beiträge: 65
  • Punkte: 0
Hallo Jimbo
Danke für deine Antwort
Ich habe nun mal mein "div" bzw mein "ul" etc in Klassen umgewandelt. Beim Laden erscheint dann auch der Button, doch wenn ich mit dem firebog den Button anschaue, dann ist der oberste (letzte) CSS Befehl vom layout.css (beeztemplate) stammen: #main a:link, #main2 a:link, #main a:visited, #main2 a:visited etc.
Somit werden einige Eigenschaften wie padding von dieser letzten Einstellung verwendet. Ich kriege es irgendwie nicht auf die Reihe, dass meine divklasse bzw die anderen Elemente zu oberst als letztes gelesen werden.
Danke für die Hilfe

Grüsse
Peter
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 11 Mai 2011 07:26 #29102

  • jimbo
  • jimbos Avatar
  • OFFLINE
  • Gold Mitglied
  • Beiträge: 1705
  • Dank erhalten: 24
  • Punkte: 6516
  • Honor Medal 2010
Die korrekte Deklaration des Elements heisst:
#main .Rahmen .Privat a:link {
...
}
Natürlich müssen da noch die Varianten mit ...:visited und dann natürlich für den anderen ...:hover-/...:focus-Zustand hinzugefügt werden.
Gruss Dany (Jimbo)
Kein Support per PN.
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.

Aw: Buttonlink in einem Beitrag 16 Mai 2011 09:03 #29139

  • phuonker
  • phuonkers Avatar
  • OFFLINE
  • Junior
  • Beiträge: 65
  • Punkte: 0
Hallo Jimbo
Besten Dank. Habe es tatsächlich noch higekriegt, nach einigem herumwursteln. Nun hat sich aber ein anderes Problem eingeschlichen, das ich absolut nicht nachvollziehen kann:
#main ul li.privat a:link, #main ul li.privat a:visited {...}

wird schön angezeigt, hingegen alles rund um a:hover
#main ul li.privat a:hover,#main ul li.privat a:focus,#main ul li.privat a:activ {...}

wird nicht angezeigt und ich verstehe absolut nicht warum.

Kann mir da jemand einen Tip geben?

Besten Dank
Grüsse
Peter
Letzte Änderung: 16 Mai 2011 20:00 von jimbo.
Nur registrierte Benutzer haben das Recht im Forum zu schreiben.
  • Seite:
  • 1
  • 2
Ladezeit der Seite: 0.176 Sekunden