Auf Thema antworten 2026

Beitrag

<blockquote data-quote="ADcosmos" data-source="post: 1968886">AW: Linkbuttons via CSS3 definieren und einbindenHi,Mit Klassen müsstest Du eventuell nicht arbeiten. Das hängt aber davon ab, wo Di diesen background-Stil überall einsetzen möchtest.Möchtest Du nämlich nur die a-tags in der Navi mit deinem Gradient stylen, reicht meine oben genannte Variante.[CODE]&lt;ul id=&quot;nav&quot;&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;xyz.html&quot; id=&quot;btn1&quot; [COLOR=&quot;red&quot;]class=&quot;menubutton1&quot;[/COLOR]&gt;Link 1&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;xyz.html&quot; id=&quot;btn2&quot; class=&quot;menubutton1&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;xyz.html&quot; id=&quot;btn3&quot; class=&quot;menubutton1&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;xyz.html&quot; id=&quot;btn4&quot; class=&quot;menubutton1&quot;&gt;Link 4&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;[/CODE]Die Id brauchst Du nur, wenn Du die einzelnen a-Tags noch jeweils positionieren möchtest.Deine CSS- würde dann so aussehen:[CODE]ul#nav{&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; position: relative;}ul#nav a{&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; display: block;&nbsp; &nbsp; position: relative; //oder absolute&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; height: 50px;}[COLOR=&quot;Red&quot;]a.menubutton1{ //Hier wird allen a-Tags, die die Klasse menubutton1 haben folgere Stil zugewiesen&nbsp; &nbsp; background: red; //deine Hintergrundfarbe, oder alternativ das Bild fur &quot;MouseOut&quot;, für IE8 und darunter als normale farbe&nbsp; &nbsp; background-image: linear-gradient(top, rgb(117,150,248) 0%, rgb(5,68,214) 100%);//Hier dein Verlauf&nbsp; &nbsp; color: white;}//Anstatt menubutton2 kommt das:a.menubutton1:hover{//Hier wird allen a-Tags, die die Klasse menubutton1 haben folgere Stil zugewiesen, wenn die Mau über ihnen ist&nbsp; &nbsp; background: green;//deine Hintergrundfarbe, oder alternativ das Bild fur &quot;MouseOver&quot;&nbsp; &nbsp; background-image: linear-gradient(top, rgb(117,150,248) 0%, rgb(5,68,214) 100%);//Hier dein Verlauf&nbsp; &nbsp; color: black;}[/COLOR]ul#nav a#btn1{&nbsp; &nbsp; left: 0;&nbsp; &nbsp; top: 0;}ul#nav a#btn2{&nbsp; &nbsp; left: 100px;&nbsp; &nbsp; top: 200px;}[/CODE]MFG ADcosmos</blockquote>

[QUOTE="ADcosmos, post: 1968886"] [b]AW: Linkbuttons via CSS3 definieren und einbinden[/b] Hi, Mit Klassen müsstest Du eventuell nicht arbeiten. Das hängt aber davon ab, wo Di diesen background-Stil überall einsetzen möchtest. Möchtest Du nämlich nur die a-tags in der Navi mit deinem Gradient stylen, reicht meine oben genannte Variante. [CODE]<ul id="nav"> <li><a href="xyz.html" id="btn1" [COLOR="red"]class="menubutton1"[/COLOR]>Link 1</a></li> <li><a href="xyz.html" id="btn2" class="menubutton1">Link 2</a></li> <li><a href="xyz.html" id="btn3" class="menubutton1">Link 3</a></li> <li><a href="xyz.html" id="btn4" class="menubutton1">Link 4</a></li> </ul> [/CODE] Die Id brauchst Du nur, wenn Du die einzelnen a-Tags noch jeweils positionieren möchtest. Deine CSS- würde dann so aussehen: [CODE]ul#nav{ list-style: none; position: relative; } ul#nav a{ text-decoration: none; display: block; position: relative; //oder absolute width: 100px; height: 50px; } [COLOR="Red"]a.menubutton1{ //Hier wird allen a-Tags, die die Klasse menubutton1 haben folgere Stil zugewiesen background: red; //deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOut", für IE8 und darunter als normale farbe background-image: linear-gradient(top, rgb(117,150,248) 0%, rgb(5,68,214) 100%);//Hier dein Verlauf color: white; } //Anstatt menubutton2 kommt das: a.menubutton1:hover{//Hier wird allen a-Tags, die die Klasse menubutton1 haben folgere Stil zugewiesen, wenn die Mau über ihnen ist background: green;//deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOver" background-image: linear-gradient(top, rgb(117,150,248) 0%, rgb(5,68,214) 100%);//Hier dein Verlauf color: black; }[/COLOR] ul#nav a#btn1{ left: 0; top: 0; } ul#nav a#btn2{ left: 100px; top: 200px; } [/CODE] MFG ADcosmos [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?