Unterschiedliche Darstellung Offline vs div. Browser

[Girlfrommars13]

Vielen vielen Dank für die vielen Tipps! Ich konnte jetzt erst probieren, weil ich die letzten 2 Tage gearbeitet habe und das Resultat meiner Versuche ist: Es wird irgendwie immer schlimmer X-(
Seit 2 Stunden google ich und versuche diverse Sachen,...

Da das kleine Menü mit der unteren Menüleiste (about, collections & shop, etc) zusammenhängt (der Pfeil kommt von dort), sollte es in Abhängigkeit von ihr positioniert werden.
Nächste Aufgaben also: div#c5 in eine Liste umwandeln und das kleine Menü im Unterpunkt collections & shop einfügen, in etwa so:

(...)

hab ich so probiert (man muss dazu sagen, was ihr bisher nicht sehen konntet, dass die Menüpunkte im großen Menü keine Schrift, sondern Bilder sind):

  
<ul id="menue">  
	<li><a href="http://www.riekmund.com/about.html"><img src="about.gif" alt="about"></a></li>  
	<li><img src="collections_shop.png" alt="collections and shop">  
		<ul id="menue ul">  
			<li><a href="http://www.riekmund.com/collectionsandshop.html" class="class2" >new collection</a></li>  
			<li>dog coat - comes soon</li>  
			<li><strong>project weddings dress</strong></li>  
			<li><a href="http://www.riekmund.com/wherethewildthingsare.html">graduation collection</a></li>  
		</ul>  
	</li>  
	<li><a href="http://www.riekmund.com/CV.html"><img src="CV.gif" alt="CV"></a></li>  
	<li><a href="http://www.riekmund.com/artandpoetry.html"><img src="art_poetry.gif" alt="art and poetry"></a></li>  
	<li><a href="http://www.riekmund.com/imprint.html"><img src="imprint.gif" alt="imprint"></a></li>  
</ul>

und im CSS dann:

  
#menue {  
 		margin:0px auto;  
 		padding:0px;  
 		list-style-type: none;  
	}  
	  
#menue li {  
        display:inline;  
        margin:0px;  
    }  
  
#menue li a:link {  
        padding: 0px;  
        color: #4b4949;  
        opacity: 0.3;  
        height: 1%;  
  
    }  
  
#menue li a:hover {  
        border: 0px;  
        background-color: none;  
        color: #4b4949  
        opacity: 1;  
    }  
  
  
  
  
#menue ul {  
 		margin-top:0px;  
 		margin-left:0px;  
 		padding:0px;  
 		list-style-type: none;  
	}  
	  
#menue ul li {  
        padding: 0px;  
        margin: 5px;  
        width: 50%;  
        color: #4b4949;  
        font-family: Lucida Sans Typewriter, Courier New;  
        font-size:13px;  
        text-align:right;  
    }  
  
#menue ul li a:link {  
        border: 0;  
        background-color: none;  
        padding: 0px;  
        font-color: #4b4949;  
        font-family: Lucida Sans Typewriter, Courier New;  
        font-size:13px;  
    }  
  
#menue ul li a:hover {  
        display:block;  
        border: 0;  
        background-color: none;  
        font-color: #4b4949;  
    }  
  

Width soll für die gesamte horizontale Menübreite stehen. Height war jetzt nur zum ausprobieren, was passiert,...

Wie das ganze aussieht, könnt ihr hier sehen.
Wie es aussehen sollte:
http://pl.vc/4hf5c

Ich frage mich, warum trotz "display:inline" die Elemente im großen Menü nicht nebeneinander stehen (und überhaupt: warum sie so überdimensional groß sind)?! Und im kleinen Menü dann schon, obwohl die Befehle andersherum sind?

Ich habe auch versucht, die einzelnen Menüpunkte des großen Menüs ins CSS zu verfrachten wie auf dieser Seite beschrieben:

http://studentwebhosting.com/tutorials/css-based-menu-with-images/

Ihr wollt gar nicht wissen, wie die Seite danach aussah. ^^

Ohje...