CSS text der skal flyttes
Hej EksperterNu har jeg prøvet på alle mulige måder at flytte min text i min <li> Men kan simpelhen ikke finde ud af det.
Jeg er ved at være i mål med alt andet i min menu.
Her er link til menuen http://www.ankerstjerneweb.dk/find.html
Det som jeg hiver i hår over er at feks den tekst Danmark står på bundlinjen den skal flyttes op mit i. og 20px til højre.
Har prøvet med at masse. positioner og sådan noget men det hjælper ikke på teksten.
Her er css koden:
@media all and (max-width: 800px){
#menu-button {
padding:20px;
font-weight:bold;
}
#menu {
background-color:#333;
color:#FFF;
cursor:pointer;
width:100%;
}
#menu > ul {
display:none;
}
#menu > ul.open {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#menu > ul > li > ul {
padding:0px 0px 10px 20px;
background-color:#ff6600;
font-weight:normal;
list-style:none;
display: block;
}
#menu > ul > li {
color:#FFF;
font-weight:bold;
list-style:none;
font-family: 'Open Sans', Helvetica, sans-serif;
background: #333;
background: -moz-linear-gradient(top, #333 0%, #CCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #CCC));
background: -webkit-linear-gradient(top, #333 0%, #CCC 100%);
background: -o-linear-gradient(top, #333 0%, #CCC 100%);
background: -ms-linear-gradient(top, #333 0%, #CCC 100%);
background: linear-gradient(to bottom, #333 0%, #CCC 100%);
width:100%;
}
#menu ul > li{
padding:20px 0px 0px 0px;
}
#menu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #FFF;
border-bottom: 2px solid #FFF;
right: 25px;
top: 18px;
}
#menu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #FFF;
right: 25px;
top: 28px;
}
}
htmlen:
<div id="menu">
<ul>
<li>Danmark
<ul>
<li><a href="#">Test land</a></li>
<li><a href="#">Test land</a></li>
<li><a href="#">Test land</a></li>
<li><a href="#">Test land</a></li>
</ul>
</li>
<li>Sverige<ul>
<li><a href="#">Test land</a></li>
</ul>
</li>
<li>Norge<ul>
<li><a href="#">Test land</a></li>
</ul>
</li>
<li>Finland<ul>
<li><a href="#">Test land</a></li>
</ul>
</li>
<li>Island<ul>
<li><a href="#">Test land</a></li>
</ul>
</li>
</ul>
</div>
Håber i kan hjælpe mig da jeg snart ikke har mere hår på hovedet :oD