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

HTML 5 und CSS 3 Dokument

Status
Für weitere Antworten geschlossen.
C

cubebox30

Neues Mitglied
Hallo Leute,

ich möchte meine Homepage auf HTML 5 und CSS 3 umstellen. Jedoch habe ich beim Navigationsmenü einige Probleme. Denn ich möchte ein Dropdown-Menü erstellen wie hier: How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery | Nettuts+. Jedoch sieht das ganze bei mir so aus: CubeBox 30. Und das nervt mich gerade voll an.

Hat jemand einen Plan, warum das nicht klappt?


Ich habe hier einmal den HTML-Code der Hauptseite:
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CubeBox 30</title>
<link href="style.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery.js"></script>  
        <script src="js/modernizr.js"></script>  
</head>
<body>
<!--header start -->
<div id="header">
<nav id="topNav">  
                <ul>  
                    <li><a href="#" title="Nav Link 1">Nav Link 1</a></li>  
                <li>  
                    <a href="#" title="Nav Link 1">Nav Link 2  
                    <ul>  
                        <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>  
                        <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>  
                        <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>  
                        <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>  
                        <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>  
                    </ul>  
                </li>  
                <li><a href="#" title="Nav Link 1">Nav Link 3</a></li>  
                <li><a href="#" title="Nav Link 1">Nav Link 4</a></li>  
                <li><a href="#" title="Nav Link 1">Nav Link 5</a></li>  
            </ul>  
        </nav>  

<a href="index.html"><img src="images/logo.gif" alt="jet 30" width="249" height="72" border="0" class="logo" /></a>
<h1>Wir unterscheiden uns von anderen</h1>
<p>Wir bringen Ihnen etwas bei. <span class="txt1">Kostenlos.</span> Ohne Risiko</p>
<img src="images/top_icon.gif" alt="jet 30 says" width="174" height="80" class="icon" />
<p class="topText">Die Wissenshomepage zum Thema Webdesign, Programmierung und Grafikdesign. Wir wissen, was Sie wissen wollen</span></p>
<a href="readmore.html" class="readMore"></a>
</div>
<!--header end -->
<!--body start -->
<div id="body">
<!--left panel start -->
<div id="left">
<!--left1 start -->
<div id="left1">
<p class="pic1"></p>
<p class="boxTxt1"><span>H&ouml;henflug</span><b>Sie wollen Informationen? Wir bieten Ihnen Infos aus verschiedesnten Perspektiven.</p>
<br class="spacer" />
</div>
<!--left1 end -->
<!--left2 start -->
<div id="left2">
<p class="pic2"></p>
<p class="boxTxt2"><span>Schnellstart</span><b>Warum warten, wenn man wissen jetzt auch so haben kann? Einfach und Schnell.</p>
<br class="spacer" />
</div>
<!--left2 end -->
<!--left3 start -->
<div id="left3">
<p class="pic3"></p>
<p class="boxTxt3"><span>Voll Ideen</span><b>Wir</b> entwickeln t&auml;glich neue Dinge, um Ihr wissen zu Erweitern oder Aufzufrischen.</p>
<!--left3 end -->
<br class="spacer" />
</div>
<!--left2 end -->
<br class="spacer" />
</div>
<!--left panel end -->
<!--right panel start -->
<div id="right">
<p class="rightTop"></p>
<h2>&Uuml;ber CubeBox 30</h2>
<p class="rightTxt1">CubeBox 30 ist eine <span>kostenlose</span> Wissensplattform mit verschiedensten Tutorials zum Thema Softwareentwicklung, Web- und Grafikdesign, Filmdreh und Filmschnitt, Fotographie und vieles mehr. Entdecken Sie unser Portal und sehen Sie sich die neuen Tutorials mal etwas genauer an.</p>
<p class="rightTxt2">Wir haben uns gefragt, was Sie wissen wollen. Und wir sind zum Ergebnis gekommen, dass Sie nicht nur irgendwelche Allgemeinen Infos ben&ouml;tigen, sondern spezifische L&ouml;sungen f&uuml;r vordefinierte F&auml;lle.
<br /><br /> <span>Alle Tutorials sind kostenlos Zug&auml;nglich</span> Trotzdem bitten wir Sie, diese Tutorials nicht unerlaubt zu kopieren und zu ver&ouml;ffentlichen. Falls Sie dies wollen, bitten wir Sie darum, einen Link zu unserer Homepage einzuf&uuml;gen.</p>
<p class="rightPic"></p>
<p class="rightBottom"></p>
<br class="spacer" />
</div>
<!--right panel end -->
<br class="spacer" />
</div>
<!--body end -->
<!--bodyBottom start -->
<div id="bodyBottom">
<!--news start -->
<div id="news">
<h2>Letzte News</h2>
<h3>29. M&auml;rz 2011</h3>
<p><span>Er&ouml;ffnung der Tutorial-Plattform</span>Die Er&ouml;ffnung dieser Plattform ist f&uuml;r uns nicht nur eine Premiere, sondern auch ein Projekt, dass wirklich alle gerne unterst&uuml,tzen wie auch nutzen wollen.</p>
<p><span>Neustart der Homepage</span>Nach langem warten, wieder die volle Power.</p>
<br class="spacer" />
</div>
<!--news end -->
<!--services start -->
<div id="service">
<h2>Das Team</h2>
<h3>Unsere Teammembers</h3>
<ul>
<li><a href="#">Markus M&ouml;rth</a></li>
</ul>
<br class="spacer" />
</div>
<!--services end -->
<!--member start -->
<!--member end -->
<div id="member">
  <h2>Wir im Netz!</h2>
  <form action="#" method="post" name="member_log_in" id="member_log_in">
    <label></label><a href="http://www.youtube.com/user/cubebox1" target="_blanc"><img src="images/youtube.png" /></a>
        <a href="http://feeds.feedburner.com/Cubebox30" target="_blanc"><img src="images/feedburner.png" /></a>    <br class="spacer" />
  </form>
  <br class="spacer" />
</div>
<br class="spacer" />
</div>
<!--bodyBottom end -->
<!--footer start -->
<div id="footer">
<ul>
	<li><a href="index.html ">Home</a>|</li>
	<li><a href="aboutus.html">&Uuml;ber Uns</a>|</li>
	<li><a href="tutorials.html">Tutorials</a>|</li>
	<li><a href="videos.html">Video-Trainings</a>|</li>
	<li><a href="downloads.html">Downloads</a>|</li>
	<li><a href="contest.html">Contest</a>|</li>
	<li><a href="imüressum.html">Impressum</a>|</li>
  </ul>
   <p class="copyright">2011 &copy; CubeBox 30. All rights reserved.</p>
   
   <a href="http://validator.w3.org/check?uri=referer" target="_blank" class="xht"></a>
	<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" class="cs"></a>
	<a href="index.html"><img src="images/bottom_logo.gif" alt="Jet 30" title="Jet 30" width="84" height="26" border="0" /></a>
	<p class="design"></p></div>
<!--footer end -->
</body>
</html>
 
Werbung:
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben