Div langsam einfärben?

Acrio · 18. März 2013

Hi. Gibt es eine Möglichkeit divs langsam einzufärben?
So wie hier?
http://forum.gordonsys.net/index.php (Siehe: Da wo Forum Rules Downloads... steht.[Unter dem Header])

xGreekz7x · 18. März 2013

Hier

CSS

#div {
transition: all 0.3s ease-in-out;
}

CSS

#div:hover {
background-color: #343434;
}

Acrio · 18. März 2013

Funtkioniert.

Edit://An alle die´s interessiert.
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */

Die Präfixe dürfen nicht fehlen.

xGreekz7x · 18. März 2013

eingefügt?
#div {
transition: all 0.3s ease-in-out;
}
//edit: du musst für -moz- und -webkit- einfügen

Acrio · 18. März 2013

Ja hat geklappt. Aber kann ich die display:block größe in der Breite ändern? mit width geht es nicht.

Edit:// WTF. Habe jetzt das Problem das beim Forum button alles funktioniert, und beim Register auch der text erst nicht da ist.

Kannst dir es ja mal anschauen.

acrio.bplaced.net

xGreekz7x · 18. März 2013

funktionier:
mach nochn:

CSS

padding: 5px 10px;

Acrio · 18. März 2013

1. Wohin soll das? 2. Nein funktioniert nicht Das Register sollte auch normal weiß sein und nicht schwarz

xGreekz7x · 18. März 2013

Für die Home REgister usw.
der padding code.
außerdem hast du in deiner CSS datei stehen:
background-color: #252525;
bei register.

Acrio · 18. März 2013

Edit:// Problem gelöst. Aber wie mache ich denn das der die direkt hintereinander setzt die Links? Habs mit ner Tabelle erstellt.

xGreekz7x · 18. März 2013

OMG.

HTML

<div id="mainMenu">
   <ul class="mainMenu">
      <li><a href="#">Startseite</a></li>
   </ul>
</div>

CSS

#mainMenu {
margin-top: x px;
}
ul.mainMenu {
	list-style: none !important;	
}
ul.mainMenu li {
	display: inline-block !important;
}
ul.mainMenu li a {
	text-transform:uppercase;
	text-shadow: 0px 1px 0px #000;
	font-size: 11px;
        padding: 4px 10px;
        background: #000;
        transition: all 0.3s linear;
        -moz-transition: all 0.3s linear;
        -webkit-transition: all 0.3s linear;
}
ul.mainMenu li a:hover {
	background: #ff0000;
}

Alles anzeigen

Ich habe dir hier ein Standart code geschickt und bißchen angepasst,
weil das ist der Hammer was du da gemacht hast
Mit Position absolute usw...

Acrio · 18. März 2013

Ok danke, dann frage ich mich nur wenn das so ein Müll von mir sein soll warum, wenn man was bei google sucht, immer nur sowas kommt?

Edit:// Und aus irgendeinem Grund funktioniert dein Code nicht. Es ist sofort gefärbt. Habe schon versucht es zu lösen, was allerdings nicht geklappt hat.

xGreekz7x · 18. März 2013

Weil nur scheiß kommt...
Nimm dir mein Beispiel

Acrio · 18. März 2013

Ok, auch das wär behoben. Der Fehler kam durch ein Leerzeichen zwischen -webkit- und transition

breadfish.de 11. März 2022