Rounded borders in HTML

[Acolyte]

je ziet het vet vaak: zo'n tabelletje met afgeronde hoeken. Ik heb in fotosoep al zoiets gemaakt en geknipt in verschillende hoeken, allemaal afgerond. Maar hoe doe je die dingen dan nu in een html bestand? Met een tabel met hele smalle en kleine rijen/kolommen aan de zij/bovenkant, ja ok. Maar hoe precies?

Ik heb een pngtje hier gestald met daarin de textboxjes al voorgesoept. Mijn bedoeling is dus om dat uiteindelijk gewoon in html te kunnen doen, die tekst. Wie kan mij helpen daarmee?

[Tsunami]

Heb je uberhaupt de titel van je topic een keer in Google ingevoerd? Lijkt me toch zat over te vinden...

[Acolyte]

Tsunami schreef op woensdag 14 december 2005 @ 19:53:
Lijkt me toch zat over te vinden...

Over 'het niet lukken' van rounded borders maken misschien wel, maar bij mij lukt het maken ervan wel. Alleen ik versta de kunst van het knippen nog niet die nodig is om het in een html (tabel) te gebruiken..

[Koetjeboe]

http://www.alistapart.com/articles/customcorners/ dit is ook een leuke manier van ronde hoekjes.

Als je in de source van een voorbeeld kijkt, en dat de plaatjes laat kun je zien hoe je moet knippen: http://www.alistapart.com/d/customcorners/step5.html

[chris]

Je kan geen ronde hoeken in je html definiëren. Wel in CSS, maar daar is nauwelijks ondersteuning voor. Wat je dus kan doen (oude stijl) is een tabel maken van 3x3, met linksbovenin het linkerhoekje als plaatje in een cel met vaste breedte. Ook voor de andere hoekjes.

Het ligt er maar net aan wat je wil: dit gaat goed werken in veel browsers, maar het is niet echt hip: tegenwoordig moet je een minimale markup hebben. Je zou zo iets kunnen maken met b.v. javascript die hetzelfde doet maar dan door element in de DOM te creëeren ofzo.

Dus: hecht je waarde aan heel erg mooie markup, of moet het vooral praktisch zijn en is markup niet van belang? Dan is de oplossing hierboven misschien wel handig. Weet je ook al of je tabellen/divjes/whatever een vaste breedte krijgen?

[nick_haak]

@ts, je wilt de boel gesliced hebben? zodat dit een html pagina kan worden? momentje waar kan het zo naar toe gestuurd worden?

[Acolyte]

nick_haak schreef op woensdag 14 december 2005 @ 20:09:
@ts, je wilt de boel gesliced hebben? zodat dit een html pagina kan worden? momentje waar kan het zo naar toe gestuurd worden?

Nou het gaat mij erom dat ik tekstvakken hiermee kan maken met die ronde hoeken. Dus dat ik gewoon niet voor elke box weer photoshop in moet duiken om een box op maat te maken. De randen zijn altijd hetzelfde en de hoeken ook, dus als ik die op de manier als chris beschrijft kan implementeren, heel graag. Hip of niet maakt me geen donder uit, ik stuur het niet op naar het W3C ofzo. Gewoon een stom project voor school maar dit leek me wel leuk.

[nick_haak]

ik heb het plaatje even gesliced (het knippen waar je het over had in de startpost), als je een mailadres hebt waar ik een zipje naar toe kan sturen, komt hij er zo aan...

[GX]

Aan je kolommen te zien zijn ze altijd even breed; dan is dit een eitje om te implementeren in de css van je website met background-image; kijk even op w3c en alistapart hoe je dat het beste aan kan pakken.

Succes.

[Acolyte]

nick_haak schreef op woensdag 14 december 2005 @ 21:09:
ik heb het plaatje even gesliced (het knippen waar je het over had in de startpost), als je een mailadres hebt waar ik een zipje naar toe kan sturen, komt hij er zo aan...

[fixed]

[ Voor 6% gewijzigd door Acolyte op 15-12-2005 16:20 ]

[nick_haak]

sorry voor de late reactie, mailtje komt er aan.

Nick

[OkkE]

Misschien heb je ook iets aan deze pagina, daar leggen ze uit hoe je rounded corners maakt zonder tabellen.
http://24ways.org/advent/broader-border-corners

[sopsop]

Deze is ook wel cool: Nifty

[ Voor 10% gewijzigd door sopsop op 15-12-2005 13:53 ]

[Acolyte]

@nick_haak: cool, thx! Ik zie in de code dat je ImageReady hebt gebruikt. Ik heb dat ook. Kun je me uitleggen hoe je dat daarin doet? want het enige wat ik nu nog hoef te doen in principe is het middelse figuurtje uit die kader te verwijderen en daar mijn eigen tekst neergooien. Geweldig!

[Reinier]

boppert schreef op donderdag 15 december 2005 @ 13:53:
Deze is ook wel cool: Nifty

Dat vind ik echt een cool alternatief, die ga ik asap op de site van m'n vriendin gebruiken!

[nick_haak]

Acolyte schreef op donderdag 15 december 2005 @ 16:22:
@nick_haak: cool, thx! Ik zie in de code dat je ImageReady hebt gebruikt. Ik heb dat ook. Kun je me uitleggen hoe je dat daarin doet? want het enige wat ik nu nog hoef te doen in principe is het middelse figuurtje uit die kader te verwijderen en daar mijn eigen tekst neergooien. Geweldig!

Graag gedaan
ik heb het gedaan in photoshop CS2 (in oudere versies kan het ook), weet niet waarom de code aangeeft dat het "imageready slices" zijn.

ik heb het als volgt gedaan:
- open het plaatje waarvan je een html pagina wil maken
- selecteer het slice gereedschap (sneltoets: K)
- nu kan je steeds rechthoekige vakjes selecteren door je afbeelding heen, zo selecteer je een hoekje zo krap mogelijk, dat de ronde hoek er net in past, maar zo min mogelijk ruimte overhoudt.
- doe dit ook met de randen, selecteer de randen van je kaders.

- vervolgens ga je naar bestand > opslaan voor web.
daar kan je kiezen hoe je je bestanden wil opslaan (jpg, gif....) en in welke kwaliteit.
zodra je op opslaan klikt, kan je aangeven hoe je html bestand moet gaan heten, de plaatjes komen in een submap genaamd images, of afbeeldingen te staan.

sla je bijvoorbeeld de html pagina op in C:\html, dan komen je plaatjes in C:\html\images of C:\html\afbeeldingen (afhankelijk of je een Nederlandse of Engelse photoshop hebt).

als het niet lukt, hoor ik het wel

Nick

[Cartman!]

de manier hoe ik altijd zoiets maak :

code:

<div class="top">[img]"topimage.gif"[/img]</div>
<div class="content">hier in je meuk enzo :)</div>
<div class="bottom">[img]"bottomimage.gif"[/img]</div>

Zonder tables dus

In je css geef je natuurlijk de classes aan die gebruikt zijn met de juiste height en width.
Je kunt op je content div een padding gooien zodat de tekst er netjes inpast. Als je een pixelrandje hebt ipv van een complete kleur als achtergrond dan geef je de content div border-left:1px solid #000000; mee.

[ Voor 25% gewijzigd door Cartman! op 16-12-2005 10:31 ]

[Reinier]

Op 456 Berea Street staan ook nog een paar leuke alternatieven.

[Acolyte]

nick_haak schreef op donderdag 15 december 2005 @ 18:39:
[...]


Graag gedaan
ik heb het gedaan in photoshop CS2 (in oudere versies kan het ook), weet niet waarom de code aangeeft dat het "imageready slices" zijn.

[...]

als het niet lukt, hoor ik het wel

Nick

Het is prima gelukt . Ik heb het met IR gered en het werkt idd wel . Maar ik heb het inmiddels anders opgelost. Maar goed, ik ben er wel veel wijzer door geworden en das natuurlijk ook wat waard

[nick_haak]

mooi dat het gelukt is
dit soort dingen kunnen altijd nog van pas komen denk ik...
hoe heb je het nu opgelost?

[Acolyte]

Gewoon minder moeilijke layout gemaakt nog steeds mooi vind ik zelf, maar minder moeilijk
Laat het nog wel een keer zien als het af is.