zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem: Dropdown-Menu gestalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.04.2013, 00:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2013
Beiträge: 2
CooKie_KO befindet sich auf einem aufstrebenden Ast
Standard Problem: Dropdown-Menu gestalten

Hallo liebe Community,

ich bin erst seit einigen Tagen in der Welt von html und css. Bin also absolut noch in der Lernphase, aber bastel parallel zu meinen Lernfortschritten schon an einer Seite rum. Bei meinem Dropdown-menu in der Navigation bin ich aber jetzt auf Probleme gestoßen, zu denen ich keine Lösungen finde. Ich freue mich auch auf eine einzelne Lösung für eins der Probleme, da ich keinen Kurs besuche, keinen Lehrer habe und somit im Internet step-by-step (auch von dir ) lerne.

Meine Probleme sind:

1. Die Unterpunkte des Dropdowns (Link1,2,3 und Link 1.1,1.2,2.1 etc) sollen nur gehovert werden, wenn man mit der Maus auf dem Link ist. Momentan endet das Linkfeld mit der Schrift, gehovert wird aber bis rechts an den Rand. Das heißt man kann rechts von der Schrift mit der Maus hover-effekt auslösen, aber man befindet sich nicht auf dem Link.

2. Es gelang mir nicht wirklich die momentan kleingeschriebenen, gelb markierten Untermenupunkte (Link 1.1,1.2, 2.1 etc) mit Befehlen anzusprechen. Wenn ich den Listpunkten eine ID gab, waren die Befehle an die ID wirkungslos, als Klasse konnte ich ihnen die kleinere Schrift und gelben Hintergrund geben, andere Befehle wie Padding, list-style-type und andere haben aber nicht funktioniert... Ich will im Endeffekt diese Unterpunkte einrücken, ihnen einen list-style-type geben, möglicherweise Schrifttyp ändern, und den Abstand nach oben verringern, damit sie klar als Unterpunkte zu Link1,2,3 erkennbar werden.

3. Abstand zwischen den Unterpunkten (1.1, 1.2 etc) verringern (siehe oben), damit die Liste nicht so ellenlang ist. Ich geh davon aus, dass man das mit margin-top hinkriegt, sobald man die Listenpunkte einzeln ansprechen kann (Problem 2.)

4. Wenn man auf die Übermenupunkte hovert, wird das Hoverfeld innerhalb 200ms geändert, das Dropdownmenu aber kommt sofort. Das soll auch innerhalb 200ms eingeblendet werden. Wenn ich den gleichen Befehl beim ul#navi_main li:hover>ul reinhab, hat es aber nichts geändert.

Ich hoffe ihr könnt mir weiterhelfen, entweder mit dem lösenden Gesamtcode (den kann ich lesen, nachvollziehen und davon lernen) oder mit verbaler Erklärung, dann aber bitte mit den einzelnen Codes. Denn nur "mache das und das dort" (rein verbal) wird mir möglicherweise nicht helfen, wenn ich nicht weiß wie "das und das" geht.

Freu mich schon auf hoffentlich hilfreiche Antworten.
Unten habe ich html und css kopiert.





HTML-Editor-File:

<nav id="navigation">
<ul id="navi_main">
<li class="Startseite"><a href="index.html">Startseite</a>
</li>
<li class="Inhalt"><a href="content.html">Inhalt</a>
<ul class="dropdown_navi">
<li><a href="#">Linkziel 1</a></li>
<li><a href="#">Linkziel 2</a></li>
<li><a href="#">Linkziel 3</a></li>
</ul>
</li>
<li class="Angebot"><a href="offer.html">Angebot</a>
<ul class="dropdown_navi">
<li><a href="#">Linkziel 1</a></li>
<li id="test" class="test"><a href="#">Linkziel 1.1</a></li>
<li id="test" class="test"><a href="#">Linkziel 1.2</a></li>
<li><a href="#">Linkziel 2</a></li>
<li id="test" class="test"><a href="#">Linkziel 2.1</a></li>
<li id="test" class="test"><a href="#">Linkziel 2.2</a></li>
<li id="test" class="test"><a href="#">Linkziel 2.3</a></li>
<li><a href="#">Linkziel 3</a></li>
<li id="test" class="test"><a href="#">Linkziel 3.1</a></li>
<li id="test" class="test"><a href="#">Linkziel 3.2</a></li>
</ul>
</li>
<li class="about"><a href="about.html">Über mich</a>
</li>
<li class="kontakt"><a href="contact.html">Kontakt</a>
</li>
</ul>
</nav>


CSS-File:

ul{
list-style-type: none;
}

ul#navi_main{
text-align: center;
font-weight: bold;
}

ul#navi_main a{
text-decoration: none;
color: black;
}

ul#navi_main a:hover{
text-decoration: none;
}

ul#navi_main li{
float: left;
position: relative;
list-style-type: none;
margin-top: 15px;
margin-left: 10px;
line-height: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}

ul#navi_main li.startseite{
width: 100px;
height: 30px;
}

ul#navi_main li.inhalt{
width: 100px;
height: 30px;
}

ul#navi_main li.angebot{
width: 100px;
height: 30px;
}

ul#navi_main li.about{
width: 100px;
height: 30px;
}

ul#navi_main li.kontakt{
width: 100px;
height: 30px;
}

ul#navi_main li.startseite:hover{
width: 100px;
height: 30px;
background: #BFBFBF;
border-radius: 10px;
box-shadow: 3px 3px 3px #000000;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}

ul#navi_main li.inhalt:hover{
width: 100px;
height: 30px;
background: #BFBFBF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 3px 3px 3px #000000;
}

ul#navi_main li.angebot:hover{
width: 100px;
height: 30px;
background: #BFBFBF;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 3px 3px 3px #000000;
}

ul#navi_main li.about:hover{
width: 100px;
height: 30px;
background: #BFBFBF;
border-radius: 10px;
box-shadow: 3px 3px 3px #000000;
}

ul#navi_main li.kontakt:hover{
width: 100px;
height: 30px;
background: #BFBFBF;
border-radius: 10px;
box-shadow: 3px 3px 3px #000000;
}

ul#navi_main li ul.dropdown_navi{
background: #BFBFBF;
position: absolute;
left: 0;
top: 30px;
width: 150px;
padding: 0px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 3px 3px 3px #000000;
}

ul#navi_main li ul li{
float: none;
text-align: left;
display: block;
padding: 0px;
height: 20px;
line-height: 20px;
}

ul#navi_main li ul li:hover{
float: none;
text-align: left;
display: block;
background: #EFEFEF;
padding: 0px;
}

ul#navi_main li>ul{
display: none;
}

ul#navi_main li:hover>ul{
display: block;
}

.test{
list-style-type: disc;
list-style-position: inside;
background: #FFFF00;
padding-left: 5px;
font-size: 10px;
color: #00FFDF;
}

#test{
list-style-type: disc;
list-style-position: inside;
background: #FFFF00;
padding-left: 5px;
font-size: 10px;
color: #00FFDF;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.04.2013, 08:42
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von CooKie_KO Beitrag anzeigen
ich bin erst seit einigen Tagen in der Welt von html und css. Bin also absolut noch in der Lernphase,
dann ist ein Dropdownmenü garantiert das Falsche, weil man dafür die basics verstanden haben sollte. Das ist in einigen Tagen nicht möglich.
Arbeite doch einmal Little Boxes durch, damit du die basics verstehst.

Zitat:
Zitat von CooKie_KO Beitrag anzeigen
Ich hoffe ihr könnt mir weiterhelfen, entweder mit dem lösenden Gesamtcode (den kann ich lesen, nachvollziehen und davon lernen) oder mit verbaler Erklärung, dann aber bitte mit den einzelnen Codes. Denn nur "mache das und das dort" (rein verbal) wird mir möglicherweise nicht helfen, wenn ich nicht weiß wie "das und das" geht.
Ein Forum bietet Hilfe zur Selbsthilfe, d.h. Hinweise zu einer Lösung die du dir dann selbst erarbeiten mußt.

Dein Code ist unvollständig. Es wird ein komplett lauffähiges Beispiel benötigt, oder noch besser ein Link zum Problem, damit man live rumprobieren kann. Niemand hat Zeit sich erst groß etwas zusammenzubasteln.

Die Abstände kommen vielleicht daher weil du keinen CSS-Prolog definiert hast.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.04.2013, 01:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.04.2013
Beiträge: 2
CooKie_KO befindet sich auf einem aufstrebenden Ast
Standard

Erstmal Danke für deine zwei Links. Bin der gleichen Meinung und werde bestimmt was lernen, wenn ich sie mir heute gründlich durchschaue.
Noch bin ich nicht dazu gekommen, allerdings bin ich auf etwas anderes gestoßen (andere Listenstruktur), habe damit rumprobiert und habe es tatsächlich hingekriegt alles so zu gestalten, wie ich es mir vorstelle.
Bis auf eine Ausnahme:

Wie kann ich den Obermenupunkt im gehoverten Zustand lassen, wenn ich mit der Maus den Obermenupunkt verlasse und ins Dropdownmenu runterwandere?

Zitat:
Es wird ein komplett lauffähiges Beispiel benötigt, oder noch besser ein Link zum Problem, damit man live rumprobieren kann. Niemand hat Zeit sich erst groß etwas zusammenzubasteln.
Ich habe nun die html- und css-files als txt-file hinzugefügt. Ist das hilfreich?

*EDIT:
Anderenorts bin ich darauf hingewiesen worden, dass das mehrmalige Verwenden derselben ID nicht bei allen Browsern funktioniert und somit keine gute Lösung ist. Wenn ich als Klasse versuche die Unterpunkte unterschiedlich abzurunden, dann funktioniert es aber nicht.. Mache ich etwas bei der Klassenbildung falsch, oder muss ich die einzelnen Unterpunkte auf andere Art ansprechen?
Angehängte Dateien
Dateityp: txt index.txt (6,9 KB, 2x aufgerufen)
Dateityp: txt style.txt (5,1 KB, 2x aufgerufen)

Geändert von CooKie_KO (04.04.2013 um 16:15 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
dropdown, menü, navi, navigation

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Dropdown menu mit Hover-Images pbs2h8 CSS 0 10.09.2009 15:46
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
DropDown mit Hover funktioniert nicht im IE 6 KleinerEisbaer CSS 1 31.10.2007 16:00
ie 7 - menu css - a:hover behaviour only on text not on the whole box sycorax27 CSS 1 18.06.2007 23:34
[erledigt] horizontales menu (abstand problem) dottore:skin CSS 4 20.01.2006 10:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:54 Uhr.