|
|||
Inhalte im DIV fixieren. Auch bei Animationen
Hallo,
ich habe folgendes Problem. Wenn man z.B. einen Beitrag gepostet hat, kommt man auf eine Seite zurück auf der dann in einem DIV die Nachricht erscheint, dass der Beitrag erfolgreich gepostet wurde. Diese Nachricht soll nach 3 Sekunden verschwinden. Das wollte ich mit einer Animation lösen, welche dem DIV die height verkleinert. Der CSS Code dazu sieht bisher folgendermaßen aus: Code:
.textbase_msg /*Zentriert Nachricht*/ { background-color:ffffff; width:90%; text-align:center; margin-left:auto; margin-right:auto; position: relative; -webkit-animation-name: sl-close; -webkit-animation-duration: 1s; -webkit-animation-delay: 3s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes sl-close { 0% { height:100px;} 100% { height: 0px; } } Die Seite hierzu: http://tenac.ddns.net/intranet/index2pb.php?done=4 (sorry, etwas zermatscht. Musste aber die Datenbankanbindung herausnehmen) Danke für eure Hilfe |
Sponsored Links |
|
|||
Dir fehlt hier einiges.
Allen voran: overflow:hidden damit die Kindelemente auch ausgeblendet werden. Danach: Warum gibt es bei dir nur chrome? Es gibt so viel mehr als nur -webkit. |
Sponsored Links |
|
|||
Zitat:
Zitat:
Aber hast ja recht. Um das in ein Forum zu setzen ziemlich unpraktisch. Habs geändert. Werde es aber hier jetzt nicht posten da das zu lang werden würde. Geändert von Magic94 (08.01.2015 um 10:45 Uhr) |
|
|||
Wo hast du overflow:hidden eingetragen? Ich sehe es nirgends auf deiner Seite.
btw, warum wird auf deiner Seite das div mit der Klasse site absolut positioniert? Ist das nur für die Demonstration oder kommt das auch in der endgültigen Version? Was die Präfixe angeht: Du brauchst es nicht 4 mal schreiben. Es reicht einmal die Standardvariante und einmal die -webkit Variante für den Chrome. Damit hast du alle (wichtigen) Browser abgedeckt. |
|
|||
Zitat:
http://tenac.ddns.net/intranet/styles/main.css klicken. Aber die Datei ist ziemlich durcheinander. Code:
background-color:ffffff; width:90%; text-align:center; margin-left:auto; margin-right:auto; position: relative; overflow: hidden; -webkit-animation-name: sl-close; -webkit-animation-duration: 1s; -webkit-animation-delay: 3s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; Schönheit und Richtigkeit werde ich später nocheinmal überarbeiten. Das ganze Projekt soll ja letztenendes auch veröffentlicht werden. Geändert von Magic94 (08.01.2015 um 10:59 Uhr) |
|
|||
Bei mir verschwindet jetzt der Inhalt. Ist dein Problem damit jetzt behoben?
Und du brauchst kein position:absolute für diese Seite. Das wollte ich damit sagen. Damit macht man sich (gerade als Anfänger) mehr Probleme als man löst. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 19:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 16:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 15:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 10:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 19:18 |