Navigation und Subnavigation von Matthias Apsel, 23.04.2011 18:34

Navigation und Subnavigation

roseviolette 23.04.2011 17:40

Hallo zusammen

Ich habe eine Homepage mit spezieller Navigation:

<div id="nav">  
    <h2 class="accessibility">Navigation</h2>  
  
        <ul>  
        	<li class="home"><a class="activehome" href="index.html" accesskey="1"><dfn class="accessibility">1:Home </dfn></a></li>  
  
            <li class="about"><a href="about.html" accesskey="2"><dfn class="accessibility">2:About </dfn></a>  
            	<ul>  
                  <li><a href="news.html">News</a></li>  
                </ul>  
            </li>  
            <li class="web"><a href="web.html" accesskey="3"><dfn class="accessibility">3:Web </dfn></a>  
            	<ul>  
           	    <li><a href="weboffer.html">Offer</a></li>  
                    <li><a href="webclients.html">Clients</a></li>  
                </ul>  
			</li>  
            <li class="more"><a href="more.html" accesskey="4"><dfn class="accessibility">4:More </dfn></a>  
            	<ul>  
           	    <li><a href="moreoffer.html">Offer</a></li>  
                    <li><a href="moreclients.html">Clients</a></li>  
                </ul>  
            </li>  
            <li class="contact"><a href="contact.html" accesskey="5"><dfn class="accessibility">5:Contact</dfn> </a></li>  
  
        </ul>  
    	  
	</div><!--end nav--
~~~>  
  
  
entsprechendes css:  
  
~~~css
#nav{  
	margin-left:300px;  
	position:absolute;  
	z-index:500;  
	}  
	  
#nav ul li{  
	display:block;  
	height:78px;  
	width:78px;  
	float:left;  
	}  
	  
#nav ul li a {  
	display:block;  
	height:78px;  
	position:relative;  
	width:78px;  
	z-index:11000;  
	margin-left:-2px;  
	}  
	  
	/*Home*/  
#nav ul li.home{  
	background-image:url(../images/Buttons/button_home_normal.png);  
	margin-left:-60px;  
	margin-top:303px;  
	}  
	  
#nav ul li.home a:hover{  
	background-image:url(../images/Buttons/button_home_rollover.png);  
	}  
	  
#nav ul li.home a.activehome{  
	background-image:url(../images/Buttons/button_home_active.png);  
	}  
  
/*About*/  
  
#nav ul li.about{  
	background-image:url(../images/Buttons/button_about_normal.png);  
	margin-left:46px;  
	margin-top:213px;  
	}  
	  
#nav ul li.about a:hover{  
	background-image:url(../images/Buttons/button_about_rollover.png);  
	margin-right:-100px;  
	}  
	  
#nav ul li.about a.activeabout{  
	background-image:url(../images/Buttons/button_about_active.png);  
	}  
	  
	  
	  
/*Web*/  
  
#nav ul li.web{  
	background-image:url(../images/Buttons/button_web_normal.png);  
	margin-left:46px;  
	margin-top:143px;  
	}  
	  
#nav ul li.web a:hover{  
	background-image:url(../images/Buttons/button_web_rollover.png);  
	}  
	  
#nav ul li.web a.activeweb{  
	background-image:url(../images/Buttons/button_web_active.png);  
	}  
  
  
/*More*/  
  
#nav ul li.more{  
	background-image:url(../images/Buttons/button_more_normal.png);  
	margin-left:46px;  
	margin-top:87px;  
	}  
	  
#nav ul li.more a:hover{  
	background-image:url(../images/Buttons/button_more_rollover.png);  
	}  
	  
#nav ul li.more a.activemore{  
	background-image:url(../images/Buttons/button_more_active.png);  
	}  
  
  
/*Contact*/  
  
#nav ul li.contact{  
	background-image:url(../images/Buttons/button_contact_normal.png);  
	margin-left:46px;  
	margin-top:48px;  
	}  
	  
#nav ul li.contact:hover{  
	background-image:url(../images/Buttons/button_contact_rollover.png);  
	}  
	  
#nav ul li.contact a.activecontact{  
	background-image:url(../images/Buttons/button_contact_active.png);  
	float:none;  
	}  
	  
/* subnavi */  
  
/* unterliste links verstecken, bei mouseover unterliste einblenden */	  
#nav ul ul {  
	display:block;  
	height:100px;  
	margin-left:40px;  
	margin-top:-30px;  
	position:absolute;  
	width:100px;  
	/*runde ecken*/  
	-moz-border-radius:20px;  
	-webkit-border-radius:20px;  
	/*schatten*/  
	-moz-box-shadow:3px 3px 5px #000;  
	-webkit-box-shadow:3px 3px 5px #000;  
	box-shadow:3px 3px 5px #000;  
	}	  
	  
#nav ul ul{  
	left:-2000px;  
	z-index:10000;  
	background-color:#f39b61;  
	}  
  
#nav ul li:hover ul{  
	left:0px;  
	position:relative;  
	}	  
	  
	  
#nav ul ul li, #nav ul ul li a {  
	display:inline;  
	width:78px;  
	height:20px;  
	text-decoration:none;  
	color:#000;  
	font-family:Arial, Helvetica, sans-serif;  
	}	  
  
#nav ul ul li a.activenews {  
	text-decoration:underline;  
	color:#c61197;  
	}  
	  
#nav ul ul li a.activemoreoffer {  
	text-decoration:underline;  
	color:#c61197;  
	}  
	  
#nav ul ul li a.activemoreclients {  
	text-decoration:underline;  
	color:#c61197;  
	}  
	  
#nav ul ul li a.activeweboffer {  
	text-decoration:underline;  
	color:#c61197;  
	}  
	  
#nav ul ul li a.activewebclients {  
	text-decoration:underline;  
	color:#c61197;  
	}  
  
#nav ul ul li {  
	margin-left:20px;  
	margin-top:10px;  
	padding:0px 10px;  
	}  
	  
#nav ul ul li a:hover{  
	background-image:none !important;  
	background-color:#f6cb62;  
	}

jetzt ist es so, dass in safari und firefox funktioniert alles top aber im ie (auch version 8) verschiebt es mir den ganzen inhalt so dermassen nach unten sollte aber direkt unterhalb der navigation erfolgen.

weiss jemand, wie ich das beheben kann?

dankeschön

Beitrag melden

– Informationen zu den Bewertungsregeln

Navigation und Subnavigation
Matthias Apsel Homepage des Autors 23.04.2011 18:34

css
– Informationen zu den Bewertungsregeln
Om nah hoo pez nyeetz, roseviolette!

Ich habe eine Homepage mit spezieller Navigation:

Ich weiß zwar nicht, wie es aussehen soll, aber bei mir sieht es sowohl im FF4 als auch im IE 789 ähnlich aus.

Wenn es so aussehen soll, wie es aussieht ist eine ziemlich spezielle Navigation.

Mich deucht, du hast viele Klassenbezeichnungen, die es vielleicht nicht braucht.

Stell doch deine Seite mal online.

Matthias

--
1/z ist kein Blatt Papier.
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Navigation und Subnavigation
  
  roseviolette 23.04.2011 19:27
  
  css
  – Informationen zu den Bewertungsregeln
  Also die Seite wäre www.alohadesign.ch
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

Navigation und Subnavigation

roseviolette 23.04.2011 22:58

– Informationen zu den Bewertungsregeln

url ist www.alohadesign.ch

Hallo zusammen

Ich habe eine Homepage mit spezieller Navigation:

<h2 class="accessibility">Navigation</h2>

<ul>
         <li class="home"><a class="activehome" href="index.html" accesskey="1"><dfn class="accessibility">1:Home </dfn></a></li>

<li class="about"><a href="about.html" accesskey="2"><dfn class="accessibility">2:About </dfn></a>
             <ul>
                  <li><a href="news.html">News</a></li>
                </ul>
            </li>
            <li class="web"><a href="web.html" accesskey="3"><dfn class="accessibility">3:Web </dfn></a>
             <ul>
                <li><a href="weboffer.html">Offer</a></li>
                    <li><a href="webclients.html">Clients</a></li>
                </ul>
</li>
            <li class="more"><a href="more.html" accesskey="4"><dfn class="accessibility">4:More </dfn></a>
             <ul>
                <li><a href="moreoffer.html">Offer</a></li>
                    <li><a href="moreclients.html">Clients</a></li>
                </ul>
            </li>
            <li class="contact"><a href="contact.html" accesskey="5"><dfn class="accessibility">5:Contact</dfn> </a></li>

</ul>

</div><!--end nav--


>   
>   
> entsprechendes css:  
>   
> ~~~css

#nav{  

> 	margin-left:300px;  
> 	position:absolute;  
> 	z-index:500;  
> 	}  
> 	  
> #nav ul li{  
> 	display:block;  
> 	height:78px;  
> 	width:78px;  
> 	float:left;  
> 	}  
> 	  
> #nav ul li a {  
> 	display:block;  
> 	height:78px;  
> 	position:relative;  
> 	width:78px;  
> 	z-index:11000;  
> 	margin-left:-2px;  
> 	}  
> 	  
> 	/*Home*/  
> #nav ul li.home{  
> 	background-image:url(../images/Buttons/button_home_normal.png);  
> 	margin-left:-60px;  
> 	margin-top:303px;  
> 	}  
> 	  
> #nav ul li.home a:hover{  
> 	background-image:url(../images/Buttons/button_home_rollover.png);  
> 	}  
> 	  
> #nav ul li.home a.activehome{  
> 	background-image:url(../images/Buttons/button_home_active.png);  
> 	}  
>   
> /*About*/  
>   
> #nav ul li.about{  
> 	background-image:url(../images/Buttons/button_about_normal.png);  
> 	margin-left:46px;  
> 	margin-top:213px;  
> 	}  
> 	  
> #nav ul li.about a:hover{  
> 	background-image:url(../images/Buttons/button_about_rollover.png);  
> 	margin-right:-100px;  
> 	}  
> 	  
> #nav ul li.about a.activeabout{  
> 	background-image:url(../images/Buttons/button_about_active.png);  
> 	}  
> 	  
> 	  
> 	  
> /*Web*/  
>   
> #nav ul li.web{  
> 	background-image:url(../images/Buttons/button_web_normal.png);  
> 	margin-left:46px;  
> 	margin-top:143px;  
> 	}  
> 	  
> #nav ul li.web a:hover{  
> 	background-image:url(../images/Buttons/button_web_rollover.png);  
> 	}  
> 	  
> #nav ul li.web a.activeweb{  
> 	background-image:url(../images/Buttons/button_web_active.png);  
> 	}  
>   
>   
> /*More*/  
>   
> #nav ul li.more{  
> 	background-image:url(../images/Buttons/button_more_normal.png);  
> 	margin-left:46px;  
> 	margin-top:87px;  
> 	}  
> 	  
> #nav ul li.more a:hover{  
> 	background-image:url(../images/Buttons/button_more_rollover.png);  
> 	}  
> 	  
> #nav ul li.more a.activemore{  
> 	background-image:url(../images/Buttons/button_more_active.png);  
> 	}  
>   
>   
> /*Contact*/  
>   
> #nav ul li.contact{  
> 	background-image:url(../images/Buttons/button_contact_normal.png);  
> 	margin-left:46px;  
> 	margin-top:48px;  
> 	}  
> 	  
> #nav ul li.contact:hover{  
> 	background-image:url(../images/Buttons/button_contact_rollover.png);  
> 	}  
> 	  
> #nav ul li.contact a.activecontact{  
> 	background-image:url(../images/Buttons/button_contact_active.png);  
> 	float:none;  
> 	}  
> 	  
> /* subnavi */  
>   
> /* unterliste links verstecken, bei mouseover unterliste einblenden */	  
> #nav ul ul {  
> 	display:block;  
> 	height:100px;  
> 	margin-left:40px;  
> 	margin-top:-30px;  
> 	position:absolute;  
> 	width:100px;  
> 	/*runde ecken*/  
> 	-moz-border-radius:20px;  
> 	-webkit-border-radius:20px;  
> 	/*schatten*/  
> 	-moz-box-shadow:3px 3px 5px #000;  
> 	-webkit-box-shadow:3px 3px 5px #000;  
> 	box-shadow:3px 3px 5px #000;  
> 	}	  
> 	  
> #nav ul ul{  
> 	left:-2000px;  
> 	z-index:10000;  
> 	background-color:#f39b61;  
> 	}  
>   
> #nav ul li:hover ul{  
> 	left:0px;  
> 	position:relative;  
> 	}	  
> 	  
> 	  
> #nav ul ul li, #nav ul ul li a {  
> 	display:inline;  
> 	width:78px;  
> 	height:20px;  
> 	text-decoration:none;  
> 	color:#000;  
> 	font-family:Arial, Helvetica, sans-serif;  
> 	}	  
>   
> #nav ul ul li a.activenews {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
> 	  
> #nav ul ul li a.activemoreoffer {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
> 	  
> #nav ul ul li a.activemoreclients {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
> 	  
> #nav ul ul li a.activeweboffer {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
> 	  
> #nav ul ul li a.activewebclients {  
> 	text-decoration:underline;  
> 	color:#c61197;  
> 	}  
>   
> #nav ul ul li {  
> 	margin-left:20px;  
> 	margin-top:10px;  
> 	padding:0px 10px;  
> 	}  
> 	  
> #nav ul ul li a:hover{  
> 	background-image:none !important;  
> 	background-color:#f6cb62;  
> 	}	  
>

jetzt ist es so, dass in safari und firefox funktioniert alles top aber im ie (auch version 8) verschiebt es mir den ganzen inhalt so dermassen nach unten sollte aber direkt unterhalb der navigation erfolgen.

weiss jemand, wie ich das beheben kann?

dankeschön

Beitrag melden

– Informationen zu den Bewertungsregeln

Ungenießbares
Shadowcrow 23.04.2011 23:02

menschelei
– Informationen zu den Bewertungsregeln
'ǝɯɐu$ ıɥ

Bitte nicht soviel TOFU, wir sind auf Diät.

ssnɹƃ
ʍopɐɥs

--
HTML, was ist das? Ein neues Männermagazin? Css.., was es alles gibt!
Beitrag melden

–
Informationen zu den Bewertungsregeln
Navigation und Subnavigation
Matthias Apsel Homepage des Autors 24.04.2011 09:50

css
– Informationen zu den Bewertungsregeln
Om nah hoo pez nyeetz, roseviolette!

url ist www.alohadesign.ch

Es gibt keinen Grund, dasselbe ein zweites Mal zu posten.

Ich kann dir leider nicht sagen, woran es liegen könnte, du musst dich selbst durch Auskommentieren bestimmter Teile des Quelltextes hinarbeiten. Wie schon bemerkt, sieht es im IE8 ähnlich aus, wie im FF4. Allerdings zeigt der Neuner nichts außer dem Body an. Wenn man im IE die Eintwicklertools (F12) öffnet, stellt man fest, dass der IE9 "<body />" liest. Nachdem dein Code valide ist, könnte IMHO nur an

<! [endif]-->

einem Leerzeichen liegen.

Ein Blick mit den Entwicklertools in den Kommentar "<!--[if..." bestätigt dies.

Matthias

--
1/z ist kein Blatt Papier.
Beitrag melden

–
Informationen zu den Bewertungsregeln

Navigation und Subnavigation
Gunnar Bittersmann Homepage des Autors 25.04.2011 01:00

css
– Informationen zu den Bewertungsregeln
@@roseviolette:

nuqneH

<div id="nav">
<h2 class="accessibility">Navigation</h2>

Wozu soll die Klasse "accessibility" gut sein?

<ul>
<li class="home"><a class="activehome" href="index.html" accesskey="1"><dfn class="accessibility">1:Home </dfn></a></li>

Dass alle '#nav>h2>ul>li>a>dfn'-Elemente der Klasse "accessibility" angehören, ist ein sicheres Zeichen, dass die Klasse überflüssig ist.

Und die 'dfn'-Elemente wohl auch.

Nicht nur überflüssig, sondern sogar schädlich ist die Verlinkung der jeweils aktuellen Seite im Menü: Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien. [Nielsen]

Qapla'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

roseviolette: Navigation und Subnavigation

Navigation und Subnavigation

Ungenießbares

Navigation und Subnavigation

Navigation und Subnavigation

Navigation und Subnavigation

Navigation und Subnavigation

Ungenießbares

Navigation und Subnavigation

Navigation und Subnavigation