Ergebnis 1 bis 9 von 9

Thema: Links ein Format zuweisen

  1. #1
    Contao-Nutzer Avatar von Voselix
    Registriert seit
    03.04.2012.
    Ort
    53879 Euskirchen
    Beiträge
    245

    Standard Links ein Format zuweisen

    Hallo zusammen,

    ich habe eine Liste mit Links manuell in einem Textmodul eingebunden.

    Jetzt möchte ich diesen Links ein spezielles Layout geben (es sollen viereckige kleine Buttons werden, die auf verschiedenen Seiten gleich sein sollen).
    Alle Links, die ich nicht dieser Klasse zuweisen sollen normal als Textlinks erhalten bleiben.

    Ich denke, das ich im css eine Klasse machen muss und dann im Dropdownfeld Format diese Klasse dann wählen kann?

    ist das richtig?

    Wie kriege ich diese Klasse erstellt?

    Danke für einen kleinen Tip!

  2. #2
    Contao-Nutzer Avatar von Voselix
    Registriert seit
    03.04.2012.
    Ort
    53879 Euskirchen
    Beiträge
    245

    Standard

    ich habe es rausgekriegt ---cool

    ich habe in der css

    .button{formatierung}

    eingesetzt und dann bei Link bearbeiten nur das wort button eingefügt bei Klasse.....schon hatte ich die Möglichkeit meinen Links ein beliebiges Layout zuzuweisen.

    ich bin jetzt schon bissi stolz, das ich das so schnell selber rausgefunden habe...

    vielleicht hilft meine eigene Lösung ja auch anderen Newbis wie mir :-)

  3. #3
    Contao-Nutzer Avatar von Voselix
    Registriert seit
    03.04.2012.
    Ort
    53879 Euskirchen
    Beiträge
    245

    Standard

    aber es klappt doch nicht so ganz...mein button ist jetzt zwar da und auch so blau und eckig.....

    aber die Linkeigenschaften kriege ich so nicht formatiert....d.h. alle Links im web haben ein text-decoration: underline;

    das soll aber in meinen neuen Buttons nicht sein.

    ich möchte text-decoration: none; als Eigenschaft festlegen


    ich habe schon einiges probiert z.b.:

    .button a:link a:visited
    {
    text-decoration: none;
    }

    aber die Eigenschaft wird nicht genommen....

    Wie weise ich nun meiner css Klasse "button" diese Linkeigenschaft zu?

    denke, da habe ich nur ein syntaxproblem...kann mir jemand auf die Sprünge helfen?

  4. #4
    Contao-Nutzer Avatar von Voselix
    Registriert seit
    03.04.2012.
    Ort
    53879 Euskirchen
    Beiträge
    245

    Standard

    hin und her probiert und das nun auch rausgefunden:

    .button
    {
    padding:5px;
    text-align:center;
    background-color:#00356a;
    font-size:15px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    }

    a:link.button
    {
    text-decoration:none;
    text-shadow: 1px 1px 2px #000;
    color:#ffffff;
    }
    a:visited.button
    {
    text-decoration:none;
    text-shadow: 1px 1px 2px #000;
    color:#ffffff;
    }


    chaka ist das ein cooles system ---wenn man es rausfindet

  5. #5
    Contao-Nutzer Avatar von art-instinct
    Registriert seit
    12.04.2012.
    Ort
    Hannover/Leipzig
    Beiträge
    175

    Standard

    wenn du die klasse in die tinymce.css im files/tl_files Ordner packst, kann du die Styles auch im Dropdown des TinyMCE auswählen. Dort wo "information" etc. steht

  6. #6
    Contao-Nutzer Avatar von Voselix
    Registriert seit
    03.04.2012.
    Ort
    53879 Euskirchen
    Beiträge
    245

    Standard

    danke für den tip...das hört sich gut an....habe es gemacht----cool---jetzt kann man es einfach auswählen....super.......


    Ich habe allerdings noch ein anderes Problem, welches gestern aufgetreten ist:

    Meine formatierten Links sind echt gut geworden...aber die haben alle eine unterschiedliche breite.
    D.H. die Wortlänge bestimmt die Breite der formatierten Links.....das sieht nicht schön aus, weil diese Links als Aufzählung neben und untereinander stehen....
    Wie kann ich denn jetzt diesen Links eine feste breite zuweisen? mit width:200px; geht es nicht, mit min-width:200px; geht es auch nicht....

    per pn gebe ich auch gerne einen Link dazu.....denke aber das ist nur eine winzige Ergänzung zu diesem Quelltext:

    Code:
    a.button
    {
    	min-width:200px; --->geht nicht
            width:200px; --->geht auch nicht
    	padding:10px;
    	text-align:center;
    	background-color:#4070B8;
    	font-size:15px;
    	-moz-border-radius:7px;
    	-webkit-border-radius:7px;
    	border-radius:7px;
    }
    ich habe nun gedacht das hier ginge-geht aber auch nicht:

    Code:
    .button {
    width: 200px;
    }
    diese Knöpfe bleiben immer unterschiedlich lange...mhhhh..grübel....ich habe echt keine Idee....hoffe es gibt mir da jemand den ultimativen hinweis....

    hier mal ein Bild dazu:http://www.youscreen.de/hxbfkfvq61.jpg
    Geändert von Voselix (18.04.2013 um 12:42 Uhr)

  7. #7
    Contao-Nutzer Avatar von art-instinct
    Registriert seit
    12.04.2012.
    Ort
    Hannover/Leipzig
    Beiträge
    175

    Standard

    Code:
    a.button {
    display: inline-block;
    }

  8. #8
    Contao-Nutzer Avatar von Voselix
    Registriert seit
    03.04.2012.
    Ort
    53879 Euskirchen
    Beiträge
    245

    Standard

    jetzt müsstest du eigentlich eine ganze Ladung Steine gehört haben, die von mir abgefallen sind.....

    es geht......boahhhh....cool---danke....ich bin begeistert.....

    der Text ist jetzt allerdings ganz nach unten gerutscht...:-(

    http://www.youscreen.de/srxbaxka47.jpg

    ich habe das jedoch schnell rausgefunden

    padding-bottom: 20px;

    das funktioniert.......
    Geändert von Voselix (18.04.2013 um 13:14 Uhr)

  9. #9
    Contao-Nutzer Avatar von Voselix
    Registriert seit
    03.04.2012.
    Ort
    53879 Euskirchen
    Beiträge
    245

    Standard

    Hallo art-instinct,

    ich habe es perfekt hinbekommen und möchte mich ganz herzlich bei Dir bedanken!

    Das Ergebnis ist nun wie folgt:

    Code:
    a.button
    {
    	display: inline-block;
            width:180px;
            height:20px;
            padding:10px;
            margin:5px;
             padding-bottom:10px;
    	text-align:center center;
    	background-color:#4070B8;
    	font-size:15px;
    	-moz-border-radius:7px;
    	-webkit-border-radius:7px;
    	border-radius:7px;
    }
    Als Bild: http://www.youscreen.de/qbkwageu65.jpg

    Vielen Dank dafür!!!!!!

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •