Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[GELÖST] Update! DropDownmenu will nicht funktionieren! Update!
#1
Question 
Hallo Forum,

hier ein kleines Update.
Ich habe es hinbekommen das die Untermenüs nicht mehr wild erscheinen sondern immer rechts von den gewählten Button.
Ich schaffe es nicht das diese nach unten aufpoppen.
Kann evtl. jemand helfen?
Ich habe die Codes aktualisiert.
Falls ihr mehr braucht kann ich mehr senden!

mfg
Markus


Hallo Forum,

ich bin ganz neu hier und brauche dringend Hilfe!
Ich habe für unseren Sportschützenverein eine neue Seite erstellt!
Ich habe dafür aus dem Internet eine sehr gut aussehende Vorlage mit CSS benutzt.
Ich komme aber leider mit den Dropdownmenu nicht weiter.
Das CSS ist für mein können etwas zu komplex.
Ich bekomme es nicht hin das das Untermenu so wie es sich gehört nach unten aufpoppt.
Es erscheint einfach auf der Seite.
Wäre einer von euch so nett und würde sich das mal anschauen?
Ich kann die Index.html und Default.css per Mail zusenden.

mfg
Markus

Ich versuch mal einen Ausschnitt zu Posten!

Erst einmal aus der index.html

Code:
<!-- start header -->


<div id="header">
<div id="logo">
<img src="Daten/wappenbsvholthausen.jpg" alt="" width="158" height="138" />
<h1>&nbsp;</h1>
BSV Holthausen 1857 e.V.</div>
<div id="menu-bg">
<div id="menu">
<ul id="main">
<li class="current_page_item"><a href="#">Homepage</a></li>
<li><a href="Vorstand.html">Vorstand</a></li>
<li><a href="#">Königshaus</a>
<ul id="drop">
<a href="Koenigspaar2013.html"><li class="koenigshaus2013">Königshaus 2013</li></a>
<a href="#"><li class="koenigspaar">Königspaar</li></a>
</ul></li>
<li><a href="#">Termine</a></li>
<li><a href="#">Vereinsheim</a></li>
</ul>
<ul id="feed">
<li><a href="#">Test</a></li>
<li><a href="Haftungsausschluss.html">Haftungsauschluss</a><a href="Mitglieder.html">Mitgliederwerbung</a></li>
</ul>
</div>
</div>
</div>
<!-- end header -->
Dazu das Default.css
Code:
body {

 margin: 0;
 padding: 0;
 background: #191E1A;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 color: #FCFFFD;
}
h1, h2, h3 {
 margin-top: 0;
 color: #6E6C00;
}
h1 {
 font-size: 2em;
}
h2 {
 font-size: 1.6em;
}
h3 {
 font-size: 1em;
}
ul {
}
a {
 text-decoration: none;
 color: #FFFFFF;
}
a:hover {
 border-bottom: none;
}
a img {
 border: none;
}
img.left {
 float: left;
 margin: 0 20px 0 0;
}
img.right {
 float: right;
 margin: 0 0 0 20px;
}
/* Header */
#header {
 width: 100%;
 height: 210px;
}
#logo {
 width: 1000px;
 height: 150px;
 margin: 0 auto;
 padding: 0 10px;
}
#logo h1, #logo p {
 float: left;
 margin: 0;
 color: #FFFFFF;
}
#logo h1 {
 padding: 80px 0 0 0;
 text-transform: lowercase;
 font-weight: normal;
 font-size: 3em;
}
#logo p {
 text-transform: uppercase;
 padding: 102px 0 0 3px;
 font-size: 10px;
 color: #FFFFFF;
}
#logo a {
 border: none;
 text-decoration: none;
 color: #FFFFFF;
}
/* Menu */
#menu-bg {
 background: #1E3227;
 height: 45px;
}
#menu {
 width: 1000px;
 margin: 0 auto;
}
#menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
#menu li {
 display: inline;
}
#menu a {
 display: block;
 float: left;
 margin: 0 3px 0 0;
 padding: 12px 15px 10px 15px;
 border: none;
 text-decoration: none;
 text-transform: uppercase;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #DDBB04;
}
#menu a:hover {
 margin: 0 3px 0 0;
 background: #191E1A;
 border-bottom: 3px solid #DDBB04;
 color: #FFFFFF;
}
#menu .current_page_item a {
 background: none;
 margin: 0 3px 0 0;
 background: #191E1A;
 border-bottom: 3px solid #DDBB04;
 color: #FFFFFF;
}
/* Drop-Down Navigation */
ul#main li ul.drop:
{display:
}
ul#main li ul.drop:
{
 display: none;
 float: left;
 margin: 0 3px 0 0;
 padding: 12px 15px 10px 15px;
 border: none;
 text-decoration: none;
 text-transform: uppercase;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #DDBB04;
}
ul#main li>ul
{
 display:none
}
ul#main li:hover>ul
{
 display:block
}
/* Wrapper */
#wrapper {
}
/* Page */
#page {
 width: 1000px;
 margin: 0 auto;
 padding: 30px 0;
}
#page-bg {
 padding: 11px 24px;
}
/* Latest Post */
#latest-post {
 border: 1px dashed #8D8D8D;
}
/* Content */
#content {
 float: left;
 width: 498px;
 padding-right: 20px;
}
.post {
 margin-bottom: 20px;
 padding-bottom: 15px;
 line-height: 200%;
}
.post h1 {
 font-weight: normal;
 font-size: 30px;
}
.post h2 {
 font-size: 24px;
}
.title {
 margin: 0;
 padding: 15px 0px 0px 0px;
 font-weight: normal;
}
.title a {
 border-bottom: none;
}
.title a:hover {
 color: #FBD900;
}
.byline {
 margin: 0 0px 20px 0px;
 text-transform: uppercase;
}
.entry {
 padding: 0px 0px;
}
.links {
 font-size: 11px;
}
.links a {
 display: block;
 border: none;
 color: #FFFFFF;
}
.links a:hover {
}
.links .more {
 float: right;
 text-transform: uppercase;
}
.links .comments {
 float: left;
 padding-left: 20px;
}
/* Sidebars */
#sidebar1 {
 padding-right: 20px;
}
.sidebar {
 float: left;
 width: 200px;
 padding: 0 0 0 21px;
}
.sidebar ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.sidebar li {
 padding: 0 0 20px 0;
}
.sidebar li ul {
 padding: 0px 15px;
}
.sidebar li li {
 padding: 8px 0 8px 0px;
 background: url(images/img01.jpg) repeat-x left bottom;
}
.sidebar li li a:hover {
 color: #FBD900;
}
.sidebar li h2 {
 margin: 0 0 10px 0;
 padding: 10px 15px 10px 15px;
 background: #1E3227;
 font-size: 16px;
 font-weight: normal;
 color: #FFFFFF;
}
.sidebar p {
 padding: 0px 15px;
}
.sidebar a {
 color: #FBD900;
}
/* Search */
#searchform {
 margin: 0;
 padding: 20px 15px;
}
#searchform br {
 display: none;
}
#s {
 margin: 0;
 padding: 2px 2px;
 width: 165px;
 height: 18px;
 border: none;
 background: #FFFFFF;
 font-size: 10px;
 color: #000000;
}
#x {
 margin: 1px 0 0 0;
 padding: 2px 5px;
 height: 24px;
 border: none;
 background: #000000;
 text-decoration: none;
 text-transform: uppercase;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #FFFFFF;
}
/* Calendar */
#calendar_wrap {
 padding: 0;
 text-align: center;
}
#calendar_wrap table {
 width: 100%;
}
#calendar_wrap th {
}
#calendar_wrap td {
}
#calendar_wrap tfoot td {
 border: none;
}
#calendar_wrap tfoot td#prev {
 text-align: left;
 font-weight: bold;
 border: none;
}
#calendar_wrap tfoot td#prev a {
 border: none;
}
#calendar_wrap tfoot td#next {
 text-align: right;
 font-weight: bold;
 border: none;
}
#calendar_wrap tfoot td#next a {
 border: none;
}
/* Footer */
#footer {
 background-color: #0D170F;
 height: 50px;
}
#footer-content {
 width: 1000px;
 margin: 0px auto;
}
#footer p {
 margin: 0;
 padding: 20px 0 0 0;
 text-align: left;
 text-transform: uppercase;
 font-size: 10px;
 color: #FBD900;
}
#footer a {
 color: #FBD900;
}
Zitieren
#2
Hi,


das erste was ich sehe ist ein HTML-Syntaxfehler: die <a> Tags gehören in das <li> selbst.
Dann gab es ein paar falsche Selektoren, z.B.: drop ist eine ID und keine Klasse.

Ich habe dir den Code etwas umgeschrieben:

