zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Valider Navigationsaufbau für RollOver-Effeckt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.05.2010, 23:50
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.10.2009
Beiträge: 175
1chris befindet sich auf einem aufstrebenden Ast
Standard Valider Navigationsaufbau für RollOver-Effeckt

Hallo,

ich habe eine Navigation mit mehreren Links, wenn die Maus über einen Link fährt ändert sich ein dazugehörendes Bild.

Allerdings musste ich für meine jetzige Lösung ein DIV-Container in ein Listitem stekcen, was ja nicht valide ist.

Welche Lösung wäre am sinnigsten?

Hier kurz der Code (CSS gleich mit, auch wenn es mir eigentlich um HTML geht).

HTML:
HTML-Code:
      <div id="navigation">
        <ul>
          <li>< href="#">Home</a></li>
            <div class="imagebox active"><img src="img/visaul_1.jpg" alt="" /></div>
          </li>
          <li><a href="link">Link</a>
            <div class="imagebox"><img src="img.jpg" alt="" /></div>
          </li>
          <li><a href="link">Link</a>
            <div class="imagebox"><img src="img.jpg" alt="" /></div>
          </li>
	  .......
        </ul>
      </div>
      <div id="visual"></div>
Hier der CSS Code:
Code:
#page #header h1 { text-align:left; padding-left: 10px; line-height:60px; }
#page #navi_visu_box { width:760px; height: 228px; background:#ffda9f; overflow:hidden -webkit-box-shadow: 5px 5px 5px 1px #666; -moz-box-shadow: 5px 5px 5px 1px #666;  margin-bottom:20px; border:1px solid #666; }
#page #navi_visu_box #navigation { width:270px; height:220px; float:left; position:relative; }
#page #navi_visu_box #navigation ul { width:175px; margin:0 auto; }
#page #navi_visu_box #navigation ul li { list-style: none; position:static; font-size:14px; font-weight:bold; line-height:39px; text-align:center; background:url(img/balken.jpg) bottom no-repeat; }
#page #navi_visu_box #navigation ul li:last-child { background: none; }
#page #navi_visu_box #navigation ul li a {  color:#b12d00; text-decoration:none; position:relative; top:-5px; z-index:3; width:175px; display:inline-block; }
#page #navi_visu_box #navigation ul li a:hover { text-decoration:none; color:#000; font-weight:bold; }
#page #navi_visu_box #navigation ul li .imagebox { position:absolute; width: 490px; height:228px; display: none; top:0; left:270px; z-index:1; overflow:hidden; }
#page #navi_visu_box #navigation ul li .active { display: block; }
#page #navi_visu_box #navigation ul li:hover .imagebox { display:block; font-weight:bold; }
#page #navi_visu_box #visual { width:490px; height:228px; background:url(img/visual_shadows.png) no-repeat; float:left; position:relative; z-index:2; }
Danke für hilfreiche Beiträge!

Chris
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.05.2010, 01:15
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von 1chris Beitrag anzeigen
ich habe eine Navigation mit mehreren Links, wenn die Maus über einen Link fährt ändert sich ein dazugehörendes Bild.

<li>< href="#">Home</a></li>
<div class="[...]"><img src="[...]" alt="" /></div>
</li>
Bei einer ul und auch bei einer ol darf li sowohl Block- als auch Inline-Elemente enthalten. Wenn der Validator den Code angemeckert haben sollte, dann kann es auch daran liegen, dass der erste Listenpunkt 2x geschlossen wurde.

Was spräche andererseits dagegen, statt des Divs das Bild in den Link zu legen und ihm im Hoverstatus das andere Bild anzeigen zu lassen? IE<7-User hätten dann auch was davon.

Beispiel:
a:hover {background-image: url(...);}

<li><a></a></li

Geändert von EvT (13.05.2010 um 01:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.05.2010, 11:46
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.10.2009
Beiträge: 175
1chris befindet sich auf einem aufstrebenden Ast
Standard

Wuaah wie Codeblind man wird -_-

Danke, habe ich stumpf übersehe und deshalb hatte der Validator jedes <li> angemeckert... und ich dachte mein Aufbau wäre falsch. Nochmals danke und werde mir deine Idee bezüglich der umstrukturierung gleich mal angucken - ist noch bissel mehr Code und mal sehen ob das klappt.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
horizontale Navigation mit rollover Bild c3ox CSS 3 28.11.2009 01:06
Rollover und Dropdown? Der Buß CSS 0 23.08.2008 18:09
ie verliert Abstand bei Rollover bene CSS 2 22.09.2006 21:12
RollOver wirkt sich auf 2 Dinge aus! Wie...? Bossanova68 CSS 3 16.08.2006 12:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:06 Uhr.