Frage stellen
ich habe zwar einige helfende Beiträge gefunden, jedoch habe ich trotz vielem rumexperimentieren nicht meinen Fehler gefunden.
Ich möchte einen Text mittig auf meinem Button Positionieren. Ich arbeite mit Listen.
Der Button wechselt beim hover, sowohl in den obermenüs als auch in den untermenüs.
Da ich ein vorgefertigtes Design bearbeite, möchte ich nicht alles "zercrashen". Hauptsächlich bearbeitet habe ich das Element "a" also den Link - span. Die Position der Elemente habe ich festgelegt auf die Button-Größe. Nun scheint margin bzw. padding mir in mein vertical-align reinzuballern (der stärkere gewinnt wohl
) ich habe schon diverse versuche mit margin und padding unternommen - in verschiedenen elementen - aber bisher immer nur das design zerschossen. Für Hilfe wäre ich dankbar.
CSS-Code
- Code: Alles auswählen
/* =Menu
----------------------------------------------- */
#access {
border-top: 1px solid #ccc;
display: block;
float: left;
margin: 0 auto;
padding: 1px 0 0;
width: 100%;
}
#access ul {
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-size: 13px;
font-weight: bold;
list-style: none;
margin: 0;
padding-left: 0;
text-transform: uppercase;
position: center;
align: center;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2em;
margin: 0 1px 0 0;
padding: 0.25em 1em 0;
text-decoration: none;
background:url(button_closed1.gif) no-repeat 0px 0px;
height: 80px;
width: 216px;
position: center;
text-align: center;
vertical-align: middle;
}
#access ul ul {
display: none;
float: left;
font-weight: normal;
position: absolute;
left: 10;
text-transform: none;
z-index: 99999;
width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background:url(button_closed1.gif) no-repeat 0px 0px;
color: #000;
line-height: 1em;
margin: 0;
padding: .66em .5em .5em 1em;
width: 216px;
height: 80px;
}
#access li:hover > a,
#access ul ul :hover > a {
background:url(button_open.gif) no-repeat 0px 0px;
}
#access ul ul a:hover {
background:url(button_open.gif) no-repeat 0px 0px;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item a,
#access .current-menu-ancestor a,
#access .current_page_item a,
#access .current_page_ancestor a {
background:url(button_open.gif) no-repeat 0px 0px;
}
HTML-Code
- Code: Alles auswählen
<div id="access" role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="menu">
<ul>
<li class="current_page_item">
<a href="http://WEBSITE.com/" title="Home">Home</a>
</li>
<li class="page_item page-item-48">
<a href="http://WEBSITE.com/?page_id=48" title="Fotos">Fotos</a>
</li>
<li class="page_item page-item-16">
<a href="http://WEBSITE.com/?page_id=16" title="Kontakt">Kontakt</a>
<ul class="children">
<li class="page_item page-item-34">
<a href="http://WEBSITE.com/?page_id=34" title="Gästebuch">Gästebuch</a>
</li>
<li class="page_item page-item-6">
<a href="http://WEBSITE.com/?page_id=6" title="Impressum">Impressum</a>
</li>
</ul>
</li>
<li class="page_item page-item-19">
<a href="http://WEBSITE.com/?page_id=19" title="Über uns">Über uns</a>
<ul class="children">
<li class="page_item page-item-22">
<a href="http://WEBSITE.com/?page_id=22" title="Ämter">Ämter</a>
</li>
<li class="page_item page-item-24">
<a href="http://WEBSITE.com/?page_id=24" title="Presse">Presse</a>
</li>
<li class="page_item page-item-102">
<a href="http://WEBSITE.com/?page_id=102" title="Satzung">Satzung</a>
</li>
</ul>
</li>
</ul>
</div>
MFG lgentle
