Vertikale CSS Navigation mit Bildern und Text

macmensa · #1 (**permalink**) 23.07.2009, 22:56

Hi @all...

nach langer, laaaanger Zeit habe ich nun wieder begonnen an meiner HP zu basteln... Und musste feststellen, das ich nach 2 Jahren verdammt viel vergessen habe...

Nichts desto trotz habe ich mich in den letzten 4 Tagen daran gemacht die Grundstruktur der Navigation meiner Seite zu überarbeiten... Bevor ich an der HP neue Inhalte einfüge sollte das erstmal mein Hauptanliegen sein...

Mit sehr viel basteln, lesen, Code Schnipsel suchen, probieren, nochmal probieren, lesen, wieder probieren und zum Schluss ein kleines Erfolgserlebniss haben, habe ich nun einen ansatzweise brauchbaren Entwurf hinbekommen... Bevor ich also zu meinem Anliegen komme hier nun die Testseite:

Testseite CSS Navigation

Die Navigation am oberen Rand scheint einwandfrei zu funktionieren. (Stolz bin!). Die seitliche Navigation mit dem ausklappbaren CSS Manü macht mir jedoch erhebliche Probleme. Der Inhalt der Seite ist momentan absolut nebensächlich. Beim überfahren der Bilder links öffnen sich z.t. die Untermenüs. Nicht jede Rubrik hat jedoch momentan Unterseiten. Die sollen später mal folgen. Bei den Menüpunkten mit Unterseiten ist die Funktion jedoch gut zu erkennen.

Zumindest mit dem Mozilla Firefox ist es das Ergebniss was ich mir vorstelle, mit einigen kleinen Haken. Im IE hakt es dafür ganz gewältig. Ich habe zwar auf folgenden zwei Seiten etwas zumThema "Workaround" gefunden und auch eingesetzt, aber das funktioniert alles nicht wirklich, da ich die CSS Navigation des ersten Links extrem angepasst habe...

Vertikales CSS Menü
IE Workaround Datei

Laut CSS Validator habe ich noch zig Fehler auf der Seite, aber das wundert mich auch kein Stück... (heisst ja nicht umsonst Testseite)

Nun zu meinen Anliegen/Fragen:

Wie bekomme ich die Navigation mit IE zum laufen?
Welche Vereinfachungen am CSS Code sollte/kann ich durchführen? (Mir kommt meine zusammen gewürfelte Variante sehr umständlich vor mit einigen überflüssigen Deklarierungen)

Diese zwei Punkte, vor allem der erste, sind meine primären Fragen.

Sicherlich hätte ich auch noch einige Wünsche und fragen zu einzelnen Formatierungen der Block und Inline Elemente, die mir so noch nicht gefallen, aber das wäre erst Schritt zwei...

Ich würde mich sehr freuen, wenn ich hier 1,2 Ansprechpartner finden könnte, die sich die Testseite mal anschauen und den dazugehörigen Code.

Code:

<div id="menu">
 <ul>
   <li><div id="raumfahrt"><a href="http://www.weltraum-visionen.de/html/raumfahrt.html"><p>Raumfahrt</p></a></div></li>
 </ul>

 <ul>
  <li><div id="shuttle"><a href="http://www.weltraum-visionen.de/html/shuttle.html"><p>Space Shuttle</p></a></div></li>
 </ul>
   
<ul>
  <li><div id="iss"><a href="http://www.weltraum-visionen.de/iss.html"><p>ISS</p></a></div>
    <ul>
        <li><a href="./module.html">Module</a>
         <ul>
          <li><a href="index.html#">Columbus</a><li>
        </ul>
      </li>
      <li><a href="./chronik.html">Chronik</a>  	
         <ul>
          <li><a href="./1998.html">Das Jahr 1998</a></li>
          <li><a href="./1999.html">Das Jahr 1999</a></li>
          <li><a href="./2000.html">Das Jahr 2000</a></li>
          <li><a href="./2001.html">Das Jahr 2001</a></li>
          <li><a href="./2002.html">Das jahr 2002</a></li>		
          <li><a href="./2003.html">Das Jahr 2003</a></li>
          <li><a href="./2004.html">Das Jahr 2004</a></li>
          <li><a href="./2005.html">Das Jahr 2005</a></li>	
	  <li><a href="./2006.html">Das Jahr 2006</a></li>
          <li><a href="./2007.html">Das Jahr 2007</a></li>
          <li><a href="./2008.html">Das Jahr 2008</a></li>		
          <li><a href="./2009.html">Das Jahr 2009</a></li>
          <li><a href="./2010.html">Das Jahr 2010</a></li>
         </ul> 
       </li>
     </ul>
  </li>
</ul>

<ul>
  <li> <div id="moon"><a href=" http://www.weltraum-visionen.de/2018.html"> <p>Moon, Mars & Beyond</p> </a></div>
    <ul>
      <li><a href="./2018.html">Constellation</a></li>
      <li><a href="./Ares.html">Ares I-V</a></li>
    </ul>
  </li>
</ul>

<ul>
  <li><div id="ground"><a href="./ground.html"><p>Ground Control</p></a></div>
    <ul>
      <li><a href="./ksc.html">KSC</a></li>
    </ul>
  </li>
</ul>

<ul>
  <li><div id="glossar"><a href="./glossar.html"><p>Glossar</p></a></div></li>
</ul>

</ul>
     				
</div>

Code:

<style type="text/css">

div#links {
position: relative; top: 0px; left: 0; width: 275px; height: 60px; font: 16px arial narrow, sans-serif; z-index: 1;
}

div#links a {
display: block; 
text-align: center; 
border-width: 0; 
text-decoration: none; 
color: #BDB177; 
}

div#links a:hover {
border: 1px solid, color: #666666;
color: #black; 
background: #AAA;
}

div#links a span {display: none;}

div#links a:hover span {
display: block;
position: absolute; top: 0px; left: 0; width: 315px;
color: #BDB177; 
background: black;
font: 16px arial narrow, sans-serif;
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;
margin-bottom: 5px;
}

#menu a {
font: bold 12px agency fb, helvetica, sans-serif;
display: block;
color: #000000;
background: #bdb177;
text-decoration: none;
}


#menu a:hover {
color: #999999;
background: #bdb177;
}

#menu li {
position: relative;
} 

#menu ul ul a {
padding-left: 5px;
}

#menu ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100px; 
padding-left: 10px;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; 
width: 100%; 
}

div#menu 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 {
background: #000000;
}

#raumfahrt p {
display: block;
height: 45px;
padding-right: 50px;
color: #999999;
font: bold 12px agency fb, helvetica, sans-serif ;
background: #000000;
background-image: url("../assets/images/astronaut45er.jpg"); 
background-repeat: no-repeat;
background-position: right;
}

#raumfahrt p:hover {
color: #bdb177;
}

#shuttle a {
background: #000000;
}

#shuttle p {
display: block;
height: 40px;
padding-right: 50px;
color: #999999;
font: bold 12px agency fb, helvetica, sans-serif ;
background: #000000;
background-image: url("../assets/images/shuttle45er.jpg"); 
background-repeat: no-repeat;
background-position: right;
}

#shuttle p:hover {
color: #bdb177;
}

#iss a {
background: #000000;
}

#iss p {
display: block;
height: 40px;
padding-right: 50px;
color: #999999;
font: bold 12px agency fb, helvetica, sans-serif ;
background: #000000;
background-image: url("../assets/images/iss45er.jpg"); 
background-repeat: no-repeat;
background-position: right;
}

#iss p:hover {
color: #bdb177;
}

#moon a {
background: #000000;
}

