Rounded corners slicen

[Verwijderd]

Hey

Ik zit een layout gemaakt voor een website en ik wil het nu gaan slicen en omzetten in html en css.
Nu heb ik een vraag.

Ik wil zulke menu's hebben :


Zoals je ziet zijn de hoeken rond en zit er een border omheen. Ik heb op internet gevonden dat ronde hoeken ook met javascript gemaakt kunnen worden. Dit heb ik geprobeerd, maar dit gaat een beetje moeilijk met de border die ik erbij wil hebben, die zijn niet zo mooi.(iemand misschien een goeie manier voor dit?)

Hoe kan ik deze het beste slicen? Dus alleen de ronde hoekjes, of de hele bovenkant met beide hoekjes?
Ook moet er rekening gehouden worden met dat niet alle menu's dezelfde breedte zijn.

Hoe kan ik dit het beste doen?

Bedankt alvast.

[job]

Al eens gegoogled?
http://www.devwebpro.com/...ners-techniques-with-css/

[Verwijderd]

@ hierboven,
ik had die website al gevonden, maar er staat niet echt iets bij wat past bij mijn design.

[job]

Die site is een verzamel site van verschillende technieken.
Ze linken daarbij naar verschillende methoden waaronder: puur css, css met plaatjes en slicen, css + javascript.
Kies je methode, volg de link, lees daar dan de uitleg..
En elke site die het uitlegt heeft daar een voorbeeld bij.

Dan pak je techniek die jij wilt gebruiken, pakt het voorbeeld en pas het aan aan je design.

Als je daar niet mee uitkomt kan je dat natuurlijk gewoon bespreken in dit topic.

[ Voor 43% gewijzigd door job op 29-01-2010 18:21 ]

[RedHat]

Ik gebruik "Curvyrounds" oid om dat te bewerkstelligen. Borders weet ik alleen niet.

Ik kan je de JS wel sturen als je er niet uit komt, stuur dan maar een DM.

Overigens is atm images nog steeds het beste dacht ik.

[ Voor 24% gewijzigd door RedHat op 29-01-2010 18:28 ]

[Verwijderd]

CurvyCorners heb ik al eerder geprobeerd, deze heeft wel een border mogelijkheid, maar in IE moet dan eerst ActiveX geactieveerd worden voordat de hoeken rond worden. Daarom wil ik deze niet gebruiken.
Ik heb echt lang gezocht voor een css/js oplossing, maaar geen goeie gevonden voor mijn situatie.
Dus kunnen jullie mijn vraag beantwoorden uit de startpost?Over het slicen. Tenzij iemand een andere goed werkende css/js oplossing heeft, welke gewoon in de meeste browsers werkt en niet zoiets als ActiveX nodig heeft.

[RobIII]

Ik zou heel dat gedoe achterwege laten; zéker voor een cornertje dat (in jouw voorbeeldplaatje) am-per zichbaar is. Gebruik lekker de CSS eigen border-radius en voor de paar prutbrowsers die het niet ondersteunen: tough luck; komt vanzelf wel een keer goed bij een nieuwe(re) versie. Het is het werk (extra markup en/of js en/of css hacks en/of images) gewoon niet waard. Kosten/baten afweging lijkt me. Het is niet alsof er ingeboet wordt op functionaliteit ofzo.

Ik zou het zo doen:

Cascading Stylesheet:

p {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px
}

Dit is een pure CSS oplossing om te demonstreren hoe het er uit zou zien. Een beetje browser (op IE en Opera na als ik me niet vergis) laat hier nu "rounded corners" zien (voor zover ze überhaupt zichtbaar zijn door de minieme border-radius).
Test
Test
Test
Test

En zo ziet het er uit in een browser die geen rounded corners ondersteunt.
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test

Die laatste 2 (-moz... en -webkit...) zijn ook dan wel 'vendor extensions' maar dan heb je zonder veel gedoe makkelijk borders en maar een minimale "hack".

[ Voor 88% gewijzigd door RobIII op 29-01-2010 21:21 ]

[crisp]

eensch met RobIII - dat doen we hier op Tnet ook. IE kan doodvallen

[Verwijderd]

Bedankt RobIII!
Ik zal het nu toch doen op jouw manier.
Idd beetje teveel werk voor zoiets kleins.
Bedankt!

[MueR]

crisp schreef op vrijdag 29 januari 2010 @ 20:22:
IE kan doodvallen

Amen brother

[Sebazzz]

RobIII schreef op vrijdag 29 januari 2010 @ 19:13:
Die laatste 2 (-moz... en -webkit...) zijn ook dan wel 'vendor extensions' maar dan heb je zonder veel gedoe makkelijk borders en maar een minimale "hack".

En ook alleen maar voor nu. Firefox en Chrome gaat uiteindelijk wel border-radius ondersteunen. De reden dat het voorlopig alleen nog geaccepteerd wordt via een vender extension, is omdat het nog niet stable genoeg is of de implementatie bugged, althans, zoiets was de reden.

[Verwijderd]

Ik denk dat het meespeelt dat het nog altijd geen specification is, maar slechts een recommendation die er nog net niet helemaal door is. De last call period is al voorbij trouwens, het zal niet lang duren eer het een officiële specification is.