[Magic94]

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:

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

Jetzt ergibt sich das Problem, dass der Inhalt des DIVs aber an Ort und stelle stehen bleibt und nicht mit dem DIV kleiner wird und letztensendes verschwindet.

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

[cloned]

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.

[Magic94]

Zitat von cloned

Dir fehlt hier einiges.
Allen voran: overflow:hidden damit die Kindelemente auch ausgeblendet werden.

Overflow: hidden; hab ich jetzt eingetragen. Hat geholfen

Zitat von cloned

Danach: Warum gibt es bei dir nur chrome? Es gibt so viel mehr als nur -webkit.

Ich entwickle in Chrome und schreibe dann für IE, MOZ, und O hinterher. Sonst muss ich beim entwickeln jede Änderung 4 mal machen.
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.

[cloned]

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.

[Magic94]

Zitat von cloned

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.

In der main.css, welche du nicht sehen kannst () habe ich das eingetragen. Hier nochmal ein Auszug. Andernfalls kannst du auch auf
http://tenac.ddns.net/intranet/styles/main.css klicken. Aber die Datei ist ziemlich durcheinander.

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;

Das DIV Site sorgt dafür, dass die Seite nicht in alle Richtungen fliegen geht. Ist mein erstes CSS Projekt und teilweise bin ich froh wenn es funktioniert
Schönheit und Richtigkeit werde ich später nocheinmal überarbeiten. Das ganze Projekt soll ja letztenendes auch veröffentlicht werden.

[cloned]

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.