HTML Dropdown-Menü an spezifischem Code

Steelnight · 8. Januar 2013

Hallo liebe Computerbasegemeinde

!
Ich versuche im Moment mir selbst HTML beizubringen und anzuwenden, habe verschiedene Tutorials geguckt, viel gelesen und so weiter. Zur Zeit experimentiere ich mit einer Webseiten-Vorlage und würde gern ein Dropdown-Menü mit ungefähr 4 Untermenüs erstellen. Ich habe auch ein Tutorial, dieses hier, dazu angesehen, jedoch habe ich noch nicht wirklich verstanden wie ich das in den bestehenden CSS-Code einfüge. Könnt ihr mir freundlicherweise weiterhelfen ?

CSS-Zeilen zur Navigationbar

#navlist{
margin-left: 0px;
padding-left: 0px;
white-space: nowrap;
position: absolute;
height: 26px;
width: 1000px;
top: 225px;
background: url(images/menubg.jpg) repeat-x top left;
font-family: Arial;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
}

#navlist li{
display: inline;
list-style-type: none;
}

#navlist li a {
padding: 0px 0px;
/*background-image: url(images/button.gif);*/
height: 20px;
width: 10px;
display: inline;
position: absolute;
text-align: center;
color: #fff;
text-decoration: none;
margin-top: 6px;
}

#navlist li a span{
padding: 0px 0px;
/*background-image: url(images/button.gif);*/
height: 20px;
width: 20px;
display: inline;
position: absolute;
text-align: center;
color: #fff;
text-decoration: none;
margin-top: -3px;
}

Vielen Dank im Vorraus

!

Kausalat · 8. Januar 2013

~~Dies ist kein HTML-, sondern CSS-Code.~~ Bezeichnungsfehler mittlerweile korrigiert.

Diesen CSS-Code fügst du einfach in dein bestehendes CSS-Stylesheet ein. Am besten wäre es, wenn du mal die Adresse zu deiner Seite angeben würdest.

Steelnight · 8. Januar 2013

Kausalat schrieb:
~~Dies ist kein HTML-, sondern CSS-Code.~~ Bezeichnungsfehler mittlerweile korrigiert.

Diesen CSS-Code fügst du einfach in dein bestehendes CSS-Stylesheet ein. Am besten wäre es, wenn du mal die Adresse zu deiner Seite angeben würdest.

Ich entschuldige mich für diesen Fehler

!

Das was ich als Zitat gelistet habe ist mein jetziger Css-Code für die Navigationsbar und ich hab es nicht hinbekommen ein dropdown-Menü einzufügen.

Welche Adresse meinst du ?

Send from my GT-i9001

Kausalat · 8. Januar 2013

Ersetze "Adresse" gegen "vollständigen HTML-Quelltext". Bis dahin weißt nur du, wie dein jetziges Menü aufgebaut ist. Das ist nicht gerade ideal, um dir helfen zu können.

Bist du schon einmal auf die Idee gekommen, einfach mal den HTML-Menüaufbau aus der SelfHTML-Vorlage in dein Projekt hineinzukopieren?

Steelnight · 8. Januar 2013

HTML-Code

<!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>Free Website Templates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="central">
<div id="header">
<div class="sitename"></div>
</div>
<ul id="navlist">
<li><a id="n1" href="http://www.freewebsitetemplates.com"><span>HOME</span></a></li>
<li><a id="n2" href="http://www.freewebsitetemplates.com"><span>Infos für Schüler</span></a></li>
<ul>
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
</ul>
<li><a id="n3" href="http://www.freewebsitetemplates.com"><span>Infos für Besucher</span></a></li>
<li><a id="n4" href="http://www.freewebsitetemplates.com"><span>Internes</span></a></li>
<li><a id="n5" href="http://www.freewebsitetemplates.com"><span>Höhepunkte</span></a></li>
<li><a id="n6" href="http://www.freewebsitetemplates.com"><span>Kontakt</span></a></li>
<li><a id="n7" href="http://www.freewebsitetemplates.com"><span>Impressum</span></a></li>
</ul>
<div id="content">
<div id="leftside">
<div id="picture1"></div>

<div id="picture2"></div>
</div>
<div id="rightside">
<h1>Bike Riders News</h1>
<p>
This is a template designed by <strong><a href="http://www.freewebsitetemplates.com">free website templates</a></strong> for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help <a href="http://www.freewebsitetemplates.com/forum/">on the forum</a>. You will get help as soon as possible. You can also use the forum to tell t you like or dislike and what you would like to see more. Your feedback is very important to us and we will do everything to fulfil your wishes. <a href="http://www.freewebsitetemplates.com">m</a></p>
<h1>Bike Rids New10</h1>
<p>
This is a template designed by <strong><a href="http://www.freewebsitetemplates.com">free website templates</a></strong> for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help <a href="http://www.freewebsitetemplates.com/forum/">on the forum</a>. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. Your feedback is very important to us and we will do everything to fulfil your wishes. <a href="http://www.freewebsitetemplates.com">more ...</a>
</p>
<h1>Bike Riders News</h1>
<p>
This is a temte designed by <strong><a href="http://www.freewebsitetemplates.com">free website templates</a></strong> for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help <a href="http://www.freewebsitetemplates.com/forum/">on the forum</a>. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. Your feedback is very important to us and we will do everything to fulfil your wishes. <a href="http://www.freewebsitetemplates.com">more ...</a></p>
</div>
<div id="footer"></div>
</div>
<div id="imagepreloader"><img src="images/buttonover.gif" alt="mouseover" /></div>
</div>
</body>
</html>

