• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdown Menü fehler in der NAV

E

eysiss

Neues Mitglied
Guten Tag lieber HMTL'ler,

Ich habe mir zuspass eine kleine Webseite erstellt, obwohl meine Kenntnisse über XHTML und CSS nicht gerade die besten sind.

Mit der Zeit hat sich aber ein Problem aufgemacht und zwar wollte ich 2 Dropdown Menüs in einer Nav. leiste, das habe ich auch alles gemacht so wie
ich es mir gedacht habe, jedoch zeigt er mir die Links zuweit Rechts an bzw. nur mit Großen abstand und die Unterpunkte die eigentlich erst nach dem hovern
kommen sollte stehen einfach Links neben dem Hauptbegriff :S

Ich habe schon viel rumprobiert, aber da meine Kenntnisse nicht die besten sind habe ich wohl einfach etwas übersehen oder etwas nicht beachtet, was man beachten muss.

Hier erstmal der HTML und CSS Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ABIS - Bausoftware für Architekten und Ingenieure</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<meta name="Author" content="Andreas Kromm" />
</head>

<body>
<div id="container">

<div id="holder" class="clearfix">
<div id="logo">
<img src="http://www.html.de/images/logo.bmp"/>
</div>
<h1><span style="letter-spacing:0.184em;color:red;">www.abisplan.de</span></h1>
<div id="navigation">
<a href="index.html"><big>Startseite</big></a>
<a href="Produkte.html"><big>Produkte</big></a>
<a href="kontakt.html"><big>Kontakt</big></a>
<a href="anfahrt.html"><big>Anfahrt</big></a>
<a href="impressum.html"><big>Impressum</big></a>
<div id="dropdown_menu">


<strong><a href="service.html" target="_blank"><big>Service</big></a></strong>
<ul>
<li><a href="schulung.html" target="_blank"><big>Schulungen</big></a></li>
<li><a href="beratung.html" target="_blank"><big>Beratung</big></a></li>
<li><a href="verkauf.html" target="_blank"><big>Verkauf</big></a></li>
</ul>
</div>
<div id="dropdown_menu">


<strong><a href="dienstleistung.html" target="_blank"><big>Dienstleistungen</big></a></strong>
<ul>
<li><a href="bauplanung.html" target="_blank"><big>Bauplanung</big></a></li>
<li><a href="3d.html" target="_blank"><big>3D Visualisierung</big></a></li>
</ul>
</div>
</div>


<div id="header"></div>
<div id="content">
<h1><font color="#FF0000">A</font>rchitekten - <font color="#FF0000">B</font>auingenieure -
<font color="#FF0000">I</font>nformation - <font color="#FF0000">S</font>ysteme</h1>
<table border="0" width="870px" height="133px" bordercolor="#000000" div id="table">
<tr>
<td><img src="http://www.html.de/images/town10.jpg" alt="" width="290px" height="133px"/></td>
<td><img src="http://www.html.de/images/swiatynia-skladanka.jpg" alt="" width="290px" height="133px"/></td>
<td><img src="http://www.html.de/images/eingang.jpg" alt="" width="290px" height="133px" /></td>
</tr>
<tr>
<td bgcolor="#CCCCCC">Unsere Ziele</td>
<td bgcolor="#CCCCCC">Unsere Schwerpunkte</td>
<td bgcolor="#CCCCCC">Unsere Zielgruppe </td>
</tr>
<tr>
<td algin="center" valign="top">Wir sind beratende Architekten und Ingenieure, die sich dem Thema EDV-Einsatz im Architektur- und Ingenieurbüros in einer europaweit agierenden Unternehmensgruppe ABIS verschrieben haben.</td>
<td algin="center" valign="top">
sind CAD, AVA, SiGe, Office Controlling, HOAI und Facility Management Software. Darüber hinaus unterstützen wir unsere Kunden bei ihren Projekten, z.B. Bauplanung Visualisierung, Film, Projektmanagement etc.
</td>
<td algin="center" valign="top">
sind alle projektorientierte Unternehmen aus der Baubranche: Architekten, Stadtplaner, Innenarchitekten, Designer, Bauingenieure, Bautechniker, Zeichner, Stadtplanungs- und Bauämter etc.
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#CCCCCC"><b><a href="dienstleistung.html">Bitte beachten Sie unser neues Schulungsangebot für Alt- und Neukunden!</a></b></td>
</table>

</div>
<div id="news">
<div class="newsItem">
<h1>Besuchen Sie auch unsere anderen Webseiten</h1>
<p><a href="www.maxiweb.de">www.maxiweb.de</a></p>
</div>
<div class="newsItem">

</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

So und nochmal der CSS Code :
div#dropdown_menu {
float: left;
font-size:14px;
width: 100px;
height: 22px;
text-align:auto;
overflow: hidden;
margin-left:5px;
list-style-type: none;
padding-left: 5px;
position:relative;
}


div#dropdown_menu strong a {
display: block;
padding: 0;
color: #225799;

}

div#dropdown_menu a:hover {
color:#225799;
color: #000;
height:10px;
}

div#dropdown_menu a {
color:#225799 ;
text-decoration:none;
}
div#dropdown_menu ul {
margin:0;
padding:0;
}
div#dropdown_menu li {
padding-top: 2px;
list-style:none;
border-bottom: 1px solid #333;
}
div#dropdown_menu li a {
display:block;
float:left;
}

#navigation a
{
float: left;
}


* html ul#Navigation a, * html ul#Navigation span {
width: 1em; /* nur fuer IE 5.0x erforderlich */
w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */
height:20px;
}
ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}

#navigation {
width:1150px;
}

#navigation ul {
margin:0;
padding:0;
font-weight:bold; }

#navigation li {
margin:0;
padding:0;
list-style:none;
display:inline;
font-weight:bold;
}
#navigation a {
color:#225799;
padding:0 25px 0 0;
text-decoration:none;
font-weight:bold;}

#navigation a:hover {
color:#000000; }

und nochmal PHP :

window.addEvent('domready', function(){
// Second Example

// The same as before: adding events
$('dropdown_menu').addEvents({
'mouseenter': function(){
// Always sets the duration of the tween to 1000 ms and a bouncing transition
// And then tweens the height of the element
this.set('tween', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
}).tween('height', '150px');
},
'mouseleave': function(){
// Resets the tween and changes the element back to its original size
this.set('tween', {}).tween('height', '22px');
}
});
});

Ich hoffe das ist hier nicht Doppelt kopiert wurden von mir, und ich hoffe das ich Hier im richtigen Forum bin, da das mein erster beitrag ist :)

Mit freundlichen Grüßen : Andreas Kromm
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben