CSS [horizontale navigation] (textnavigation mit mouseover)

Status
Nicht offen für weitere Antworten.

BlackBirdone

Grünschnabel
So nachdem ich mir seit 3 Stunden ein abgesucht habe und google sich freut das ich ihnen wieder Geld in die Kasse gespült habe, merk ich das ich ohne hilfe nicht weiter komme.

Ein (sicherlich ) einfaches Menü soll her doch finde ich nur hoch koplexes Zeug mit allerlei Hintergründen und 100 Farben...



Also bei Überfahren des Button 1 sollen 2 Sachen passieren

1 Das Bild soll sich ändern also Hover (das kann hier aber vernachlässigt werden da nicht wichtig für die Navigation)

Die könnte ich ja mit
Code:
<span
 onMouseOver="document.Bild.src='bild2.gif'"
 onMouseOut="document.Bild.src='bild3.gif'">
<a href="">
 <img src="bild3.gif" name="Bild" border="0">
</a>
</span>

bewerkstelligen sofern das die Navi nicht beeinträchtigen würde.

2 Eine Textnavigation soll dann horizontal unter den Buttons verlaufen (ohne schnick schnak reine Textlinks)

Hab das in in dem Bild mal dargestellt da vllt zu kompliziert.


Wie soll es aussehen in Bildform


Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
#menüliste li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>



</head>

<body>

<div id="menü">
<ul id="menüliste">
<li><a href="#">LINK 1</a></li> 
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>

</ul>
</div>



</body>
</html>

Dinge in die horizontale ist also kein Problem würde dann entsprechent für jeden Button soetwas bastel(nach meinen Überlegungen)

Wie würde ich ds nun entsprechent verknüpfen das ich beim Rüberfahren das Menü sehen würde? Ich müsste ja dem Menü etwas in der Art vorweisen wie
"Wenn mit der Mouse über Bild 1 gefahren erschein Menü 1, wenn Bild 2 dann erscheine Menü 2."

Ich weiß das es entsprechendes gibt wie hide.

Doch fehel nmir die Kentnisse dazu um das jetzt in eine Logische reinfolge zu bringen.

Wie gesagt das sind meien Denkansätze, wenn mir da eienr helfen könnte währe ich sehr Dankbar.
(auch leichtere varianten sind möglich) , wen nmeine viel zu kompliziert gedacht ist^^
 
Hi,

ich empfehle dir zum Einstieg in die Materie das Tutorial Hybride CSS Menüs. Wenn du dich mit den Basics soweit vertraut gemacht und das technische Grundprinzip verinnerlicht hast, lade ich dich zum Stöbern in Stu Nicholls' Demo-Menüs unter der Rubrik "Menus - Multi-Level - Dropline" ein.

mfg Maik
 
So ich hab einfach nach deinem
LINK

Das kopiert und entsprechend modifiziert.

Funktioniert sogar :)

Jetzt hab ich da bissel Code (das Menü)

und das Stylesheet

Hab es nun per include Befehl ins Design gezogen

Doch dann passiert das

FehlerBild

Das Menü ansich funktioniert

Menü


Hier ein Auszug was hab ich falsch gemacht bzw muss ich dabei beachten?

Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th scope="col" background="Neuer Ordner (4)/Bilder/web6_13.png" height="33"></th>
            <th width="651" height="33"><? include("navi.php"); ?></th>
            <th scope="col" width="383"><img src="Neuer Ordner (4)/Bilder/web6_19.png" width="383" height="33" ></th>
          </tr>
</table>

Stylesheet

Code:
#nav li { /* floaten der Hauptlistenpunkte */ 
margin: 0;
float: left;
display: block; 
padding-right: 0px; } 

#nav li.off ul, #nav li.on ul { /* Verstecken der Untermenüs */ 
display: none; }

#nav li.off ul, #nav li.on ul { /* Subnavs positionieren und verstecken */ 
display: none;
position: absolute;
top: 50px;
height: 15px;
left: 10px;
padding-top: 10px; }



#nav li.on ul a, #nav li.off ul a { 
float: left; /* IE vererbt den Float nicht */
border: 0; color: #FFFFFF; 
width: auto; 
margin-right: 15px; }

#nav li.on ul { /* Aktuelle Thema anzeigen */ 
display: block; }

#nav li.off:hover ul { /* Die anderen Themen anzeigen bei hover über dem Elternmenü */ 
display: block; 
z-index: 6000; }
 
Kann es sein, dass du das Dokument navi.php in dieser Form in die Tabelle lädst, wie es sich derzeit auf deinem Server präsentiert?

Wenn ja, solltest du wissen, dass keine vollständige "HTML-Datei" includet wird, sondern nur der Teil, der sich im Dokumentkörper, also zwischen <body> ... </body> befindet.

Wenn dem nicht so ist, lad mal deinen gescheiterten Versuch auf den Server, denn die funktionstüchtige Version des Menüs hilft da nicht wirklich weiter.

Desweiteren solltest du dich unbedingt mit den Konventionen für Dateinamen näher beschäftigen, wenn ich mir so deine vergebenen Verzeichnisnamen betrachte - so ist z.B. das Leerzeichen bei der Namensvergabe unbedingt zu vermeiden, und optimalerweise alle Verzeichnis-/Dateinamen klein zu schreiben.

mfg Maik
 
Wie ich wusste das das mit den Ordnern kommt :)

Das änder ich wenns denn fertig ist wird dann fein säuberlich alles sortiert^^

Meine navi.php sieht so aus
(hab mal spaßeshalber alles drumrum weggeschnitten)

Geändert hat sich nichts

Code:
<ul id="nav">
 <li class="off" ><a href="index.php?"><img src="1_home.png" border="0" ></a> 
<ul>
 <li><a href="index.php?site=news">NEWS</a></li>  
 <li> <a href="index.php?site=news&action=archive">ARCHIVE</a></li>  
 <li><a href="index.php?site=articles">ARTICLES</a></li>
 <li><a href="#">Michelangelo</a></li> 
 <li><a href="#">Bramante</a></li> 
</ul>
 </li> 
 <li class="off"><a href="#"><img src="2_clan.png" border="0"></a>
<ul> 
 <li><a href="#">Mackintosh</a></li> 
 <li><a href="#">Guimard</a></li> 
 <li><a href="#">Horta</a></li>
 <li><a href="#">van de Velde</a></li>
</ul>
</li>
 <li class="off"><a href="#"><img src="3_media.png" border="0"></a>
<ul> 
 <li><a href="#">Sullivan</a></li> 
 <li><a href="#">Le Corbusier</a></li>
 <li><a href="#">Mies</a></li>
 <li><a href="#">Gropius</a></li> 
 <li><a href="#">Yamasaki</a></li>
</ul>
</li> 
 <li class="off"><a href="#"><img src="4_misc.png" border="0" ></a>
<ul> 
 <li><a href="#">Venturi</a></li>  
 <li><a href="#">Eisenman</a></li>
 <li><a href="#">Stern</a></li>
 <li><a href="#">Graves</a></li>
 <li><a href="#">Gehry</a></li>
</ul>
</li>
<li class="off"><a href="#"><img src="5_forum.png" border="0"></a>
<ul> 
 <li><a href="#">Xenakis</a></li>
 <li><a href="#">Lynn</a></li>
 <li><a href="#">Diller+Scofidio</a></li> 
 <li><a href="#">Zellner</a></li> 
 <li><a href="#">Hadid</a></li>
</ul>
</li> 
</ul>

Was meinen Sie mit gescheitertem versuch?
Eine Liveversion?

Aktuell
 
Zuletzt bearbeitet:
Du brauchst mich hier nicht zu "Siezen" :-)

Du hast doch scheinbar ein Darstellungsproblem, wenn du die Navigation in die Tabellenzelle einbettest? Und dieser gescheiterte Versuch würde mich als Online-Version auf deinem Server weitaus mehr interessieren, wie der zum wiederholten Mal gezeigte Quellcode der Navigation, der ja für sich allein nach deiner eigenen Aussage funktioniert.

Wenn ich deine Code-Schnippsel (Tabellengerüst + Navi + CSS) zusammenführe, erhalte ich keinen derartigen Darstellungsfehler innerhalb der Tabelle.

mfg Maik
 
Ah okay.


Aktuell <Link zur Liveversion

Mitlerweile befindet sich alles aus der CSS datei in _stylesheet.css (also nicht wundern)

Quellcode:

Code:
<?php
/*
 ########################################################################
#                                                                        #
#           Version 4       /                        /   /               #
#          -----------__---/__---__------__----__---/---/-               #
#           | /| /  /___) /   ) (_ `   /   ) /___) /   /                 #
#          _|/_|/__(___ _(___/_(__)___/___/_(___ _/___/___               #
#                       Free Content / Management System                 #
#                                   /                                    #
#                                                                        #
#                                                                        #
#   Copyright 2005-2006 by webspell.org                                  #
#                                                                        #
#   visit webSPELL.org, webspell.info to get webSPELL for free           #
#   - Script runs under the GNU GENERAL PUBLIC LICENSE                   #
#   - It's NOT allowed to remove this copyright-tag                      #
#   -- http://www.fsf.org/licensing/licenses/gpl.html                    #
#                                                                        #
#   Code based on WebSPELL Clanpackage (Michael Gruber - webspell.at),   #
#   Far Development by Development Team - webspell.org                   #
#                                                                        #
#   visit webspell.org                                                   #
#                                                                        #
 ########################################################################
*/

// important data include

include("_mysql.php");
include("_settings.php");
include("_functions.php");

// end important data include
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.gewclan.com</title>
<link href="_stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>

<script src="js/bbcode.js" language="jscript" type="text/javascript"></script>