#moon p {
display: block;
height: 40px;
padding-right: 53px;
color: #999999;
font: bold 12px agency fb, helvetica, sans-serif ;
background: #000000;
background-image: url("../assets/images/const45er.jpg"); 
background-repeat: no-repeat;
background-position: right;
}

#moon p:hover {
color: #bdb177;
}

#ground a {
background: #000000;
}

#ground p {
display: block;
height: 40px;
padding-right: 50px;
color: #999999;
font: bold 12px agency fb, helvetica, sans-serif ;
background: #000000;
background-image: url("../assets/images/Ground45er.jpg"); 
background-repeat: no-repeat;
background-position: right;
}

#ground p:hover {
color: #bdb177;
}

#glossar a {
background: #000000;
}

#glossar p {
display: block;
height: 40px;
padding-right: 50px;
color: #999999;
font: bold 12px agency fb, helvetica, sans-serif ;
background: #000000;
background-image: url("../assets/images/auge45er.jpg"); 
background-repeat: no-repeat;
background-position: right;
}

#glossar p:hover {
color: #bdb177;
}

</style>

<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover3.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
} 
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 

#raumfahrer a, #raumfahrer p {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 


#shuttle a, #shuttle p {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 


#iss a, #iss p {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 


#moon a, #moon p {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 


#ground a, #ground p {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 


#glossar a, #glossar p {
font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
/* if required use em's for IE as it won't resize pixels */
} 


</style>
<![endif]-->

Puh... Viel Text und Erklärungen... Ich hoffe es hat jemand bis hierher gelesen und freue mich auf konstruktive Hilfe, Kritik und Anregungen...

Gruss Mac

macmensa · #2 (**permalink**) 24.07.2009, 15:27

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:

Überarbeitete Testseite

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

macmensa · #3 (**permalink**) 25.07.2009, 16:23

Hi @all...

ich beende mal meine Selbstgespräche hier, da ich nach den nächsten schlaflosen Nächten mein Problem gelöst bekommen habe...

Test Seite

Wer im Hintergrund mitgelesen haben sollte hier nun das fertige HTML und das CSS:

Zitat:

<div id="navi">
<ul>

<li><a href="./1998.html"><div id="raum"><p>Raumfahrt</p></div></a></li>

<li><a href="./1999.html"><div id="shuttle"><p>Space Shuttle</p></div></a>
<ul>
<li><a href="./1999.html">Die Orbiter</a></li>
<li><a href="./1999.html">Aufbau</a></li>
</ul>
</li>

<li><a href="./2000.html"><div id="iss"><p>ISS</p></div></a>

<ul>
<li><a href="./1999.html">Module</a></li>
<li><a href="./1999.html">Chronik</a>
<ul>
<li><a href="./1999.html">Das Jahr 1998</a></li>
<li><a href="./1999.html">Das Jahr 1999</a></li>
<li><a href="./1999.html">Das Jahr 2000</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="./2001.html"><div id="moon"><p>Moon</p></div></a></li>

<li><a href="./2002.html"><div id="ground"><p>Ground Control</p></div></a></li>

<li><a href="./2003.html"><div id="glossar"><p>Glossar</p></div></a></li>

</ul>
</div>

und hier das CSS:

Zitat:

IE funktioniert leider immer noch nicht... Falls dabei jemand Rat weiss sage ich nicht nein dazu... Aber das Hauptproblem ist nun erstmal gelöst...

Danke fürs mitlesen... gruss Mac

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Parent DIV soll mit der Höhe seines Childs wachsen	Tekkla	CSS	2	19.11.2009 18:27
Problem: Überschrift <hx> innerhalb von Abschnitt <p>	Ares	CSS	7	24.10.2006 13:30
bild über 2 div-tags positionieren	MoJo	CSS	7	12.06.2006 16:48
Webseite in IE/MAXTHON ok, in Firefox zerissen	Midnight	CSS	50	21.02.2006 10:34