Hi @all...
auch wenn bisher noch keine Antwort kam, war ich nicht untätig und habe den CSS Code überarbeitet, entmüllt, überflüssige Deklarationen entfernt und übersichtlicher gestaltet. Daher ist oben genannte Testseite nicht mehr mit dem oben geposteten Code hochgeladen... Hier daher die überarbeitete Seite:
Ich bin nun davon weggegangen die horizontale Ausklappung nach rechts zu wählen. Dies bedingt dadurch, das die einzelnen Boxen sonst den Eingangstext überlagern würden und das nicht wirklich gut aussieht wie ich feststellen musste. Hier aber nun erstmal der überarbeitete CSS Code:
Code:
<style type="text/css">
#issnavi a {
text-decoration: none;
}
#issnavi a:hover {
color: #bdb177;
}
div#links {
position: relative;
top: 0px;
left: 0px;
width: 275px;
height: 60px;
}
div#links a {
text-decoration: none;
}
div#links a span {display: none;}
div#links a:hover span {
display: block;
width: 275px;
position: absolute; top: 0px; left: 0;
color: #999999;
background: black;
font: 16px agency fb, sans-serif, z-index: 1;
font-weight: bold;
text-align: center;
}
</style>
<style type="text/css">
#menu {
position: relative;
width: 160px;
left: 0px;
top:0px;
}
#menu ul {
list-style: none;
}
#menu a {
display: block;
font: bold 10px agency fb, helvetica, sans-serif;
color: #000000;
background: #999999;
text-decoration: none;
margin-bottom: 2px;
text-align: left;
padding-left: 2px;
}
#menu p {
display: block;
height: 40px;
color: #999999;
font: bold 11px agency fb, helvetica, sans-serif ;
text-align: left;
background: #000000;
background-repeat: no-repeat;
background-position: right;
padding-left: 0px;
}
#menu a:hover {
color: #bdb177;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0px;
left: 100%;
width: 100%;
}
div#menu ul ul a:hover {
background: #000000;
}
div#menu ul ul ul a:hover {
background: #999999;
}
div#menu ul ul ul,
div#menu ul ul,
div#menu ul ul li:hover ul ul,
div#menu ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
#raumfahrt a {
padding-left: 0px;
}
#raumfahrt p {
padding-left: 0px;
padding-right: 41px;
background-image: url("../assets/images/astronaut40er.jpg");
}
#raumfahrt p:hover {
color: #bdb177;
}
#shuttle a {
padding-left: 0px;
}
#shuttle p {
padding-right: 41px;
background-image: url("../assets/images/shuttle40er.jpg");
}
#shuttle p:hover {
color: #bdb177;
}
#iss a {
padding-left: 0px;
}
#iss p {
padding-right: 41px;
background-image: url("../assets/images/iss40er.jpg");
}
#iss p:hover {
color: #bdb177;
}
#moon a {
padding-left: 0px;
}
#moon p {
padding-right: 41px;
background-image: url("../assets/images/const40er.jpg");
}
#moon p:hover {
color: #bdb177;
}
#ground a {
padding-left: 0px;
}
#ground p {
padding-right: 41px;
background-image: url("../assets/images/Ground40er.jpg");
}
#ground p:hover {
color: #bdb177;
}
#glossar a {
padding-left: 0px;
}
#glossar p {
padding-right: 41px;
background-image: url("../assets/images/auge40er.jpg");
}
#glossar p:hover {
color: #bdb177;
}
</style>
Das ist doch schon mal um einiges kürzer als noch gestern. Nichts desto trotz werden die Experten sicher noch genügend Verbesserungsmöglichkeiten sehen. Den IE Workaround habe ich erstmal komplett rausgenommen, da ich ihn alleine sowieso nicht zum laufen bekomme... Ich hoffe da später noch nacharbeiten zu können mit Unterstützung.
Nun gibt es jedoch einige Dinge die ich überhaupt nicht realisiert bekomme, egal was ich probiere. Alles immer bezogen auf die linke Navigationsleiste:
- Ich möchte gerne den Text links neben den Bildern vertikal zentrieren. Aber egal was ich probiert habe es klappt einfach nicht. Ich hadere da anscheinend mit dem display: block und display: inline Elementen. Wie wäre hier die beste Umsetzung?
- Da ich nun nach unten aufklappe und nicht mehr horizontal, soll die erste Unterebene (ul ul) linksbündig erscheinen. Auch dieses ist mir unmöglich. Die Liste soll die genaue Breite der ersten Ebene mit den Bildern bekommen und direkt darunter aufklappen mit einem farbigen Background und linksbündig ausgerichtet werden. Aufklappen nach unten geht schon (ISS Menü anschauen), aber die Ausrichtung klappt nicht.
- Die dritte Unterebene(ul ul ul) soll dann auch nach unten erscheinen, aber um 10px nach rechts eingerückt um die Unterordnung zu verdeutlichen. Der rechte Rand soll aber logischerweise wieder auf die erste Ebene mit den Bildern begrenzt werden. Auch dieses schaffe ich nicht umzusetzen.
Ich hoffe durch die Tatsache das ich von der horizontalen Aufklappung abgegangen bin und nun vertikal nach unten klappen möchte das es das eventuell etwas einfacher machen könnte und sich dadurch hier noch 1,2 Leute finden die mir helfen können.
Danke Gruss und vorab schon ein schönes Wochenende... Mac