</head>

<body background="Design/webmit_01.png">

<center>

<table width="1200" border="0" cellspacing="0" cellpadding="0" valign="top">
  <tr>
    <th scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th scope="col" height="5"></th>
      </tr>
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th scope="col" width="2"><img src="Neuer Ordner (3)/Bilder/web4_02.png" width="2" height="30" /></th>
            <th scope="col" background="Neuer Ordner (3)/Bilder/web4_03.png" width="730" height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <th scope="col" width="750" ><? include("login.php"); ?></th>
                <th scope="col">&nbsp;</th>
                <th scope="col">&nbsp;</th>
              </tr>
            </table></th>
            <th scope="col" background="Neuer Ordner (3)/Bilder/web4_05.png" width="42" height="30"></th>
            <th scope="col" background="Neuer Ordner (3)/Bilder/web4_03.png"><? include("counter.php"); ?></th>
            <th scope="col" width="2"><img src="Neuer Ordner (3)/Bilder/web4_07.png" width="2" height="30" /></th>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th scope="col" width="781"><img src="Neuer Ordner (4)/Bilder/web6_08.png" width="781" height="124" /></th>
            <th scope="col" width="419"><img src="Neuer Ordner (3)/Bilder/web4_09.png" width="419" height="124" /></th>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th scope="col" background="Neuer Ordner (4)/Bilder/web6_13.png" height="33"></th>
            <th width="700" height="33"><? include("navi.php"); ?></th>
            <th scope="col" width="383"><img src="Neuer Ordner (4)/Bilder/web6_19.png" width="383" height="33" /></th>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th scope="col" background="Neuer Ordner (4)/Bilder/web6_22.png" width="53"></th>
            <th scope="col" width="111"><img src="Neuer Ordner (4)/Bilder/web6_23.png" width="111" height="18" /></th>
            <th scope="col" background="Neuer Ordner (4)/Bilder/web6_22.png"></th>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="4"><img src="Neuer Ordner (4)/Bilder/web6_27.png" width="1200" height="4" /></td>
      </tr>
      <tr>
        <td width="1200" height="200" align="left" valign="top"  background="Neuer Ordner (4)/Bilder/web6_28.png"><table width="100%" border="0" cellspacing="0" cellpadding="0" valign="top">
          <tr>
            <th scope="col" width="10"></th>
            <th width="550" align="left" valign="top" scope="col">
              <p>
                <?
      if(!isset($site)) $site="news";
      //Sichheitsl&uuml;cke beheben
      $invalide = array('/','/\/',':','.');
      $site = str_replace($invalide,' ',$site);
      if(!file_exists($site.".php")) $site = "news";
      include($site.".php");
      ?>            
              </th>
      
      <th scope="col" width="15">&nbsp;</th>
            <th align="left"  valign="top" scope="col" ><table width="230" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <th scope="col" height="50">&nbsp;</th>
              </tr>
              <tr>
                <td><? include("sc_headlines.php"); ?></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td><? include("sc_articles.php"); ?></td>
              </tr>
            </table></th>
            <th width="410" valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <th scope="col"><p>&nbsp;</p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p></th>
                <th scope="col"><p>&nbsp;</p>
                  </th>
                <th valign="top" scope="col"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <th scope="col" height="50">&nbsp;</th>
                  </tr>
                  <tr>
                    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <th scope="col" width="5">&nbsp;</th>
                        <th width="100" align="right" scope="col"><? include("shoutbox.php"); ?></th>
                        <th scope="col" width="5">&nbsp;</th>
                      </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                  </tr>
                </table></th>
              </tr>
            </table></th>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td><img src="Neuer Ordner (5)/Bilder/web7_30.png"></td>
    </tr>
   
</table>


<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
     <th scope="col" background="footer/Bilder/footer_32.png" height="85" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <th scope="col" width="50">&nbsp;</th>
         <th valign="middle" scope="col"><font color="#FFFFFF">Design und Content sind geistiges Eigentum von <a href="http://www.gewclan.com"><font color="#FFFFFF">www.gewclan.com</font></a>, sofern nicht ausdr&uuml;cklich angegeben.<br> 
           Verwendungen von Text ist nur mit entsprechendem Vermerk und Zustimmung zul&auml;ssig.</font>
           <font color="#FFFFFF"> <br>
           Design darf nicht ohne Zustimmung von Lars G&ouml;risch genutzt oder verbreitet werden.</font></th>
         <th scope="col" width="50">&nbsp;</th>
       </tr>
     </table></th>
  </tr>
</table>








</body>
</html>
 
Zuletzt bearbeitet:
Vielleicht solltest du als erste Gegenmaßnahme die voreingestellten Polsterungseigenschaften des ul-Elements auf null zurücksetzen, denn wie es scheint, rücken die Listeneinträge (li) entsprechend nach rechts ein, womit die vorgegebene Breite der Zelle nicht mehr ausreicht.

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück