Avatar billede Morten Professor
19. april 2017 - 21:10 Der er 7 kommentarer og
1 løsning

CSS text der skal flyttes

Hej Eksperter

Nu 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
Avatar billede jakobdo Ekspert
19. april 2017 - 22:22 #1
Avatar billede Morten Professor
20. april 2017 - 07:14 #2
Takker Det hjalp på det med de gentagelser.
Hvad godt lagt mærke til det men tænke det ikke var så galt, men kan se efter det .stop() gør det pænere.
Avatar billede jakobdo Ekspert
20. april 2017 - 08:56 #3
Din side ser sådan her ud hos mig: http://imgur.com/a/LcUId

Hvad er "problemet" ?

Er det "submenuen" er lidt off i forhold til hovedmenu eller ?
Avatar billede Morten Professor
20. april 2017 - 11:53 #4
Hvis du laver den browser mindre kommer mobil menuen frem.
Teksten feks. Danmark ligger på bundlinjen. og ikke i midten som ved de andre submenuer. og så ligger den helt til venstre, i stedet for de ca. 20px fra siden.
Det jeg forsøger på at få det til at ligne det andet så det ser bedre ud.
Jeg kan ikke se mig ud af det. Har prøvet en masse. med padding og position
Avatar billede Morten Professor
20. april 2017 - 11:54 #5
din browser*
Avatar billede Morten Professor
20. april 2017 - 13:10 #6
Jeg kunne få den længere væk fra siden med text-indent: 10px; men mangler stadig højden så den ligger i miden.
Avatar billede Morten Professor
20. april 2017 - 13:14 #7
Jubii det her ordnet det
text-indent: 10px;
line-height:46px;
Avatar billede Morten Professor
20. april 2017 - 13:25 #8
Så blev den færdig menuen :o)

Håber resultatet er ok, hvis du har nogen gode ideer så må du meget gerne komme nogen, vil meget gerne lære noget :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester