Links ein Format zuweisen

[Voselix]

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!

[Voselix]

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 :-)

[Voselix]

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?

[Voselix]

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

[art-instinct]

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

[Voselix]

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:

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:

.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

[art-instinct]

a.button {
display: inline-block;
}

[Voselix]

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

[Voselix]

Hallo art-instinct,

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

Das Ergebnis ist nun wie folgt:

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