• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bereits bestehendes Menü nachträglich in Listen eintragen.

B

bobomampf

Mitglied
Hey,
ich habe im Menü diesen Quellcode
HTML: 
<div id="div_header_menu_navi"> 
				<!--<div class="div_menu_cut"></div>--> 
				<div class="div_menu"><a href="People.html"> 
				<img src="Menu1.png" width="160" height="72" alt="Portfolio" title="Portfolio" />					
				</a></div>			
				<!--<div class="div_menu_cut"></div>--> 
				<div class="div_menu"><a href="Vita.html"> 
				<img src="Menu2.png" width="160" height="72" alt="Lebenslauf" title="Lebenslauf" />	
				</a></div> 
				<!--<div class="div_menu_cut"></div>--> 
				<div class="div_menu"><a href="About.html"> 
					<img src="Menu3.png" width="160" height="72" alt="Über Stefan Binder - Fotograf aus Ravensburg" title="About me" />	
				</a></div> 
				<!--<div class="div_menu_cut"></div>--> 
				<div class="div_menu"><a href="Contact.html"> 
					<img src="Menu4.png" width="160" height="72" alt="Kontaktformular" title="Kontaktformular" />	
				</a></div> 
				<!--<div class="div_menu_cut"></div>--> 
                <div class="div_menu_news"><a href="News.html"> 
					<img src="Menu_Neu.png" width="106" height="72" alt="aktuelles" title="aktuelles" /> 
         		</a></div>

Die Homepage ist Stefan Binder - Fotograf aus Baienfurt bei Ravensburg

Dieses Menü würde ich jetzt aber gerne in Listen machen und es sollte genau gleich dargestellt werden. Also nur im Quellcode sollte diese Änderung sein. Wenn ich das mache verschieben sich aber immer alle Menüpunkte und es kommen Aufzählungszeichen (Punkte) vor jedes Menü.

Wer kann mir helfen? ;heart
 
Möglich ist das auf jeden Fall, und auch wünschenswert. Woran scheitert denn dein bisheriger Versuch?
 
Davor und dahinter? Also um die Menülinks herum und <div class="div_menu"> / </div> ersetzend? Das wäre vom HTML her schon genau der richtige Weg. Was für Probleme gibt es dann?
 
Du kannst mit CSS die Aufzählungspunkte deaktivieren (list-style-type: none; ). Du musst natürlich auch noch andere CSS-Anweisungen vornehmen. Wahrscheinlich float, padding, margin,...
 
HTML: 
<ul><div id="div_header_menu_navi"> 
				<!--<div class="div_menu_cut"></div>--> 
				<li><div class="div_menu"><a href="People.html"> 
				<img src="Menu1.png" width="160" height="72" alt="Portfolio" title="Portfolio" />					
				</a></div></li>			
				<!--<div class="div_menu_cut"></div>--> 
				<li><div class="div_menu"><a href="Vita.html"> 
				<img src="Menu2.png" width="160" height="72" alt="Lebenslauf" title="Lebenslauf" />	
				</a></div></li> 
				</ul>
</div>
Also bei mir sah das dann so aus. Ist das richtig oder muss ich das anders machen. Das mit dem Css könnte ich auch einmal versuchen.
 
Code: 
<style type="text/css">

#div_header_menu_navi{
  margin:0px;
  padding:0px;}

#div_header_menu_navi li{
  list-style:none;
  background: no-repeat;
  float:left;}

#people{background:url(Menu1.png);}
#vita{background:url(Menu2.png);}
#about{background:url(Menu3.png);}
#contact{background:url(Menu4.png);}
#news{background:url(Menu5.png);}

</style>

<ul id="div_header_menu_navi">
<li id="people"><a href="People.html"></a></li>
<li id="vita"><a href="Vita.html"></a></li>
<li id="about"><a href="About.html"></a></li>
<li id="contact"><a href="Contact.html"></a></li>
<li id="news"><a href="News.html"></a></li>
</ul>
Nicht getestet, aber sollte funktionieren ;)

LG Harald Lesan
 
Super hat perfekt geklappt. Hab nur ein wenig was anders gemacht. Aber ohne dich wär ich nicht drauf gekommen. Danke :)

Aber ich mache irgendetwas falsch. Das ist der Quelltext von meiner Portfolioseite.

HTML: 
<!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> 
<title>Stefan Binder - Portfolio People</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="description" content="Stefan Binder's Fotohomepage - In der Galerie People, befinden sich Portraits und Ganzkörperaufnahmen."/>
<meta name="keywords" content="Stefan Binder,Fotografieren,Menschen"/>
<meta http-equiv="content-language" content="de"/>
<meta name="robots" content="index, follow"/>
<meta name="revisit-after" content="10 days"/>
<meta name="author" content="Stefan Binder"/> 
<link href="main.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" media="print" href="druck.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head> 
 
 
<body> 
	<div id="div_header"> 
		<div id="div_header_menu"> 
			<div id="div_header_logo"><a href="index.html"><img src="Stefan Binder.png" width="230" height="72" alt="Stefan Binder" title="Startseite" /></a></div> 
			    <ul id="div_header_menu_navi">
				<li id="people"><a href="People.html"><img src="Menu1_Aktiv.png" width="160" height="72" alt="Portfolio" title="Portfolio" /></a></li>
				<li id="vita"><a href="Vita.html"><img src="Menu2.png" width="160" height="72" alt="Lebenslauf" title="Lebenslauf" /></a></li>
				<li id="about"><a href="About.html"><img src="Menu3.png" width="160" height="72" alt="Über mich" title="About me" /></a></li>
				<li id="contact"><a href="Contact.html"><img src="Menu4.png" width="160" height="72" alt="Kontaktformular" title="Kontaktformular" /></a></li>
				<li id="news"><a href="News.html"><img src="Menu_Neu.png" width="106" height="72" alt="aktuelles" title="aktuelles" /></a></li>
                </ul>
			</div> 
		</div> 
                
    <ul id="div_submenu">
