XHTMLforum - Einzelnen Beitrag anzeigen - 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