webForumDet fria alternativet

tabell med rundade kanter

HTML & CSS

13 svar · 705 visningar · startad av eriks

Medlem sedan apr. 20011 418 inlägg
Frågan#1

Hej,

Jag skulle vilja göra en tabell med rundade kanter, att använda till en meny, t.ex. som de har på https://www.tain.se

Jag hade velat göra det med table border="1" edges="rounded" , men när jag nu inte känner till några sådana taggar undrar jag, vilket är det smidigaste viset att få rundade kanter på? Finns det genvägar eller är det bilder i alla fyra hörnen som gäller?

Tack på förhand

Mvh Erik

Medlem sedan mars 20021 239 inlägg
#2

Det där brukar väldigt många fråga om här... Har du försökt söka innan du postade tråden? hittade bland annat denna i den eminenta sökfunktionen: http://www.webforum.nu/showthread.php?t=127374&highlight=rundade+kanter

Det kanske kan vara nåt?

Medlem sedan dec. 20042 245 inlägg
#3

Vad skulle du med tabellen till nu igen?

Medlem sedan apr. 20011 418 inlägg
#4

Tack!

Men hur fungerar detta egentligen? Om jag inte vill ha en speciell bakgrundsfärg (exemplet använder ju vit), kan man skriva transparent på något vis då? Hade gärna också förstorat rundningen, men har inte lyckats efter några test. Någon som har gjort det?

Mvh Erik

Medlem sedan apr. 2006409 inlägg
#5

testa att skriva in följande i classerna:
.dinaclass {
opacity: 0.5;
filter: alpha(opacity=50);
samt margin: hit och dit enlikt niftcorners;
}

Vet dock inte vilket stöd dessa transparenser har, men du kan ju testa i alla fall.

Medlem sedan apr. 2006409 inlägg
#6

Eh, just det, skriv in en färg som bakgrundsfärg eller bakgrundsbild i classen också. Du vet:
.dinaclasser {
background: #666;
resten: hit och dit;
}

Så blir färgen eller bilden transparent.

Medlem sedan apr. 20011 418 inlägg
#7

Hmm,

Nu är det tyvärr så att jag är inte helt 100 på css.. Ska jag alltså skriva in detta i min class (den som heter nifty i nifty-corner exemplet)?? Det händer ingenting när jag gör det, förutom att jag kan ändra bakgrund där texten står. Hänvisar ni till nifty-exemplet, eller är detta något annat?

Medlem sedan apr. 2006409 inlägg
#8

Hur ser din css ut då?

Medlem sedan apr. 20011 418 inlägg
#9

Precis som den nifty-corner: http://www.html.it/articoli/nifty/nifty1.html

Mvh Erik

Medlem sedan apr. 2006409 inlägg
#10

Testa att göra en div med den bakgrundsfärg du vill ha, samt ge den transparens. Läg sendan en div över den med den text osv du vill ha där. Sen är det ju bara att göra en eller flera gif:ar som du placerar i hörnen.

Medlem sedan apr. 20011 418 inlägg
#11

Ok, ville undvika gif:ar i hörnen...

Nifty-corners är bra, och har lyckats ändra bakgrunden mha:
transparent url("bg_body.gif")

Två frågetecken står dock kvar.

1. Hur ändrar man radiens storlek på cirklarna.. Har testat men kommer inte fram till något!

2. Hur gör man en fixerad höjd? Om jag skiver height:300px; i nifty diven, så hänger nämligen inte botten med... Och då ser det ju helt tokigt ut.

Red.

Medlem sedan apr. 2006409 inlägg
#12

Okej, men har du någon kod, man kan få se. Eller kanske rent av en länk?

Medlem sedan apr. 20011 418 inlägg
#13

Kör med exemplet från nifty-corners. http://www.html.it/articoli/nifty/nifty1.html

Medlem sedan jan. 2000978 inlägg
#14

Ditt exempel är gammalt.
Läs den här artikeln istället: http://www.html.it/articoli/niftycube/index.html
Det finns tre olika storlekar på hörnen. Det går även att välja en fast höjd på boxen.

Det går även att ange att man vill ha transparent bakgrund...
Så skippa alla GIF-bilder!

256 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)
122 ms — ändringar (db)