Suche im Forum:
Suchen


Autor Nachricht
Beitrag21.12.2011 um 18:33 (UTC)    
Titel: Ausklappbare Navigation

Ich habe eine Navigation, die ich ausklappen lassen möchte! Habe auch den Code und alles soweit, dass es klappt, ABER:
Dabei wird die Navigation, dann in 3 Zeile statt einer angezeigt. Das kann ich beheben, dann klappt das Untermenü aber bei jedem Punkt der Navigation aus. Außerdem wird durch das Ausklappen der ganze Rest der Homepage unter der Navigation nach unten verschoben. Bin da relativ ratlos...
Danke für Mithilfe Smile
Gruß

Styletag
Code:

/*Navigation*/

#navigation { width: 750px; float: left; }

#navigation ul { list-style-type: none; margin:0px; padding: 0px; }

#navigation a { font-family: verdana; color: #E3E3E3; float: left; margin-bottom: 5px; padding-bottom: 10px; text-decoration: none; } 

#navigation a:hover {background-color: #052d52; background-image: url("http://img.webme.com/pic/f/floorball-tetenbuell/schlaeger.jpg"); background-repeat: no-repeat; background-position: center 0px; color: #f4f4f4; }

#navigation li { list-style-type: none; }
/*Klasse, Navibutton beschreibt*/
.navibutton {width: 75px; text-align: center;}

/*Ausklappen*/

#liste ul li { margin: 0; border: none; }

/* Button Breite + Rahmen + Abstand */

#liste li {
width: 750px;
float: left;
text-align: center;
margin: 0px; }

/* Button Linkfarbe + Hintergrundfarbe */

#liste a { font-family: verdana; color: #E3E3E3; float: left; margin-bottom: 5px; padding-bottom: 10px; text-decoration: none; }

/* Button Hover-Farbe */
#liste a:hover {
background-color: #052d52; background-image: url("http://img.webme.com/pic/f/floorball-tetenbuell/schlaeger.jpg"); background-repeat: no-repeat; background-position: center 0px; color: #f4f4f4; }

#liste li ul { display:none; } /* eingeklappt */

#liste li:hover ul { display:block; } /* ausgeklappt */


Text über dem Design

Code:
<div id="Seite">
<div id="navigation"><ul id="liste"><h4>
<li><a class="navibutton" href="home.htm" _fcksavedurl="#">Home<br /><br /></a>
<a class="navibutton" href="news.htm" _fcksavedurl="#">News<br /><br /></a>
<a class="navibutton" href="fotos.htm" _fcksavedurl="#">Fotos<br /><br /></a>
<a class="navibutton" href="termine.htm"_fcksavedurl="#">Termine<br /><br /></a>
<a class="navibutton" href="#">Teams<br /><br /></a>
<ul>
<li><a class="navibutton" href="/u11.htm">u11</a></li>
<li><a class="navibutton" href="/u13.htm">u13</a></li>
<li><a class="navibutton" href="/u15.htm">u15</a></li>
<li><a class="navibutton" href="/Jugend-GF.htm">Jugend GF</a></li>
<li><a class="navibutton" href="/Erwachsene.htm">Erwachsene</a></li>
</ul>
<a class="navibutton" href="Kleinfeldteams.htm" _fcksavedurl="#">KF Teams<br /><br /></a>
<a class="navibutton" href="sponsoren.htm" _fcksavedurl="#">Sponsoren<br /><br /></a>
<a class="navibutton" href="links.htm" _fcksavedurl="#">Links<br /><br /></a>
<a class="navibutton" href="downloads.htm" _fcksavedurl="#">Downloads<br /><br /></a></li></h4></ul></div>
Beitrag21.12.2011 um 18:35 (UTC)    
Titel:

*edit
So wies oben steht, klappt es bei jedem Punkt aus!
Beitrag22.12.2011 um 02:50 (UTC)    
Titel:

Hallo,

das ganze scheitert in erster Linie mal an deinem höchst invaliden Html. Desweiteren sind deine Listeneinträge genauso breit, wie die gesamte Navigation, kann also auch nicht klappen.

Das sich alles unterhalb der Navi nach unten verschiebt, ist auch normal, das ist der normale Elementfluss. Abhilfe verschaft u.a. die CSS position Eigenschaft.

Da da leider sehr viel falsch ist, dürfte das etwas für dich sein:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=134830

Wobei das und deins sehr große Ähnlichkeiten haben, sollte das also dein Versuch gewesen sein, das Tutorial umzusetzen, solltest du es dir nochmal ganz genau durchlesen und Schritt für Schritt befolgen. Falls du etwas nicht verstehst, kannst du auch gerne Fragen.

- verschoben, nach: HTML & JavaScript -
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag22.12.2011 um 06:11 (UTC)    
Titel:

Hey ja danke, habe leider nicht so viel Ahnung von html... Aber jetzt klappt das ausklappen ohne Verschieben vom Inhalt, leider steht das ganze untereinander... ich hätte das gerne nebeneinander, wenn ich bei "liste" width auf 100px o.ä. stelle, dann steht alles untereinander, ist es nicht möglich alles in der 1. Zeile anzuzeigen?
Gruß
Beitrag22.12.2011 um 06:21 (UTC)    
Titel:

Problem gelöst! Danke nochmal!
Beitrag23.12.2011 um 21:34 (UTC)    
Titel:

Dann danke für die Rückmeldung.

- CLOSED -
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de