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 navbar

Skapad av tok124, 2013-11-06 17:30 i Webbutveckling & Programmering

2 729
8 inlägg
0 poäng
tok124
Visningsbild
P 35 Hjälte 258 inlägg
2013-11-06 17:30
0
Hej!

Jag har gjort en Navigation Bar i CC med rundade kanter. men jag undrar hur man gör för att bara få underkanten att bli rundad. just nu ser de ut såhär:

nav ul
{
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 100px;
border-radius: 20px;
list-style: none;
position: relative;
display: inline-table;
}

och det är ju "border-radius: 20px;" som gör att kanten blir rundad. men hur gör jag egentligen för att bara få underkanten rundad? jag hade tänkt att ha en liten banner typ eller header image eller vad man nu kallar det precis ovanför min navbar så jag vill typ att bilden ska sitta ihopp med min navbar och då ser du konstigt ut om överkanten är rundad
Direktlänk Svara på inlägg Gästbok
Skicka

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

datakille0712
Visningsbild
Hjälte 214 inlägg
2013-11-06 18:13
0

Svar till tok124 [Gå till post]:
border-bottom-right-radius: 20 px;
border-bottom-left-radius: 20 px;

Det finns inga dåliga kläder, bara dåliga förfäder...?

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2013-11-06 20:02
0

Svar till datakille0712 [Gå till post]:
ska testa det. Tack! =)

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2013-11-06 20:07
0
funkade inte =(
jag linkar hela scriptet:

charset "utf-8";

body {
background-color: #000;
font-family: MORPHEUS;
color: red;
}

h1 {
color: red;
padding: 40;
margin: 0;
background-image: url(image/gradient.png);
background-repeat: repeat-x;
}

img {
padding: 30;
margin: 30;
border-radius: 100px;
}

ul {
font-size: 30px;
}

nav ul
{
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 100px;
border-radius: 20px;
list-style: none;
position: relative;
display: inline-table;
}

nav ul:after
{
content: ""; clear: both; display: block;
}

nav ul li {
float: left;
}

nav ul li:hover
{
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

nav ul li:hover a
{
color: #fff;
}

nav ul li a
{
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2013-11-06 20:13
0
jag lyckades hitta det. det var

border-radius: 0px 0px 20px 20px;
Direktlänk Svara på inlägg Gästbok
Skicka
Stox
Visningsbild
Hjälte 194 inlägg
2013-11-06 20:15
0
Jag tror inte att du kan ha border radius på en UL-tagg, men du kan däremot ha det på LI-taggarna innuti.
Typ:

Ett stycke css-kod:

nav ul li {
    border-radius: 5px;
}


Om du däremot bara vill ha det på den första och sista LI-taggen kan du göra så här:

Ett stycke css-kod:
nav ul li:first-child {
   border-bottom-left-radius: 5px;
}

nav ul li:last-child {
   border-bottom-right-radius: 5px;
}

Jag hette tidigare Denocle

Direktlänk Svara på inlägg Gästbok
Skicka
tok124
Visningsbild
P 35 Hjälte 258 inlägg
Trådskapare
2013-11-07 16:36
0

Svar till Denocle [Gå till post]:
Tack! =)

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

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

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