hallo,
ich habe eine navigation die ich am liebsten mit pixelangaben nach rechts drücken will
leider funktioniert das nicht mit den üblichen methoden padding 0 0 0 200px; oder padding-left
hier mal die url:
http://og-elbbruecke.de/testumgebung/index.html
hier der html code:
Code
<label for='show-menu' class='show-menu'>Show Menu</label>
<input type='checkbox' id='show-menu' role='button'>
<ul id='menu'>
<li><a href="#">Über uns</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
und der css code:
Code
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: center;
}
li {
display: inline-block;
float: left;
margin-left: 1px; /*abstand zwischen den button*/
}
li a {
display: block;
border-radius: 18px 0px 0px 0px;
min-width: 140px;
height: 30px;
text-align: center;
line-height: 30px; /*schrift höhe abstand von oben*/
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
background: #2f3036;
text-decoration: none;
}
li:hover a {
background: #008dd2;
}
li:hover ul li a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*008dd2*/
li:hover ul li a:hover {
background: #008dd2;
color: #008dd2;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20 px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu {
display: block; }
.show-menu {
font-family: Helvetica; Arial, sans-serif;
border-radius: 18px 0px 0px 0px;
text-decoration: none;
color: #fff;
background: #008dd2;
text-align: center;
padding: 10px 0;
display: none;
}
@media screen and (max-width: 760px) {
ul {
position: static;
display: none;
}
li {
margin-bottom: 1px;
}
ul li, li a {
width: 100%;
border-radius: 0px 0px 0px 0px;
}
.show-menu {
display: block;
}
body {
background-image: none;
}
}
Alles anzeigen
sollte ich selber noch die lösung finden schreibe ich das natürlich selbstverständlicxh hier rein .... aber ich denk ich brauch eure Hilfe !