Hallo zusammen,
ich habe ein kleines Layout-Problem mit einer Datei, finde den Fehler aber leider einfach nicht.
Ich habe zwei "Flügel" auf jeder Seite des Bildrandes, die mit :hover aufgeklappt werden sollen. Soweit so gut, aus irgendeinem Grund klappt beim linken Flügel die Überschrift aber nicht mit auf, und ich sehe den Fehler einfach nicht, vielleicht auch ein bisschen Betriebsblind gerade.
Hier der Teil der Seite inklusive dazu gehörigem css Teil:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel='stylesheet' href='new 1.css' type='text/css'>
<body>
<div id='gespeicherteMails'>
<p id='MailUeber'>gespeicherte Mailadressen:</p>
<div id='MailErgebnisse'></div>
</div>
<div id='Optionen'>
<p id='OptionenUeber'>Optionen:</p>
<div id='OptiErgebnisse'></div>
</div>
</body>
</html>CSS
#gespeicherteMails{
width: 1.5em;
height: 20em;
position: fixed;
background-color: red;
right: 0;
top: 15.5em;
border-radius: 15px 0 0 15px;
transition: width 1s ease-in-out;
}
#gespeicherteMails:hover, #Optionen:hover{
width: 18em;
}
#gespeicherteMails #MailUeber{
background-color:lightblue;
text-align:center;
margin:0;
border-radius: 15px 0 0 15px;
height: 100%;
width: 1.5em;
writing-mode: vertical-rl;
}
#Optionen #OptionenUeber{
background-color: lightblue;
text-align: center;
margin: 0;
border-radius: 0 15px 15px 0;
height: 100%;
width: 1.5em;
writing-mode: vertical-rl;
}
#Optionen{
width: 1.5em;
height: 20em;
position: fixed;
background-color: red;
left: 0;
top: 15.5em;
border-radius: 0px 15px 15px 0;
transition: width 1s ease-in-out;
}Vielen Dank für eure Mühe schon einmal.
