Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Pulldownmenue zentrieren
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Pulldownmenue zentrieren

Pages: [1]
geschrieben von mp3 am 01.08.2005 - 18:18
Hallo,

ich habe folgendes Pulldown-Menu in meine HP integriert.:
Die HP ist zentriert da menue jedoch nicht. Was muss ich tun, damit auch das Menu zentriert dargestellt wir?


Ab hier der Code:


<script type="text/javascript">

function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

</script>

<style type="text/css">
<!--
/* CSS from tutorials of http://www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
background: white;
font: 80% Tahoma, Arial, Verdana;
cursor: hand;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: auto;
left: 0px;
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
width: 156px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

.mentions {
position: absolute;
top : auto;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
</style>

<tr>
<div id="menu" align="center">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Home</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="index.php?act=login&goon=login&goon2=profil&username=dirkudo&passwort=1c8491a30d62d3d30f1a8c10ea34b30c"> Profil</a></li>
<li><a href="#">Sub Menu 1.2</a></li>
<li><a href="#">Sub Menu 1.3</a></li>
<li><a href="#">Sub Menu 1.4</a></li>
<li><a href="#">Sub Menu 1.5</a></li>
<li><a href="#">Sub Menu 1.6</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.2</a></li>
<li><a href="#">Sub Menu 3.3</a></li>
<li><a href="#">Sub Menu 3.4</a></li>
<li><a href="#">Sub Menu 3.5</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sub Menu 4.1</a></li>
<li><a href="#">Sub Menu 4.2</a></li>
<li><a href="#">Sub Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</tr>


usw.

Wäre prima wenn jemand einen Tipp hat.

Danke

mp3

geschrieben von gflaig am 06.08.2005 - 01:04
Also erstmal html komplettieren,
Dann dem <div> eine relative Position mitgeben, dann gehts.


statt :
<tr>
<div id="menu" align="center">
<dl>

jetzt:
<center>
<table><tr><td>
<div id="menu" style="position:relative">
<dl>

und am Ende natürlich statt :
</dl>
</div>
</tr>

jetzt:
</dl>
</div>
</td>
</tr>
</table>

bei mir tuts dann - ff 1.04, ie 6, ns 7.1 , mozilla 1.7

Grus Günther

geschrieben von mp3 am 06.08.2005 - 13:17
Hallo Günter,
danke für den Tipp. Das Menü wird nun zentriert abgebildet.

Das funktioniert prima für die erste Ebene des Menues.
Wenn ich jetzt die Untermenues anklicke, verschiebt sich die Tabelle bzw. der nachfolgende Text um die Anzahl der sich öffnenden Links. Das möchte ich unbedingt vermeiden. Das jeweilige Untermenue soll sich öffnen, ohne den Rest der HP nach unten zu verschieben. Es soll sich über die HP legen.

hier kannst Du das Ergebnis sehen: http://www.test.sdix.de

Login: demo pw: demo

Vielleicht hast Du oder jemand anderes noch den richtigen Tipp für mein Problem.

cu

mp3

geschrieben von gflaig am 06.08.2005 - 14:34
Der derzeitige Stand gibt mir
- keine Untermnues.
- nach Anklicken eines der Menupunkte, eine Verschiebung um einen weissen Bereich nach rechts.

Irgendwie hast du es geschafft, <tr><img src...... zu schreiben - ohne <td>

Erfahrungsgemäss, sind Tabellen mit unvollständigen Ebenen unvorhersehbar. Ein solches Image landet wo auch immer.

Mein Tipp, während der Erstentwicklung JEDE Tabelle, und Untertabelle, mit einem andersfarbigen Rand versehen, dann siehst du, wie das Zeug wirklich durch die Gegend wandert, und kannst meist auch erkennen, welchen Tag du vergessen hast.
Oder einen Kontext-sensitiven Editor Ultraedit , Eclipse o.ä. mit richtig eingestellter Source-Erkennung. Manche können ganze Ebenen ein- und ausklappen, je nach Bedarf.
( von <xxx> bis </xxx> )

Gruss, Günther

geschrieben von mp3 am 06.08.2005 - 19:08
die Untermenues sind im userbereich. auf der Hauptseite habe ich keine Untermenues

geschrieben von rose am 08.08.2005 - 20:36
hi,
kann man das pulldownmenue auch so aendern, dass die untermenues nach oben ausfahren??
anzuwenden bei frameseiten

danke hans

geschrieben von okley am 08.08.2005 - 20:55
damit ein pulldownmenu nach oben ausfährt, also quasi ein pullupmenu wird, musst du auf javascript zurückgreifen. ich würde dir aber kein pullupmenu empfehlen.

es gibt ein rein css-basiertes pullupmenu, aber das geht nicht im IE, sondern soviel ich weiss nur in mozilla browser.

geschrieben von Matneu am 08.08.2005 - 23:10
Zitat
 Original geschrieben von okley am 08.08.2005 - 20:55
es gibt ein rein css-basiertes pullupmenu, aber das geht nicht im IE, sondern soviel ich weiss nur in mozilla browser.

Praktisch ALLE anderen Browser wie Opera, Mozilla, Konquerer, Safari etc. sollten damit keine Probleme haben. Es ist lediglich M$, die bei der "schnellen" Entwicklung der Standards nicht hinterher kommen.

So far...
Matthias

geschrieben von okley am 09.08.2005 - 06:51
nun gut, ich habe hier ein par beispiel menus. und zwar drop-up menus.
funzt auch im ie. allerdings ist javascript hier von nöten.

http://www.aplus.co.yu/adxmenu/exam....prise/hbt/

geschrieben von gflaig am 09.08.2005 - 21:55
Du kannst das "Flippen"des Seiteninhalts verhindern, indem du den Rest der Seite ausser dem Menu,
mit <div sytle="position=absolute; top=50px;"> o.ä. fest-pinnst.

ich habs mal folgendermassen ausprobiert :
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

<div style="position:absolute;
                     top:15%;      <-- nur als Beispiel, mit festen Angaben ist vermutlich besser. 
	  	     z-index=3">   <-- z-index scheint nur zu wirken, wenn beide divs absolut sind  

<table width="100%" border="0">
  <tr width="100%">
    <td width="7">&nbsp;</td>
    <td width="*">
      <p>
          <b><h4><br>Willkommen im Mitgliederbereich von sdiX.de   .........
.................
.................
</table>
</div>

</body>
</html>


und es hat geklappt: So wie die Seite jetzt aussieht , sind allerdings wieder unvollständige Tabellen drin, solltest du aufräumen. :-)


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.