Nicht wundern, ich arbeite im Moment nur an der Hauptseite, damit ich experimentieren kann

.

CSS-Code Vollständig

* {margin:0px;padding:0px;top:0px;left:0px;}
body{
text-align: center;
background-color: #666666;
}
#central{
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
width: 1000px;
text-align: left;
background-color: #FFFFFF;
}
#header{
background-image: url(images/header.jpg);
height: 226px;
width: 1000px;
left: 0px;
top: 0px;
}
#header a{
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
/*margin-left: 112px;*/
/*font-family: "Courier New", Courier, mono;*/
/*margin-top: 35px;*/
font-family: Verdana;
position: relative;
left: 98px;
top: 154px;
}

.sitename {
text-align: center;
width: 109px;
}

#navlist{
margin-left: 0px;
padding-left: 0px;
white-space: nowrap;
position: absolute;
height: 26px;
width: 1000px;
top: 225px;
background: url(images/menubg.jpg) repeat-x top left;
font-family: Arial;
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
}

#navlist li{
display: inline;
list-style-type: none;
}

#navlist li a {
padding: 0px 0px;
/*background-image: url(images/button.gif);*/
height: 20px;
width: 10px;
display: inline;
position: absolute;
text-align: center;
color: #fff;
text-decoration: none;
margin-top: 6px;
}

#navlist li a span{
padding: 0px 0px;
/*background-image: url(images/button.gif);*/
height: 20px;
width: 20px;
display: inline;
position: absolute;
text-align: center;
color: #fff;
text-decoration: none;
margin-top: -3px;
}

/*#navlist a:hover{background-image: url(images/buttonover.gif); height: 17px; width: 97px;}*/
#n1{left: 30px;}
#n2{left: 125px;}
#n3{left: 300px;}
#n4{left: 500px;}
#n5{left: 620px;}
#n6{left: 750px;}
#n7{left: 858px;}
#leftside{
float: left;
}
#leftside h3{
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 0px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00306f;
border-right-color: #00306f;
border-bottom-color: #00306f;
border-left-color: #00306f;
width:200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333333;
background-color: #FFFFFF;
text-align: center;
display: block;
margin-left: 35px;
margin-top: 35px;
}
#content{
margin-top: 252px;
position: absolute;
width: 1000px;
background-color: #FFFFFF;
}
#picture1{
margin-left: 35px;
height: 200px;
width: 300px;
background-image: url(images/photoofthemonth.jpg);
margin-top: 60px;
}
#picture2{
margin-left: 35px;
height: 200px;
width: 300px;
background-image: url(images/bikeofthemonth.jpg);
margin-top: 60px;
}
#footer{
clear: both;
background-color: #FFFFFF;
position: relative;
height: 122px;
width: 1000px;
background-image: url(images/unten.jpg);
background-repeat: no-repeat;
}
#rightside{
float: center;
width: 460px;
background-color: #FFFFFF;
margin-right: 15px;
margin-left: 15px;
margin-top: 20px;
overflow: hidden;
}
#rightside p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
margin-left: 0px;
margin-bottom: 20px;
width: 460px;
}
#rightside h1{
margin: 10px 0px 10px 0px;
width: 300px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #033387;
}
#rightside span{
margin-top: 10px;
margin-bottom: 4px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #649721;
}
#rightside a{color: #666666;}
#footer p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
float: right;
padding-top: 98px;
margin-right: 10px;
}
#footer a{color: #fff;}
#footer a:hover{color: #fff;}
#imagepreloader{
visibility: hidden;
overflow: hidden;
height: 0px;
width: 0px;
}

Nein, bin ich noch nicht wirklich

Daaron · 8. Januar 2013

Ich kürz das mal ab, ohne mir den gesamten größtenteils irrelevanten Code anzugucken. Eine vernünftige Suckerfish-Navigation hat grob folgenden HTML-Aufbau für 3 Level:

HTML:

<ul class="level_1">
 <li>Punkt 1</li>
 <li>Punkt 2
  <ul class="level_2">
    <li>Punkt 2.1</li>
    <li>Punkt 2.2</li>
    <li>Punkt 2.3
      <ul class="level_3">
        <li>Punkt 3.1</li>
      </ul>
    </li>
  </ul>
   </li>
 <li>Punkt 3</li>
</ul>

Und was den CSS-Part angeht:

Code:

ul,li {overflow: visible;}
ul {margin: 0; padding:0; position: relative;}
li {display: inline-block; position: relative; height:20px; list-style-type: none;}

ul.level_1 {height: 20px;}
li li {display: block;}
ul ul{display: none;}
li:hover > ul {display: block;}

ul.level_2 
{
 width: 200px;
 position: absolute; 
 top: 20px;
}

ul.level_3
{
 position: absolute;
 left: 200px;
}

Ne grobe Schätzung, die funktionieren sollte. Wer Bugs findet darf sie behalten.

Suche

HTML Dropdown-Menü an spezifischem Code

Steelnight

Lt. Junior Grade

Kausalat

Gast

Steelnight

Lt. Junior Grade

Kausalat

Gast

Steelnight

Lt. Junior Grade

Daaron

Fleet Admiral

Ähnliche Themen