zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit dropdown Menue

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.11.2011, 13:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2011
Beiträge: 4
hape42 befindet sich auf einem aufstrebenden Ast
Standard Problem mit dropdown Menue

Hallo,

ich mache grade meine ersten Gehversuche mit CSS

Auf meiner Webseite habe ich noch alle Menues als einfache URLs. Daraus habe ich jetzt Rolloverbuttons gemacht. Damit nicht zu viele Buttons auf einmal angezeigt werden, kam ich auf die Idee einen "more..."-Button zu definieren, der dann beim drüberfahren mit der Maus ein vertikales Menü aufklappt.
Das funktioniert auch alles so weit, nur wird die Zeile in der der "more..." Button steht, dann so gross wie die das Vertikale Menü.
(Ich habe das horizontale und Vertikale Menue jeweils in einer Tabelle)

Unter Rollover-Buttons und Dropdown-Menmit CSS kann man sich das Ergebnis gerne mal anschauen, sieht bescheuert aus

Direkt darunter habe ich das horizontale Menue mal ohne Tabelle umgesetzt; sieht noch schlimmer aus

Hat jemand eine Idee für mich, wie ich das Aufklappmenü "obendrauf" legen kann, ohne dass der Seiteninhalt darunter verschoben wird?
Ach ja, nach Möglichkeit einfach mit HTML bzw. CSS.
Ich mache das Ganze nicht nur für schön, sondern HTML und CSS zu lernen.

Hier noch der Code vom HTML:
HTML-Code:
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; ">
 <title>Rollover-Buttons  und Dropdown-Menümit CSS</title>
 <style type="text/css">
 <!--
 @import url(style4.css);
 -->
 </style>
</head>
<body  >
<div align="center" >
	
	
  <table width="100%" border="0" bgcolor="#C8C8C8">
    <tr valign="middle" align="center"> 
      <td bgcolor="#C8C8C8"> 
        <div class="menu" align="center" > <a class="menu" href="index.php?typ=Score" >Score</a> </div>
	</td>
      <td> 
        <div class="menu"  align="center"> <a  class="menu" href="index.php?typ=Brutto" >Brutto</a> </div>
    </td>

      <td > 
        <div  id="box"  class="menu"  align="center"><a class="menu" href="#">more...
		<span>
		<table>
			<tr>
				<td> 
					<div  class="menu"  align="center"><a  class="menu"  href="beste_runde.php?gleit=30">Beste</a></div>
				</td>
			</tr>
			<tr>
				<td> 
					<div class="menu"  align="center"><a class="menu"  href="index.php?typ=Abschlag">Fairway getroffen?</a></div>
				</td>
			</tr>
			<tr>
				<td> 
					<div  class="menu"  align="center"><a  class="menu"  href="index.php?typ=Putt">Putts</a></div>
				</td>
			</tr>
		</table>
		</span></a></div>
    </td>
	
      <td> 
        <div  class="menu"  align="center"><a  class="menu"  href="hilfe.php">?</a></div>
    </td>
    
  </tr>
</table>
	</div>
	<br>
    <div class="menu" align="center" > 
		<a class="menu" href="index.php?typ=Score" >Score</a> 
		<a  class="menu" href="index.php?typ=Brutto" >Brutto</a> 
		<a  class="menu" href="index.php?typ=Netto" >Netto (Stableford)</a>
		<a class="menu"  href="index.php?typ=Abschlag">Fairway getroffen?</a>
		<a class="menu"  href="overview.php?umfang=10">Übersicht</a>
		<a  class="menu"  href="index.php?typ=Putt">Putts</a>
		<a  class="menu"  href="index.php?typ=GiR">GiR</a>
		<a  class="menu"  href="kurz_lang.php?typ=Kurz">Kurz/Lang</a>
		<a  class="menu"  href="tabelle.php">Tabelle</a>
		<a  class="menu"  href="last_ten.php?letzte=10">&Oslash; letzte 10</a>
		<a  class="menu"  href="index.php?typ=Zeit">Zeitleiste</a>
		<a  class="menu"  href="beste_runde.php?gleit=30">Beste</a>
		<a  class="menu"  href="gruppe_index.php">Runde</a>
		<a  class="menu"  href="club.php">Clubs</a>
		<a  class="menu"  href="http://hape42.de/Golf/">Blog</a>
        <div  id="box"  class="menu"  align="center"><a class="menu" href="#">more...
		<span>
			<a class="menu"  href="beste_runde.php?gleit=30">Beste</a>
			<a class="menu"  href="index.php?typ=Abschlag">Fairway getroffen?</a>
			<a class="menu"  href="index.php?typ=Putt">Putts</a>
		</span></a></div>
		<a  class="menu"  href="hilfe.php">?</a>
	</div>


</body>
</html>
und hier noch das CSS:
Code:
a.menu { font-family:Helvetica;
           }

a.menu:link    { color:#666; background-color:transparent; text-decoration:none; border:1px double #fff; padding:2px;}
a.menu:visited { color:#666; background-color:transparent; text-decoration:none; border:1px double #fff; padding:2px; }
a.menu:hover   { color:#ffffff; background-color:#000000; text-decoration:none; border:1px double #f99; }
a.menu:active  { color:#c66; background-color:transparent; text-decoration:none; border:1px double #f99; }

div.menu {   text-align:center;  }



#box {
position:relative; top:0px; left:0px; 
z-index:3;}

#box a {
color:black;
background:#C8C8C8;
font: verdana, sans-serif;
text-decoration:none;
display:block;
padding:2px;
border:1px solid white;}

#box a:hover {
color:black;
background:#C8C8C8;
}

#box a span {display:none;}

#box a:hover span {
color:black;
background:#c8c8c8;
font:normal verdana, sans-serif;
border:1px solid black;
display:inline;
padding:2px;}

vielen Dank schon mal für Antworten/Hilfe

Geändert von hape42 (18.11.2011 um 18:35 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.11.2011, 14:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Auch wenn du das sicher nicht lesen willst, ich versuch's trotzdem:
Ehe du dich mit solchen Effekten befasst, brauchst du erstmal Grundlagenwissen. Dieses fehlt dir sehr offensichtlich noch.
Beispiele: Deinem Code fehlt ein Doctype (Google: "Doctype Switch") und das HTML ist alles andere als sinnvoll. Das richtige Markup für eine Navigation (= Auflistung von Links) ist eine Liste.
Attribute (z.B. "align", "bgcolor"), die nur der Darstellung dienen, gehören auf den Müll. Dafür gibt es CSS.

Bitte leg das erstmal beseite und widme dich Grundlagenlektüre. Empfehlung: Das neue »Little Boxes« - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.11.2011, 18:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2011
Beiträge: 4
hape42 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Auch wenn du das sicher nicht lesen willst, ich versuch's trotzdem:
Ehe du dich mit solchen Effekten befasst, brauchst du erstmal Grundlagenwissen. Dieses fehlt dir sehr offensichtlich noch.
Beispiele: Deinem Code fehlt ein Doctype (Google: "Doctype Switch") und das HTML ist alles andere als sinnvoll. Das richtige Markup für eine Navigation (= Auflistung von Links) ist eine Liste.
Attribute (z.B. "align", "bgcolor"), die nur der Darstellung dienen, gehören auf den Müll. Dafür gibt es CSS.

Bitte leg das erstmal beseite und widme dich Grundlagenlektüre. Empfehlung: Das neue »Little Boxes« - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
vielen Dank für Dein schnelles Feedback!
Ja, Du hast Recht. Und zwar sowohl als auch.
1. Ich lese das ungern
2. Ich werde mich mit den Grundlagen beschäftigen.

Aber:
Diese Webseiten, aus denen ich den Schnipsel rausgelöst habe, existieren seit vielen Jahren. Und ich benötige möglichst bald eine Lösung, die verwendbar ist.

Ich befürchte, da Du als Profi da jetzt gleich mit der großen Kelle über meinen Code hergezogen bist, wird es wohl nicht mehr viele Forumsteilnehmer geben, die mir einen Tipp geben. So nach dem Motto: Du musst doch nur bei xy aus dem "A" ein "B" machen. Oder so ähnlich
Ich fühle mich wie kurz vor der Lösung, sehe es aber nicht selbst.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.11.2011, 18:59
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Naja, was soll man dir sonst raten?? Solche Navigationen baut man halt komplett anders auf.
Wenn du dich damit nicht beschäftigen willst/kannst, dann kopier dir den Code (gibt genügend Demos im Web).
Beispiel: Simple Dropdown Navbar
Allerdings wirst du auch hier keine table oder div Konstrukte finden.

Manfred
Mit Zitat antworten
  #5 (permalink)  
Alt 18.11.2011, 19:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2011
Beiträge: 4
hape42 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
Naja, was soll man dir sonst raten?? Solche Navigationen baut man halt komplett anders auf.
Wenn du dich damit nicht beschäftigen willst/kannst, dann kopier dir den Code (gibt genügend Demos im Web).
Beispiel: Simple Dropdown Navbar
Allerdings wirst du auch hier keine table oder div Konstrukte finden.

Manfred
Danke!
Das hat wirklich geholfen. Jetzt SEHE ich, was Ihr meint.
Sorry, da war ich wohl in etwas verrannt
Mit Zitat antworten
  #6 (permalink)  
Alt 21.11.2011, 12:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2011
Beiträge: 4
hape42 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank noch mal an die deutlichen Worte. Musste zwar erst mal schlucken, aber wenn ich jetzt meinen Code zu vorher vergleiche, schäm ich mich fast.
Und je mehr ich stdl. dazu lerne, um so mehr erkenne ich, was ich alles gar nicht weiß
So sieht das jetzt aus: Golfstatistiken Hummelbachaue 9-Lochplatz

Leider habe ich noch nicht raus gefunden, warum alles nach links ausgerichtet ist. Ich hätte das Menue gerne zentriert (und alles folgende; das muss ich aber erst noch umbauen)

Hier der geschrumpfte HTML-Code:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
 <meta http-equiv="Content-Type" content="text/html; ">
 <title>Golfstatistiken Hummelbachaue 9-Lochplatz</title>
 <style type="text/css">
 <!--
 @import url(style4.css);
 -->
 </style>
</head>
<body  >
	<h1> Golfstatistiken Hummelbachaue 9-Lochplatz </h1>
	 
    <ul id="nav">
        <li><a href="index.php?typ=Score" >Score</a></li>
		<li><a href="index.php?typ=Brutto" >Brutto</a></li>
 		<li><a href="index.php?typ=Netto" >Netto</a></li>
		<li><a href="overview.php?umfang=10">Übersicht</a></li>
		<li><a href="last_ten.php?letzte=10">&Oslash; letzte 10</a></li>
		<li><a href="#">Bahn 1-9 Score &raquo; </a>
			<ul>
				<li><a href="index.php?typ=1" >Loch 1 Score </a></li>
				<li><a href="index.php?typ=2" >Loch 2 Score </a></li>
				<li><a href="index.php?typ=3" >Loch 3 Score </a></li>
				<li><a href="index.php?typ=4" >Loch 4 Score </a></li>
				<li><a href="index.php?typ=5" >Loch 5 Score </a></li>
				<li><a href="index.php?typ=6" >Loch 6 Score </a></li>
				<li><a href="index.php?typ=7" >Loch 7 Score </a></li>
				<li><a href="index.php?typ=8" >Loch 8 Score </a></li>
				<li><a href="index.php?typ=9" >Loch 9 Score </a></li>
			</ul>
		</li>
		<li><a href="#">Bahn 1-9 Netto &raquo; </a>
			<ul>
				<li><a href="indexStable.php?typ=1" >Loch 1 Stableford </a></li>
				<li><a href="indexStable.php?typ=2" >Loch 2 Stableford </a></li>
				<li><a href="indexStable.php?typ=3" >Loch 3 Stableford </a></li>
				<li><a href="indexStable.php?typ=4" >Loch 4 Stableford </a></li>
				<li><a href="indexStable.php?typ=5" >Loch 5 Stableford </a></li>
				<li><a href="indexStable.php?typ=6" >Loch 6 Stableford </a></li>
				<li><a href="indexStable.php?typ=7" >Loch 7 Stableford </a></li>
				<li><a href="indexStable.php?typ=8" >Loch 8 Stableford </a></li>
				<li><a href="indexStable.php?typ=9" >Loch 9 Stableford </a></li>
			</ul>
		</li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
       <li><a href="#">more &raquo; </a>
            <ul>
                <li><a href="index.php?typ=Putt">Putts / Runde</a></li>
                <li><a href="index.php?typ=GiR">GiR</a></li>
				<li><a href="kurz_lang.php?typ=Kurz">Kurz/Lang</a></li>
				<li><a href="index.php?typ=Zeit">Zeitleiste</a></li>
				<li><a href="beste_runde.php?gleit=30">Beste</a></li>
				<li><a href="gruppe_index.php">Runde</a></li>
				<li><a href="tabelle.php">Tabelle</a></li>
				<li><a href="club.php">Clubs</a></li>
				<li></li>
                <li><a href="index.php?typ=Abschlag">Fairway getroffen?</a></li>
            </ul>
        </li>
        <li><a href="http://hape42.de/Golf/">Blog / Feedback</a></li>
        <li><a href="hilfe.php">?</a></li>
    </ul>
<p></p>

</body>
</html>
und noch das CSS-File:
Code:
body { background-color:#E9E9E9; 
		 text-align:center;}
		 
h1 { text-align:center;
	font-family:Verdana;
	font-size:1.5em;}
	
#nav, #nav ul {
    margin:0px;
    padding:2px;
    list-style:none;
	
}
#nav li {
    position:relative;/* set containing block for AP sub ul */
    float:left;
    background:#BBB;
    text-align:center;
}
#nav li:hover {
    background:#222;
}
#nav a {
    float:left;
    width:150px;
    padding:.25em 0;
    text-decoration:none;
    color:#000;
    /*font-weight:bold;*/
	border:1px double #fff; padding:2px;
}
#nav li:hover a {color:#BBB}/*lime*/

/* ------ Sub UL (Drop Down) ------ */
#nav ul {
    position:absolute;
    width:150px;
    left:0;
    top:100%;
    margin-left:-999em;/* hide the sub ul */
}
#nav li:hover ul {
    margin-left:0;/* reveal the sub ul on li:hover */
}
#nav li:hover li a { color:#000}/*reset "li:hover a" on sub li*/

#nav li li a:hover {
    color:#0FF;/*cyan*/
    background:#555;
}
Hat da noch jemand für mich einen Tip für das zentrieren? Ich ging davon aus, dass das mit dem body-tag erledigt sei
Mit Zitat antworten
  #7 (permalink)  
Alt 21.11.2011, 13:08
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Vermute mal, da kommt noch mehr rein in die Seite?
Dann pack um alles (innerhalb body) einen div.
Diesem gibts du eine Breite und 'margin: 0 auto;'

Steht alles in "Little Boxes"
Mit Zitat antworten
  #8 (permalink)  
Alt 21.11.2011, 13:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von hape42 Beitrag anzeigen
Leider habe ich noch nicht raus gefunden, warum alles nach links ausgerichtet ist.
Hm. Was erwartest du anderes von float:left?

Zitat:
Ich hätte das Menue gerne zentriert
Was genau? Die Box des Menüs? Oder die Links? Genauer: Was soll mit der zweiten Zeile der Links geschehen?
Mit Zitat antworten
Antwort

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
Problem mit einer DropDown Liste manuel_g CSS 2 31.03.2010 11:11
PNG in IE Problem mit der Mauserkennung (klickbar oder nicht) Angélique CSS 13 16.03.2010 19:20
Dropdown Menü Problem dannN CSS 0 18.02.2010 17:31
Zwei DropDown Navigationen verschmelzen Drian Offtopic 1 13.02.2010 15:00
Problem mit Horizonztalem DropDown in Netscape/Mozilla martin lange CSS 1 16.03.2007 12:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:44 Uhr.