<div id="div_submenu_container"><div class="div_submenu_menu">
<li><a href="other.html"><img src="Submenu3.png" width="100" height="42" alt="sonstiges" title="sonstiges" /></a></li></div><div class="div_submenu_menu"><li><a href="composings.html"><img src="Submenu2.png" width="100" height="42" alt="Composings" title="Composings" /></a></li></div><div class="div_submenu_menu"><li><a href="People.html"><img src="Submenu1aktiv.png" width="100" height="42" alt="Menschen" title="Menschen" /></a></li></div></div></ul> 

<div id="description">
    <h1><a>Stefan Binder - People Galerie - sie wollen ein kostenloses Shooting?</a></h1>
  </div>

<div id="div_main_content">
  <center>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="720" height="540" id="FlashID" title="">
      <param name="movie" value="People.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="People.swf" width="720" height="540">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
        <div>
          Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </center>
</div>    
<ul id="bottom">
  <h2><li><a href="Sitemap.html">Stefan Binder &copy; 2010</a></li></h2>
</ul>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://stefan-fotografiert.de/Piwik/" : "http://stefan-fotografiert.de/Piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script>
</body>
</html>

Da hat es auch noch Untermenüs. Und plötzlich ist meine Seite nicht mehr Xhtml Valide. Da kommt dann so ne Fehlermeldung.

Code: 
The element 'ul' in namespace 'http://www.w3.org/1999/xhtml' has invalid child element 'div' in namespace 'http://www.w3.org/1999/xhtml'. List of possible elements expected: 'li' in namespace 'http://www.w3.org/1999/xhtml'.

und:
Code: 
The element 'ul' in namespace 'http://www.w3.org/1999/xhtml' has invalid child element 'h2' in namespace 'http://www.w3.org/1999/xhtml'. List of possible elements expected: 'li' in namespace 'http://www.w3.org/1999/xhtml'.

Beide Fehler kommen in den neuen Listen.

Einmal ganz unten und einmal am Anfang des Menüs. :roll::roll::roll:
 
Zuletzt bearbeitet:
HTML: 
<ul id="div_submenu">
<div id="div_submenu_container"><div class="div_submenu_menu">
<li>
fällt dir mit deinen neuen Erkenntnissen etwas auf?
 
Zwischen <ul> und <li> darf nichts vorkommen. Auch kein <div>. Also entfern das. Genau wie es der Validator auch sagt.
 
Ok. Das verstehe ich. Aber wenn ich es in Dreamweaver einfach so rauslösche und dann auf Livevorschau gehe. Dann sind zwei Menübilder rechts und eins ist ganz links. Also muss ich da doch irgendwas ändern. Aber mir erschließt sich nicht was? :/
 
Du musst genau wie bei dem ersten Menü den HTML-Code anpassen

Code: 
<ul>
<li><a href="#">bla</a></li>
<li><a href="#">blubb</a></li>
</ul>

und diesen dann per CSS deinen Wünschen anpassen. Vermutlich hast Du letzteres bisher nicht getan. Welches deine Wünsche sind kann ich jedoch nicht erraten. Schau dir die CSS-Eigenschaften an um zu erkennen, welche Du benötigt. Bei diesen Listen braucht man meist margin, padding, list-style etc.
 
Das weiss ich. Das Problem ist nur, dass ich bei dem Code nicht einfach die Div vor den Ul tag machen kann, da sich dann alles verändert und nicht mehr stimmt.
Kannst du mir das vielleicht schnell so hinwursteln wie du dir das gedacht hast? Denn wenn ich jetzt die zwei Divs zwischen ul und li einfach rauslösch bzw. nach ausen verschiebe ändert das das ganze Menü und es sieht nicht mehr gleich aus.

HTML: 
    <ul id="div_submenu">
<div id="div_submenu_container"><div class="div_submenu_menu">
<li><a href="other.html"><img src="Submenu3.png" width="100" height="42" alt="sonstiges" title="sonstiges" /></a></li></div><div class="div_submenu_menu"><li><a href="composings.html"><img src="Submenu2.png" width="100" height="42" alt="Composings" title="Composings" /></a></li></div><div class="div_submenu_menu"><li><a href="People.html"><img src="Submenu1aktiv.png" width="100" height="42" alt="Menschen" title="Menschen" /></a></li></div></div></ul>
 
Das geht einfach net :( Wenn ich das mach dann verschiebts das ganze Menü und alles ist durcheinander. Das muss ich irgendwie anders machen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben