Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Css separator

Skapad av tok124, 2014-08-13 23:27 i Webbutveckling & Programmering

3 439
12 inlägg
1 poäng
tok124
Visningsbild
P 35 Hjälte 258 inlägg
2014-08-13 23:27
0
Hej,

Jag skulle vilja lägga till en sepparator i min css för min navigation bar men de funkar aldrig så som jag vill. Jag vill ha en separator före och efter varje link. Men när jag gör de så blir de ingen sepparator efter sista linken. och om jag använder before och after i css så blir de bara dubbla sepparators, Och ja jag vet varför de blir så. Men hur ska jag göra för att få min sepparator även efter sista linken? Jag laddade upp min navbar till js fiddle så ni kan se hur de ser ut

http://jsfiddle.net/fu52yyyn/

Som ni ser så blir de ingen sepparator efter sista linken...
Direktlänk Svara på inlägg Gästbok
Skicka

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

pr0n
Visningsbild
P Hjälte 5 588 inlägg
2014-08-14 00:28
0
Svar till tok124 [Gå till post]:
Kolla upp hur du använder last-child i CSS så ska det nog lösa sig.
http://www.w3schools.com/cssref/sel_last-child.asp

Ingen status

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2014-08-14 00:38
0

Svar till pr0n [Gå till post]:
Tack, Testade det precis men det verkade inte funka. om jag lägger till det så försvinner bara hela bakgrunden.

Direktlänk Svara på inlägg Gästbok
Skicka
Karlsson
Visningsbild
P 30 Arvika Hjälte 499 inlägg
2014-08-14 00:56
0
Kör border-right: 1px solid red; på li och sedan border-right: none; på li:last-child. Byt ut 1px mot din önskade bredd och red mot din önskade färg (namn, hex, rgba eller vad du nu föredrar). Ska du vrångt ha en bild som separator kan du köra med border-image.

Tillägg av Karlsson 2014-08-14 01:03

http://codepen.io/enjikaka/pen/xmKHD

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2014-08-14 02:40
0

Svar till Karlsson [Gå till post]:
okej, Men de blir ju fortfarande inte en sepparator efter sista linken. Instället så försvann den första



Tillägg av tok124 2014-08-14 02:57

Om jag tar bort last-child border-none så blir de en border på sista så som jag vill ha det. Men då istället så blir de ingen border på sista så jag testade att ändra från last-child till first child och lägga till border-left:1px solid red; men de funkade inte häller. De händer inget. Verkar bara funka på last-child av nån konstig anledning

Direktlänk Svara på inlägg Gästbok
Skicka
Karlsson
Visningsbild
P 30 Arvika Hjälte 499 inlägg
2014-08-14 07:40
0

Svar till tok124 [Gå till post]:
Man brukar vanligtvis ta bort separatorn till vänster på första länken och till höger på sista. Men vill kvar den även på dessa ställen gör du helt enkelt om :last-child i mitt exempel till :first-child och ändrar från border-right till border left; http://codepen.io/enjikaka/pen/zcjdG
Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2014-08-14 13:05
0

Svar till Karlsson [Gå till post]:
Åh fan, De funkade. Jag försökte göra samma sak men för mig funkade det inte även fast jag skrev likadant :o Vet inte om de beror på att de inte uppdaterades bara eller vad du nu kan ha varit som gjorde att de inte funkade för mig. Aja... Huvudsaken är iaf att de funkar nu. Har dock lite svårt att få en bild border istället för en vanlig border. Kollade lite på w3schools hur man gör. Men har inte lyckats klura ut ut man får den på högra/vänstra sidan av linken

Direktlänk Svara på inlägg Gästbok
Skicka
ImThePsycho
Visningsbild
P 30 Mölndal Hjälte 3 092 inlägg
2014-08-14 15:14
1

Svar till tok124 [Gå till post]:
Forum image

Kastar sten på månen och skrattar åt min kreativitet ||

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2014-08-14 17:11
0

Svar till ImThePsycho [Gå till post]:
Haha, Ja du... Den var ju lite rolig. Tyvär var den inte till så mycket hjälp...

Direktlänk Svara på inlägg Gästbok
Skicka
Doodlez
Visningsbild
P Hjälte 589 inlägg
2014-08-15 02:04
0
Ett stycke css-kod:
.navlist li {
    position: relative;
    background:url( http://80.217.81.130/Website/images/Separator.png) left top no-repeat;
    padding:0;
}
.navlist li:last-child:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 2px;
    height: 100%;
    background:url( http://80.217.81.130/Website/images/Separator.png) no-repeat;
}

http://jsfiddle.net/fu52yyyn/2/

La davi, we like to party!

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2014-08-15 14:21
0

Svar till Doodlez [Gå till post]:
Tack, Den funkade perfect ! :)

Direktlänk Svara på inlägg Gästbok
Skicka
Doodlez
Visningsbild
P Hjälte 589 inlägg
2014-08-15 15:34
0

Svar till tok124 [Gå till post]:
Härligt :)

La davi, we like to party!

Direktlänk Svara på inlägg Gästbok
Skicka

Forum » Datorer & IT » Webbutveckling & Programmering » Css separator

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Rubrik

Inlägg

Fet Kursiv Spoiler Bild Film Kod Undersökning

Förhandsgranska Spara

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons