Gelegenheitstäter
AW: Linkbuttons via CSS3 definieren und einbinden
ist das denn noch nötig??
Ich habe den CSS-Code von ADcosmos übernommen und bei mir angepasst.
In diesen Code habe ich die gradients eingebunden.
Versteh mich bitte nicht falsch, das wirklich ernstgemeinte Fragen.
Ich habe das so verstanden, dass ich den Code einbinde und unter "background" die gradients einbinde.
Jeweils 1x für die Standardansicht und 1x für der Hovereffekt.
Damit sind meine angelegten Klassen ".menubutton1" und ".menubutton2" doch eigentlich überflüssig. Die sind nur noch im Code, da ich zur Zeit ja noch rumbastel und deshalb nicht alles sofort lösche. Solange die Klassen vom HTML-Code nicht angesprochen werden, stören die ja nicht.... oder liege ich da falsch?
Also zum Verständnis:
das ist der relevante Bereich meiner "menu.css"
und dies der betrefende HTML- Code:
#menuleft definiert die große Box des Menuhintergrundes
auf dieser erscheinen die Linkeinträge, die ab "ul" angesprochen werden.
#bhome positioniert den Eintrag "Starseite"
#bbla positioniert den Eintrag "2. Seite"
#navleft ist der von ADcosmos übernommene, angepasste CSS-Code.
Oder ist das jetzt alles zu viel für einen Oldie wie mich und ich habe schon ein Brett vorm Kopf??:lol:
Edit: Wenn ich die "Class="menubutton1" einbinde, erscheint zwar der Button, jedoch ohne den Hovereffekt (ausser dem Text, der funzt ja beim hovern...)
Ach so, der Effekt soll den Farbverlauf invertieren, also Dunkel oben und Hell unten, sowie den Schatten entfernen...
ist das denn noch nötig??
Ich habe den CSS-Code von ADcosmos übernommen und bei mir angepasst.
In diesen Code habe ich die gradients eingebunden.
Versteh mich bitte nicht falsch, das wirklich ernstgemeinte Fragen.
Ich habe das so verstanden, dass ich den Code einbinde und unter "background" die gradients einbinde.
Jeweils 1x für die Standardansicht und 1x für der Hovereffekt.
Damit sind meine angelegten Klassen ".menubutton1" und ".menubutton2" doch eigentlich überflüssig. Die sind nur noch im Code, da ich zur Zeit ja noch rumbastel und deshalb nicht alles sofort lösche. Solange die Klassen vom HTML-Code nicht angesprochen werden, stören die ja nicht.... oder liege ich da falsch?
Also zum Verständnis:
das ist der relevante Bereich meiner "menu.css"
Code:
#bhome
{
position: fixed;
left: 50%;
margin-left: -590px;
top: 330px;
width: 180px;
height: 30px;
z-index: 3;
font-family:'Comic Sans MS';
src:local('Comic Sans MS') url(fonts/comic.ttf) format(TrueType);
font-size:10pt,12pt,14pt,16pt,18pt,20pt,24pt;
text-align: center;
}
/*Position 2.Button*/
#bbla
{
position: fixed;
left: 50%;
margin-left: -590px;
top: 365px;
width: 180px;
height: 30px;
z-index: 3;
font-family:'Comic Sans MS';
src:local('Comic Sans MS') url(fonts/comic.ttf) format(TrueType);
font-size:10pt,12pt,14pt,16pt,18pt,20pt,24pt;
text-align: center;
}
/*Navigation Menu links*/
ul #navleft
{
list-style: none;
position: relative;
z-index: 3;
}
ul #navleft a
{
text-decoration: none;
display: block
position: relative; //oder absolute
width: 100px;
height: 30px;
z-index: 4;
/*ALte Browser*/
background: #5a5a5a; //deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOut"
/* FireFox 3.6+: */
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 30%, #5a5a5a 100%);
/* Chrome,Safari4+: */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#fcfff4), color-stop(30%,#dfe5d7), color-stop(100%,#5a5a5a));
/* Chrome10+,Safari5.1+: */
background: -webkit-linear-gradient(top, #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);
/* Opera 11.10+: */
background: -o-linear-gradient(top, #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);
/* IE10+: */
background: -ms-linear-gradient(top, #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);
/* W3C: */
background: linear-gradient(top, #fcfff4 0%,#dfe5d7 30%,#5a5a5a 100%);
/* IE6-9: */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#5a5a5a',GradientType=0 );
/*Radien- Definition*/
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
/*Schatten- Definintion*/
-webkit-box-shadow: 2px 2px 2px 2px #666;
-moz-box-shadow: 2px 2px 2px 2px #666;
box-shadow: 2px 2px 2px 2px #666;
}
ul #navleft a:hover
{
z-index: 4;
/*Alte Browser*/
background: #fcfff4; //deine Hintergrundfarbe, oder alternativ das Bild fur "MouseOver"
/* FireFox 3.6+: */
background: -moz-linear-gradient(top, #5a5a5a 0%, #dfe5d7 70%, #fcfff4 100%);
/* Chrome,Safari4+: */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#5a5a5a), color-stop(70%,#dfe5d7), color-stop(100%,#fcfff4));
/* Chrome10+,Safari5.1+: */
background: -webkit-linear-gradient(top, #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);
/* Opera 11.10+: */
background: -o-linear-gradient(top, #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);
/* IE10+: */
background: -ms-linear-gradient(top, #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);
/* W3C: */
background: linear-gradient(top, #5a5a5a 0%,#dfe5d7 70%,#fcfff4 100%);
/* IE6-9: */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#fcfff4',GradientType=0 );
/*Radien- Definition*/
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
/*Schatten- Definintion*/
/*-webkit-box-shadow: 2px 2px 2px 2px #666;
-moz-box-shadow: 2px 2px 2px 2px #666;
box-shadow: 2px 2px 2px 2px #666; */
}
/*ul #navleft a .menubutton1 //das habe ich nur zum testen auskommentiert
{
left: 0px;
top: 0px;
}
ul #navleft a .menubutton2
{
left: 0px;
top: 0px;
} */ // bis hierher -- mit diesen definitionen hat es auch nicht geklappt...
HTML:
<div id="menuleft"></div>
<!-- Versuch -->
<ul id="navleft">
<li><a href="index.html" id="bhome">Startseite</a></li>
<li><a href="index.html" id="bbla">2. Seite</a></li>
</ul>auf dieser erscheinen die Linkeinträge, die ab "ul" angesprochen werden.
#bhome positioniert den Eintrag "Starseite"
#bbla positioniert den Eintrag "2. Seite"
#navleft ist der von ADcosmos übernommene, angepasste CSS-Code.
Oder ist das jetzt alles zu viel für einen Oldie wie mich und ich habe schon ein Brett vorm Kopf??:lol:
Edit: Wenn ich die "Class="menubutton1" einbinde, erscheint zwar der Button, jedoch ohne den Hovereffekt (ausser dem Text, der funzt ja beim hovern...)
Ach so, der Effekt soll den Farbverlauf invertieren, also Dunkel oben und Hell unten, sowie den Schatten entfernen...
Zuletzt bearbeitet:
