Probleme mit dem Submenü @ tutorials.de: Tutorials, Forum & Hilfe

tigerlily · 10.10.07 10:25

Hallo an alle,

ich habe ein kleines Problem. Und zwar habe ich mir ein horizontales Klappmenü erstellt mit Hilfe von HTML und CSS. Soweit so gut. Leider habe ich noch einen kleinen Schönheitsfehler gefunden

und zwar sobald man auf einen Button in der Leiste klickt wo sich das Submenü öffnet, überschreibt css mir meinen vorgegeben Rahmen anstatt sich anzupassen.

http://foto.arcor-online.net/palb/al...3635613663.jpg

währe für einen Denkanstoß sehr dankbar wonach ich suchen müsste um es in CSS anzupassen.

gruss

tigerlily

Maik · 10.10.07 12:15

Hi,

Zitat von tigerlily

währe für einen Denkanstoß sehr dankbar wonach ich suchen müsste um es in CSS anzupassen.

wenn du den dazugehörigen Quellcode postest, kann man sicherlich etwas dazu sagen.

tigerlily · 10.10.07 12:20

HTML-Code:

HTML-Code:

   <link rel="stylesheet" type="text/css" href="test.css">

</head>

<body>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Alle anzeigen</a></li>
<li><a href="#">Mitarbeiter anlegen</a></li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Mitarbeiter suchen</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Namenssuche</a></li>
<li><a href="#">Suchkriterien</a></li>
</ul>
</li>
<li><a href="#">Daten aktualisieren</a></li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Einstellungen</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Verzeichnisse</a></li>
</ul>
</li>
<ul id="navlist">
<li id="active"><a href="#" id="current">Stammdaten</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Beratungspunkte</a></li>
<li><a href="#">Branchen</a></li>
<li><a href="#">Datenbanken</a></li>
<li><a href="#">Fremdsprache</a></li>
<li><a href="#">Fremdsprachenstatus</a></li>
<li><a href="#">Methoden</a></li>
<li><a href="#">Programmiersprachen</a></li>
<li><a href="#">Qualifikation</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Zertifizierung</a></li>
<li><a href="#">Kunden</a></li>
<li><a href="#">Firmendaten</a></li>
<li><a href="#">Beraterstatus</a></li>
</ul>
</li>
<li><a href="#">Alte Profile</a></li>
</ul>
</div>

CSS-Code:

HTML-Code:

ul#navlist 
{ 
font-family: sans-serif; 
}

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li 
{ 
float: left; 
}

ul#navlist li a
{
color: #000000;
background-color: #009900;
padding: 3px;
border: 1px solid black;
}

ul#navlist li a:hover
{
color: #000000;
background-color: #009900;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #009900;
border: 1px solid black;
}

ul#subnavlist 
{ 
display: none; 
border: 1px solid black;
}

ul#subnavlist li 
{ 
float: none; 
}

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before 
{ 
content: " >> "; 
}

body 
{
	background-color: #FFFFFF;
	background-image: url("outcome.jpg");   
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: left top;
	

}

Maik · 10.10.07 12:25

Was beim ersten Überfliegen des Quellcodes auffällt, ist die Tatsache, dass du alle IDs in dem Dokument mehrfach verwendest, was aber nicht regelkonform ist, da eine ID innerhalb eines HTML-Dokuments eindeutig sein muss. In diesem Fall müssen die IDs in Klassen umgewandelt werden.

Ansonsten kann ich bei mir kein Überschreiben der Rahmeneinstellungen feststellen, wenn sich die Submenüs öffnen.

Vielmehr sitzt das Submenü zu weit oben, was sich mit folgender Regelerweiterung beheben lässt:

Code :

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
[b]top:30px;[/b]
}

HuRaHoRRe · 10.10.07 12:31

Bei mir überschneiden sie sich auch...

Und ich würde das ganze zusätzlich noch einmal im IE(bei mir 7) anschauen, da sieht das ganze gar nicht toll aus :/

tigerlily · 10.10.07 12:49

@Maik: Danke für deinen Tipp, leider überschreibt er mir den Submenü Block weiterhin.

@HuRaHoRRe: Oh weih, stimmt im IE7 totale Katastrophe, habe das bis jetzt mit FireFox getestet.

Maik · 10.10.07 12:53

Zitat von tigerlily

@Maik: Danke für deinen Tipp, leider überschreibt er mir den Submenü Block weiterhin.

"überschreibt" oder "überschreitet" bzw. "überschneidet"?

Bei mir überschneidet das Submenü das Mainmenü nicht mehr:

Probleme mit dem Submenü-demo_tigerlily.jpg

tigerlily · 10.10.07 13:01

Oh sorry, da habe ich mich wohl missverständlich ausgedrückt.

Ich meinte damit wie schon oben in der Grafik angehangen, das mir die einzelnen Menü Punkte die zu lang sind, wie z.B. Fremdsprachenstatus die Box überschreitet. Hätte aber gerne das sich meine Submenü Box variabel an das längste Wort mit verbreitert.

gruss

dany

Maik · 10.10.07 13:05

Okay, dann hätten wir das auch geklärt

Nimm mal im folgenden Selektor die Breitenangabe heraus:

Code :

ul#navlist li:hover ul#subnavlist li a
{
display: block;
[b]width: 10em;[/b]
border: none;
padding: 2px;
}

tigerlily · 10.10.07 13:31

Supi, hat funktioniert.

Muss jetzt nur noch was

n damit es unter dem IE auch läuft

Maik · 10.10.07 13:42

http://www.htmldog.com/articles/suckerfish/ wäre eine JS-gestützte Möglichkeit, damit die Submenüs im IE6 erscheinen, ansonsten einfach mal bei Stu Nicholls in der Rubrik Menus - Multi-Level CSS Only stöbern.

tigerlily · 10.10.07 13:44

Super danke. Werde mich da mal was einlesen und versuchen es umzusetzen.

Vielen vielen dank nochmals.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Wie spreche ich mit CSS ein Submenü an?

Menü mit Submenü

Submenü bei rollout unsichtbar

Submenü

Submenü

E-Mail:

Abonnieren Abbestellen