nicht angemeldet
Habe jetzt auch die Fußzeile in eine flexbox umgeändert. Soweit funktioniert ja alles. Leider bringe ich wieder einen Teil nicht so hin wie ich möchte.
Die mail-Adresse ist ausgeblendet. Dazu habe ich die Breite verkleinert. Mit "hover" wird die Breite schrittweise auf die Länge des Textes erhöht. So weit so gut. Es funktioniert ja. Allerdings erfolgt auf Grund der Breitenänderung ein Zeilenumbruch. Wenn ich es hinbrächte, daß der Text nach hover zentriert wäre, würde das kein Problem machen. Der Text "e-Post" ist ja als item in der Mitte. Warum bleibt es nicht mittig wenn mit hover der gesamte Text wieder vorhanden ist? Gebe ich die Breite weg, sieht man den gesamte Text mittig. Vertical-aligne funktionieren ja mit flexbox nicht.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
footer {
background-color: black;
color: yellow;
}
ul {
list-style-type: none;
display:flex;
width: 100%;
height: 5em;
padding: 0 15px 0 15px;
justify-content: space-between;
align-items: center;
}
.adresse {
width: 75px;
height: 20px;
overflow: hidden;
cursor: pointer;
text-indent: 5px;
transition: ease-in-out;
transition-property: width, background-color, border-color;
transition-duration: 0.5s, 0.5s, 0.5s;
transition-delay: 0s, 0.5s, 0.5s;
}
a {
color: lightblue;
}
.adresse:hover{
border-radius: 10px;
border: 4px solid yellow;
width: 270px;
height: 30px;
background-color: brown;
}
</style>
</head>
<body>
<footer>
<ul>
<li class="adresse"> @ e-Post:
<a href="mailto:pree.franz-homepage@aon.at">p.franz-homepage@aon.at</a></li>
<li>Erstellt mit Apple - Optimiert für Safari 9.0.</li>
<li>Aktualisiert am 13.10.2015</li>
</ul>
</footer>
</body>
</html>
Kann mir da jemand auf die Sprünge helfen?
Wenn ich das geschafft habe, kann ich mich dem mittleren Teil widmen.
LG Franz
LG Franz
Der Martin
Gunnar Bittersmann
Matthias Apsel
Auge