Frage stellen
ich habe ein kleines Problem, und hoffe, mir kann jemand weiterhelfen.
Es geht dabei um folgendes:
Ich habe ein Dropdown-menü. Die einzelnen Menüoberpunkte habe ich durch buttons ersetzt.
Die Buttons werden leider nicht zentriert angezeigt, im Programm steht zwar, das diese zentriert sind, aber in der Ansicht leider nicht.
Die Navi liegt hinter einem gelben Balken. Der Buttons sollen sich, wie eben schon beschrieben mittig auf diesem Balken befinden, so dass rechts und links der gleiche abstand ist...
Bin mir allerdings nicht genau sicher, ob ich die in der html oder in der css datei zentrieren muss.
Ich schick euch einfach mal beide Codes.
Hier ist der html-Code:
<head>
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
text-align: left;
}
</style>
<div class="style1" style="height: 152px">
<img src="Logos%20bearbeitet/header.jpg">
<link href="Stylesheet.css" rel="stylesheet" type="text/css">
<div id="menu" class="style1" style="height: 25px">
<!-- öffnet die Navigationsleiste-->
<ul><!-- öffnet den ersten Themenblock -->
<li class="style1" style="left: 0px; top: 0px"><!-- öffnet die Listeneinträge von Thema 1 -->
<h3><img height="24" src="Buttons/WT.jpg" width="120"></h3>
<ul><!-- öffnet die Klappnavi von Thema 1 -->
<li><a href="#">Begriffe</a></li>
<li><a href="#">Familie</a></li>
<li><a href="#">WT aus meiner Sicht</a></li>
</ul><!-- schließt die Klappnavi von Thema 1 -->
</li><!-- schließt die Listeneinträge von Thema 1 -->
</ul><!--schließt den ersten Themenblock-->
<ul><!-- öffnet den zweiten Themenblock -->
<!-- öffnet die Listeneinträge von Thema 2 -->
<h3><img height="24" src="Buttons/Kids-wt.jpg" width="120"></h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="#">Bilder</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
<!-- schließt die Listeneinträge von Thema 2 -->
</ul><!--schließt den zweiten Themenblock-->
<ul><!-- öffnet den dritten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 3 -->
<h3><img height="24" src="Buttons/E1.jpg" width="120"></h3>
<ul><!-- öffnet die Klappnavi von Thema 3 -->
<li><a href="#">Bilder zu E</a></li>
</ul><!-- schließt die Klappnavi von Thema 3 -->
</li><!-- schließt die Listeneinträge von Thema 3 -->
</ul><!--schließt den dritten Themenblock-->
<ul><!-- öffnet den vierten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 4 -->
<h3><img height="24" src="Buttons/Gewalt.jpg" width="180"></h3>
<ul><!-- öffnet die Klappnavi von Thema 4 -->
<li><a href="#">Links</a></li>
</ul><!-- schließt die Klappnavi von Thema 4 -->
</li><!-- schließt die Listeneinträge von Thema 4 -->
</ul><!--schließt den vierten Themenblock-->
<ul><!-- öffnet den fuenften Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 5 -->
<h3><img height="24" src="Buttons/Ck.jpg" width="120"></h3>
<ul><!-- öffnet die Klappnavi von Thema 5 -->
<li><a href="#">Links</a></li>
</ul><!-- schließt die Klappnavi von Thema 5 -->
</li><!-- schließt die Listeneinträge von Thema 5 -->
</ul><!--schließt den fuenften Themenblock-->
<ul><!-- öffnet den sechsten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 6 -->
<h3><img height="24" src="Buttons/Shop.jpg" width="120"></h3>
<ul><!-- öffnet die Klappnavi von Thema 6 -->
<li><a href="#">Shop</a></li>
</ul><!-- schließt die Klappnavi von Thema 6 -->
</li><!-- schließt die Listeneinträge von Thema 6 -->
</ul><!--schließt den sechsten Themenblock-->
<ul><!-- öffnet den sechsten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 6 -->
<h3><img height="24" src="Buttons/wann.jpg" width="120"></h3>
<ul><!-- öffnet die Klappnavi von Thema 6 -->
<li><a href="#">Anfahrtsskizze</a></li>
</ul><!-- schließt die Klappnavi von Thema 6 -->
</li><!-- schließt die Listeneinträge von Thema 6 -->
</ul><!--schließt den sechsten Themenblock-->
<ul><!-- öffnet den siebten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 7 -->
<h3><img height="24" src="Buttons/Links.jpg" width="120"></h3>
</li><!-- schließt die Listeneinträge von Thema 7 -->
</ul><!--schließt den siebten Themenblock-->
<ul><!-- öffnet den achten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 8 -->
<h3><img height="24" src="Buttons/Kontakt.jpg" width="120"></h3>
<ul><!-- öffnet die Klappnavi von Thema 8 -->
<li><a href="#">E-Mail</a></li>
<li><a href="#">Formular</a></li>
</ul><!-- schließt die Klappnavi von Thema 8 -->
</li><!-- schließt die Listeneinträge von Thema 8 -->
</ul><!--schließt den achten Themenblock-->
</div><!-- schließt die Menüleiste #menu -->
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste--> </div>
und der Css-Code:
/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Menüleiste--*/
#menu {
width: 100%;
padding: 0 20px;
background: #FFDB00;
font-family: Verdana;
line-height: 1.5;
float: left;
text-align: center;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
list-style-type: none;
text-align: center;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
text-align: center;
border: 1px solid #003366;
background: #FFDB00;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
width: 180px;
font-size: 0.9em;
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #FFDB00;
color: #000000;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
color: #000000;
background: #C0C0C0;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
Ich hoffe, mir kann jemand weiter helfen.
Vielen Dank im voraus!
NoName89
