Buttonlink in einem Beitrag

phuonker
Autor
Offline
Junior Mitglied

Mehr

07 Mai 2011 11:02 #29075 von phuonker

Buttonlink in einem Beitrag wurde erstellt von phuonker

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

jimbo
Offline

Mehr

07 Mai 2011 17:11 #29079 von jimbo

jimbo antwortete auf Aw: Buttonlink in einem Beitrag

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:

Code:

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

phuonker
Autor
Offline
Junior Mitglied

Mehr

09 Mai 2011 18:32 - 09 Mai 2011 18:33 #29085 von phuonker

phuonker antwortete auf Aw: Buttonlink in einem Beitrag

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

kdwbz
Neues Mitglied

Mehr

09 Mai 2011 18:57 - 09 Mai 2011 19:08 #29086 von kdwbz

kdwbz antwortete auf Aw: Buttonlink in einem Beitrag

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

phuonker
Autor
Offline
Junior Mitglied

Mehr

09 Mai 2011 21:00 #29090 von phuonker

phuonker antwortete auf Aw: Buttonlink in einem Beitrag

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

phuonker
Autor
Offline
Junior Mitglied

Mehr

09 Mai 2011 23:13 - 10 Mai 2011 07:23 #29092 von phuonker

phuonker antwortete auf Aw: Buttonlink in einem Beitrag

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:

Code:

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

CSS:

Code:

...

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

jimbo
Offline

Mehr

10 Mai 2011 07:22 #29096 von jimbo

jimbo antwortete auf Aw: Buttonlink in einem Beitrag

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.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

phuonker
Autor
Offline
Junior Mitglied

Mehr

10 Mai 2011 17:37 #29101 von phuonker

phuonker antwortete auf Aw: Buttonlink in einem Beitrag

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

jimbo
Offline

Mehr

11 Mai 2011 07:26 #29102 von jimbo

jimbo antwortete auf Aw: Buttonlink in einem Beitrag

Die korrekte Deklaration des Elements heisst:

Code:

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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

phuonker
Autor
Offline
Junior Mitglied

Mehr

16 Mai 2011 09:03 - 16 Mai 2011 20:00 #29139 von phuonker

phuonker antwortete auf Aw: Buttonlink in einem Beitrag

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:

Code:

#main ul li.privat a:link, #main ul li.privat a:visited {...}

wird schön angezeigt, hingegen alles rund um a:hover

Code:

#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

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Moderatoren: pascale, Tribal6, RePao, Dragonlord, Chris Hoefliger, adiheutschi.ch