Code:
     #menu {
       width: 1000px;
       margin: 0 auto;
     }

     #menu ul {
       margin: 0;
       padding: 0;
       list-style: none;
     }

     #menu li {
       position: relative;
       display: inline-block;
     }

     #menu a {
       display: block;
       margin: 0 3px 0 0;
       padding: 12px 15px 10px 15px;
       border: none;
       text-decoration: none;
       text-transform: uppercase;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 11px;
       color: #DDBB04;
     }

     #menu a:hover {
       margin: 0 3px 0 0;
       background: #191E1A;
       border-bottom: 3px solid #DDBB04;
       color: #FFFFFF;
     }

     #menu .current_page_item a {
       background: none;
       margin: 0 3px 0 0;
       background: #191E1A;
       border-bottom: 3px solid #DDBB04;
       color: #FFFFFF;
     }

     /* Drop-Down Navigation */
     #main #drop {
       display: none;
       position: absolute;
       top: 34px;
       left: 0;
       min-width: 190px;
       background-color: #1E3227;
       border: none;
       text-decoration: none;
       text-transform: uppercase;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 11px;
       color: #DDBB04;
     }

     #main #drop li {
       display: block;
     }

     #main #drop a {
       display: block;
       margin: 0;
     }

     #main li:hover #drop {
       display: block;
     }


Code:
<div id="header">
 <div id="logo">
   <img src="Daten/wappenbsvholthausen.jpg" alt="" width="158" height="138" />
   <h1>&nbsp;</h1>
   BSV Holthausen 1857 e.V.
 </div>
 <div id="menu-bg">
   <div id="menu">
     <ul id="main">
       <li class="current_page_item">
         <a href="#">Homepage</a>
       </li>
       <li>
         <a href="Vorstand.html">Vorstand</a>
       </li>
       <li>
         <a href="#">Königshaus</a>
         <ul id="drop">
           <li class="koenigshaus2013">
             <a href="Koenigspaar2013.html">Königshaus 2013 ></a>
           </li>
           <li class="koenigspaar">
             <a href="#">Königspaar></a>
           </li>
         </ul>
       </li>
       <li>
         <a href="#">Termine</a>
       </li>
       <li>
         <a href="#">Vereinsheim</a>
       </li>
     </ul>
   </div>
 </div>
</div>
Grüßle, Nicki

NIMIUS | Agentur für Kommunikation
Webdesign und Webentwicklung aus Staufen im Breisgau
Website | Twitter

TYPO3 Education Committee Member
Neu in TYPO3? Kein Problem! Hier geht's zum TYPO3 Mentoren Programm
Zitieren
#3
Hallo und danke für die Antwort.

Leider bleibt alles beim alten.
Wenn ich über das Icon, welches das Dropdown sein soll, fahre geht das Menü nach links auf und nicht nach unten.
Soll ich mal die komplette index und css Datei zumailen?
Sind ja nur ein paar Bytes.

mfg
Markus aus NRW/Kamen
Zitieren
#4
Guten Morgen,

vielleicht scribblest du mal auf wie es ausschauen soll. Momentan sieht es mit meinem QC so aus:


Angehängte Dateien Thumbnail(s)
   
Grüßle, Nicki

NIMIUS | Agentur für Kommunikation
Webdesign und Webentwicklung aus Staufen im Breisgau
Website | Twitter

TYPO3 Education Committee Member
Neu in TYPO3? Kein Problem! Hier geht's zum TYPO3 Mentoren Programm
Zitieren
#5
Hi und danke für die Antwort, 

genau so soll es aussehen. 
Macht es aber leider nicht. 
Ich habe wohl noch einen anderen Fehler. 
Kann ich dir die Index und css per Mail zusenden? 
Wäre echt super. 

Danke 
Markus 
Zitieren
#6
Hallo Markus,

schau' mal, hier ist der Quellcode noch einmal im Fiddle: http://jsfiddle.net/querz7m0/
Wenn du ihn so übernimmst, wird er funktionieren.
Grüßle, Nicki

NIMIUS | Agentur für Kommunikation
Webdesign und Webentwicklung aus Staufen im Breisgau
Website | Twitter

TYPO3 Education Committee Member
Neu in TYPO3? Kein Problem! Hier geht's zum TYPO3 Mentoren Programm
Zitieren
#7
Hi und danke. 

Ich gucke mir das gleich noch an.
Vielen Dank für die tolle Hilfe. 

Mfg 
Markus 
Zitieren
#8
(02.03.2015, 17:34)nimius schrieb: Hallo Markus,

schau' mal, hier ist der Quellcode noch einmal im Fiddle: http://jsfiddle.net/querz7m0/
Wenn du ihn so übernimmst, wird er funktionieren.

Super und danke!

Jetzt klappt es :-)

Danke für die tolle Hilfe.

mfg
Markus
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste