Avatar billede kurdo Novice
23. august 2012 - 01:43 Der er 7 kommentarer og
1 løsning

problemer med css og ul/li

hej

jeg har lavet en menu med ul og li, som ser sådan ud:

<ul class="classnavn">
<li> Home </li>
<li>blabla</li>
<li>blabla</lI>
</ul>

jeg har lidt padding/margin rundt omkring til at holde styre på afstanden af linksene, og det ser rigtig godt ud, på nær den første li. den er alt for langt væk fra venstre side, og ser sådan her ud:

http://cl.ly/image/2W0d1G0l2J1N

som i kan se, så er den røde meget længere væk fra venstre side, end de andre er væk fra hinanden, og det er på trods af de har en padding på 25px.

sådan ser koden ud:


.topmenulinks ul li
{
margin: 0px 0px 0px 5px;

}

.topmenulinks ul li a
{
padding: 11px 25px 10px 25px;
height: 19px;
display: block;
}

kan det fixes ved hjælp af en fancy css kode? :)
Avatar billede DeeDawg Nybegynder
23. august 2012 - 03:12 #1
Her er vi nok nødt til at se lidt mere af din kode, fordi det har umiddelbart intet at gøre med det du viser her. :)
Avatar billede The_Buzz Novice
23. august 2012 - 07:51 #2
Også en URL ku være godt...
Avatar billede mireigi Novice
23. august 2012 - 09:06 #3
Der er margin på listen også. Den skal fjernes.

.topmenulinks ul
{
  margin: 0;
}
Avatar billede kurdo Novice
23. august 2012 - 10:55 #4
jeg har desværre ikke en URL, da den kører lokal, men sagen er den ser sådan her ud:



<div class="topmenu">
<div class="topmenulinks">
<ul class="menutop">
<li> Home </li>
<li>blabla</li>
<li>blabla</lI>
</ul>
</div>
</div>


.topmenu
{
    width: 950px;
    border-radius: 7px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 46px;
    background: #222;
    float: left;
    margin-bottom: 5px;
    border-bottom: 4px solid #0399d9;
}

.topmenulinks

{
    margin: 6px 0px 4px 0px;
    float: left;
}

.topmenulinks ul li
{
    margin: 0px 0px 0px 5px;
    list-style-type: none;
    float:left;
    display: inline-block;

}

.topmenulinks ul li a
{
    padding: 11px 25px 10px 25px;
    height: 19px;
    display: block;
}


jeg har selv prøvet at skrive lidt i html koden lige efter "<div>" og der er det helt fint, og teksten er helt ude til venstre, så fejlen ligger i <ul>.
jeg tænker på det er de "prikker" der er når man laver en ul, som man kan fjerne ved list-style-type: none; at selvom de er fjernet, så er deres plads alligevel fyldt op.


en sidste ting: jeg har prøvet at fjerne ALLE css koderne der vedrører menuen, og der er stadig et mellemrum..
Avatar billede mireigi Novice
23. august 2012 - 12:19 #5
Se mit tidligere indlæg.
Avatar billede olebole Juniormester
23. august 2012 - 14:36 #6
<ole>

Brug koden fra #3 og udvid gerne med margin:

.topmenulinks ul {
    padding: 0;
    margin: 0;
}

/mvh
</bole>
Avatar billede kurdo Novice
24. august 2012 - 00:46 #7
Hejsa

beklager har været så dum, troede jeg havde prøvet det, men åbenbart ikke. Mireigi havde ret, der skulle en padding: 0px; på.

smid et svar, og endnu en gang tak. :)
Avatar billede mireigi Novice
24. august 2012 - 08:33 #8
Velbekomme :)
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





White paper
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis