[CSS] Round borders, met images of doormiddel van JS ?

[Verwijderd]

Ik ben al enige tijd bezig op een goede maar toch ook simpele manier boxen te maken met ronde hoeken, rounded corners dus.

Hier is veel over te vinden, met achtergrond images, puur CSS of met javascript.

Ik streef er naar om 1 enkele div te kunnen gebruiken:

code:

<div class="Box">
Content
</div>

Dit is een meest fijne en overzichtelijke manier natuurlijk, echter hier komt Javascript bij kijken en dat is traag vind ik, je ziet eerst een square box waarna het javascript geladen is en de hoeken rond worden.

http://www.curvycorners.net/

Beetje jammer.

Je komt hierdoor snel uit op CSS + achtergrond images voor de hoeken, of Puur CSS.

Puur CSS heeft een nadeel dat niet alle browsers dit hetzelfde oppikken en je dus flink aan moet rommelen het lekker werkend te krijgen.

Tevens is het zo dat je bij CSS varianten vaak dit in de code krijgt waar de content moet komen te staan:

code:

<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div></div></div></div></div> 

of


<DIV class=rtextbox><SPAN class=rtop><SPAN class=r1></SPAN><SPAN class=r2></SPAN><SPAN class=r3></SPAN><SPAN class=r4></SPAN></SPAN><DIV class=rtextboxinside>

CONTENT

</DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>

Wat de code weer onoverzichtelijk maakt.


Ik zou er voor opteren om een CSS versie te hebben zoals de "rommelige" code hierboven, echter gebruiken maken van één div welke uiteindelijk alles include. Met of zonder achtergrond plaatjes maakt met dan weinig uit eigenlijk, ik ga dan wel voor een versie waar de hoeken alleen images zijn.

De vraag is: Kan dit ?

Het antwoord is waarschijnlijk, nee, echter zal het misschien wel kunnen, maar dan in combinatie met JavaScript ?

Een bron welke ik onderandere gebruikt heb is:

http://www.cssjuice.com/2...ners-techniques-with-css/

[Harm]

In css zit de mogelijkheid om afgeronde hoeken te maken (zoek eens naar 'border radius'), doe het voor de browsers die het aankunnen met css en de browsers die dat niet kunnen met Javascript?

[Noork]

Ik zou het met afbeeldingen doen, en over een aantal jaar, wanneer alle browsers dit ondersteunen, overstappen naar de css methode. Javascript (Curvycorners etc) heb ik zelf ook aleens getest. Het ziet er mooi uit, maar is best traag en voegt een extra padding toe, waardoor de layout soms wordt verknoeit.

[Verwijderd]

Harm schreef op maandag 05 mei 2008 @ 12:53:
In css zit de mogelijkheid om afgeronde hoeken te maken (zoek eens naar 'border radius'), doe het voor de browsers die het aankunnen met css en de browsers die dat niet kunnen met Javascript?

Dank denk ik dat plaatjes toch een betere optie is, zoals hierboven ook al wordt vermeld.

De vraag is, kan ik dit oplossen met uiteindelijk één div welke ik als content div gebruik.

Misschien kan ik iets met PHP en replace doen.

[Noork]

Ik zou gewoon een header-, content- en footer-div maken. In de header en footer zet je dan een afbeelding met afgeronden hoekjes. Van de content blijf je af. En bij een variabele breedte moet je de header en footer ook nog eens opdelen in een linker en rechter div zodat de boel meeschaalt.

PHP heeft hier niks mee van doen.

[Verwijderd]

Noork schreef op maandag 05 mei 2008 @ 13:20:
Ik zou gewoon een header-, content- en footer-div maken. In de header en footer zet je dan een afbeelding met afgeronden hoekjes. Van de content blijf je af. En bij een variabele breedte moet je de header en footer ook nog eens opdelen in een linker en rechter div zodat de boel meeschaalt.

indeed, dat is het idee.

PHP heeft hier niks mee van doen.

PHP zou een rol kunnen spelen in het gebruik van 1 div.

[moozzuzz]

Het kan wellicht efficienter, maar deze gebruik ik soms:

HTML:

<div class="teaser">
<h3>Eerste Hulp Kick op 24 mei!</h3>

<p><i>EHBO voor jongeren tussen 10 en 12 jaar die graag anderen helpen.</i></p>

<p>Deze <b>GRATIS</b> cursus gaat door in de gebouwen van het Rode Kruis (Bomastraat 10, 9000 Gent). Elke deelnemer krijgt een handig boekje met alle informatie en een heus brevet.</p>

<p>Inschrijven kan tot uiterlijk 16 mei! Schrijf zo snel mogelijk in want het aantal plaatsen is beperkt!</p>

<div><p>voor meer informatie: <a href="/3documenten/2008-05-24_-_eerstehulpkick.pdf" title="Download het inschrijvingsformulier hier">klik hier</a></p></div>
</div>

Cascading Stylesheet:

#content .teaser {
    margin: 0px 0px 0px 69px;
    padding:0px 0px 0px -11px;
    background: #fff url("/2pix/z-test/tsr-l.gif") top left no-repeat;
    font-size: small;
}
#content .teaser h3 {
    background: url("/2pix/z-test/tsr-r.gif") top right no-repeat;
    margin: 0px 0px 0px 11px;
    padding: 8px 0px 5px 0px;
}
#content .teaser p {
    margin:  0px 0px 0px 0px;
    padding: 5px 11px 5px 11px;
    border:       1px solid #C50009;
    border-width: 0px 1px;
    background:   #fff;
}
#content .teaser div {
    margin:0px 0px 0px 0px;
    padding-left:11px;
    background: url("/2pix/z-test/tsr-l.gif") bottom left no-repeat;
}
#content div.teaser div p {
    position: relative;
    margin:0px 0px 0px 0px;
    padding: 5px 11px 10px 0px;
    background: url("/2pix/z-test/tsr-r.gif") bottom right no-repeat;
    border: none;
    text-align: center;
    font-size: small;
}

[Verwijderd]

Dat lijkt er zeker meer op.

heb je wellicht een voorbeeld van een van de gifs ?

Deze heb ik inmiddels gevonden

Je zit alleen wel met een stretch probleem denk ik.

Ik ga denk ik toch voor de 4 hoekimages met borders op layers,

Nu alleen kijken of ik dat allemaal in 1 layer krijg.

[ Voor 57% gewijzigd door Verwijderd op 05-05-2008 15:52 ]

[iain]

Ik ben zelf een voorstander van achtergrond plaatjes met meerdere divs. En ik laat daar mijn serverside programmeertaal het zware werk voor doen.

Concreet betekent dat:

HTML:

<div class="box">
  <div class="border">
    <div class="border2">
      Lorem ipsum
    </div>
  </div>
</div>

Ik ga hier van een vaste breedte uit, dat betekent dat je de volgende css hebt:

Cascading Stylesheet:

.box     { background: url('/images/border-top.png') top left no-repeat; }
.border1 { background: url('/images/border-bottom.png') bottom left no-repeat; }
.border2 { background: url('/images/border-sides.png') top left repeat-y; }

Aangezien de html tamelijk vervelend is om te typen gebruik ik serverside vaak een truukje.Haml helpt bijvoorbeeld enorm:

Haml:

.box
  .border1
    .border2
      Lorem ipsum

of ik gebruik een partial/layout in Ruby on Rails:

ERB:

<% render :layout => :box do %>
  Lorem Ipsum
<% end %>

Ik ben niet zo'n voorstander van border-radius in css, aangezien IE het nog steeds niet toestaat. En daar moeten we helaas wel rekening mee houden.

[Zerora]

Je zou nog even op GoT kunnen zoeken naar een oplossing. Er zijn genoeg topics geweest over dit onderwerp.

- [search=CSS afgeronde hoeken]
- [search=CSS rounded corner]

[Verwijderd]

iain schreef op maandag 05 mei 2008 @ 15:59:
Ik ben zelf een voorstander van achtergrond plaatjes met meerdere divs. En ik laat daar mijn serverside programmeertaal het zware werk voor doen.

Concreet betekent dat:

HTML:

<div class="box">
  <div class="border">
    <div class="border2">
      Lorem ipsum
    </div>
  </div>
</div>

Ik ga hier van een vaste breedte uit, dat betekent dat je de volgende css hebt:

Cascading Stylesheet:

.box     { background: url('/images/border-top.png') top left no-repeat; }
.border1 { background: url('/images/border-bottom.png') bottom left no-repeat; }
.border2 { background: url('/images/border-sides.png') top left repeat-y; }

Aangezien de html tamelijk vervelend is om te typen gebruik ik serverside vaak een truukje.Haml helpt bijvoorbeeld enorm:

Haml:

.box
  .border1
    .border2
      Lorem ipsum

of ik gebruik een partial/layout in Ruby on Rails:

ERB:

<% render :layout => :box do %>
  Lorem Ipsum
<% end %>

Ik ben niet zo'n voorstander van border-radius in css, aangezien IE het nog steeds niet toestaat. En daar moeten we helaas wel rekening mee houden.

Ja dit is zoals ik het ook meestal doe, alleen zit je aan een vaste breedte en wil ik eigenlijk alles dynamisch houden zodat ik niet voor iedere box andere css + plaatjes aan hoef te maken.

Je idee is goed, ik worstel hier ook mee, alleen dat "flexibele" zit er niet in.

Rakkerzero schreef op maandag 05 mei 2008 @ 16:07:
Je zou nog even op GoT kunnen zoeken naar een oplossing. Er zijn genoeg topics geweest over dit onderwerp.

- [search=CSS afgeronde hoeken]
- [search=CSS rounded corner]

Tja, zit niet bij zoals ik het helemaal wil

[moozzuzz]

Verwijderd schreef op maandag 05 mei 2008 @ 15:45:
Je zit alleen wel met een stretch probleem denk ik.

Enkel fixed width, maar hoogte is variabel. Als je de afbeeldingen uitgerekt genoeg maakt, (vb 2000px) moet dat ook wel lukken ;^)

[ Voor 17% gewijzigd door moozzuzz op 05-05-2008 16:26 ]

[Verwijderd]

moozzuzz schreef op maandag 05 mei 2008 @ 16:24:
[...]

Enkel fixed width, maar hoogte is variabel. Als je de afbeeldingen uitgerekt genoeg maakt, (vb 2000px) moet dat ook wel lukken ;^)

Ja dat klopt, ik vraag me alleen af of dit DE oplossing is.

Ik heb dit al vaker overwogen mar kom dan snel weer uit op een border opgebouwd uit een 1 pixel image.

[BalusC]

Ben je bekend met 'nifty corners' ?

http://www.html.it/articoli/nifty/index.html

[Verwijderd]

BalusC schreef op maandag 05 mei 2008 @ 16:55:
Ben je bekend met 'nifty corners' ?

http://www.html.it/articoli/nifty/index.html

Yep, niet echt mijn favoriet, er zijn wel andere versies van maar je zit ook aan JS vast.

Dit heb ik werken trouwens:

http://www.scratch99.com/...nded-text-boxes-in-posts/

Nu wil ik er nog, kleine challenge, een rounded border omheen frutselen.

Dit kan, ik heb het al gezien ergens, de vraag is alleen, ga ik deze divs dupliceren en ze in elkaar plaatsen ?

[Borizz]

Misschien is het volgende artikel iets voor je: Simple Rounded Corner CSS Boxes. Het maakt gebruik van een enkel image en afhankelijk van de content in je box zit het met de semantiek ook wel goed.

Je kan het aantal elementen dat nodig is ook nog terug brengen indien je een fixed width hebt voor je boxen (met ronde hoeken).

[Verwijderd]

Borizz schreef op maandag 05 mei 2008 @ 22:01:
Misschien is het volgende artikel iets voor je: Simple Rounded Corner CSS Boxes. Het maakt gebruik van een enkel image en afhankelijk van de content in je box zit het met de semantiek ook wel goed.

Je kan het aantal elementen dat nodig is ook nog terug brengen indien je een fixed width hebt voor je boxen (met ronde hoeken).

Met mijn vorige post ben ik voor 95% waar ik wezen wil.

Nu alleen nog een round border er omheen, en ik ben helemaal gelukkig.

Ik heb al wat gespeeld met deze div set in dezelfde div set alleen met andere kleuren, no go yet.

[Verwijderd]

Ik loop tegeb een vreemd probleem aan met de volgende code:

code:

<DIV class=rtextbox><SPAN class=rtop><SPAN class=r1></SPAN><SPAN class=r2></SPAN><SPAN class=r3></SPAN><SPAN class=r4></SPAN></SPAN><DIV class=rtextboxinside>

CONTENT

</DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>

Als ik dit met de CSS uit onderstaand document (waar de bovenstaande div-set ook uti komt) gebruik in een aparte div om het hele zaakje te positioneren op een pagina, dan raak ik de bovenkant met afgeronde hoeken kwijt.

http://www.scratch99.com/...nded-text-boxes-in-posts/

Ik heb al geprobeers de "omliggende" div een goede padding mee te geven en dergelijke, maar hoe dan ook ben ik de half ronde bovenkant kwijt.

Haal ik deze hele set uit die positie-div dan heb ik ook bovenin weer afgeronde hoeken.

Dit treedt alleen op in IE6 trouwens.

Waar zou hem dat in kunnen zitten ?

.

[Bosmonster]

Waarom gebruik je nu niet die methode die Borizz. Stuk eenvoudiger, netter en overall beter.

Ondanks dat je zei dat Nifty niet je favoriet is (wat ik met je eens ben), gebruik je die nu toch

[ Voor 36% gewijzigd door Bosmonster op 07-05-2008 20:51 ]

[Verwijderd]

Bosmonster schreef op woensdag 07 mei 2008 @ 20:50:
Waarom gebruik je nu niet die methode die Borizz. Stuk eenvoudiger, netter en overall beter.

Ik kan die oplossing gewoonweg niet gebruiken, niet flexibel genoeg.

Ik heb het probleem al opgelost, was iets met positie-type van de div/container.

Voor de rest is die imageloze round border prima bruikbaar hoor !

[Borizz]

Verwijderd schreef op woensdag 07 mei 2008 @ 20:52:
[...]


Ik kan die oplossing gewoonweg niet gebruiken, niet flexibel genoeg.

Ik heb het probleem al opgelost, was iets met positie-type van de div/container.

Voor de rest is die imageloze round border prima bruikbaar hoor !

Tsja geef mij maar een (enkel) image dan die extra rotzooi in mijn html code, zolang rounded borders nog niet in de meerderheid van de browsers ondersteunt wordt. Maar ieder zijn eigen keus / mening.

[Verwijderd]

Borizz schreef op woensdag 07 mei 2008 @ 21:52:
[...]

Tsja geef mij maar een (enkel) image dan die extra rotzooi in mijn html code, zolang rounded borders nog niet in de meerderheid van de browsers ondersteunt wordt. Maar ieder zijn eigen keus / mening.

IE6, IE7, FF, en Opera ondersteunen dit prima.

Welke fancy browsers wil jij gebruiken dan ?

[Borizz]

Ik zeg toch niet dat er browsers zijn die het niet ondersteunen, maar dat je (een hoop) extra html elementen gebruikt voor een paar ronde hoekjes. Dat is alles wat ik wil zeggen.

[Verwijderd]

Borizz schreef op woensdag 07 mei 2008 @ 22:51:
Ik zeg toch niet dat er browsers zijn die het niet ondersteunen, maar dat je (een hoop) extra html elementen gebruikt voor een paar ronde hoekjes. Dat is alles wat ik wil zeggen.

Waarna ik niet meer over het stretchen link <> rechts en boven <> onder hoef na te denken.

Scheelt ook weer een heleboel plaatjes

[curry684]

Verwijderd schreef op woensdag 07 mei 2008 @ 17:23:
Ik loop tegeb een vreemd probleem aan met de volgende code:

code:

<DIV class=rtextbox><SPAN class=rtop><SPAN class=r1></SPAN><SPAN class=r2></SPAN><SPAN class=r3></SPAN><SPAN class=r4></SPAN></SPAN><DIV class=rtextboxinside>

CONTENT

</DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>

Compleet afgezien van de inhoud he is het om een hele hoop redenen extreem aan te raden om al je elements lowercased te houden en braaf double quotes om je attribute values te zetten. Daarnaast zou ik als de semantiek je blijkbaar zo hoog zit geen span gebruiken voor een semantiekloos blok op een pagina maar een div - een span is een inline element terwijl je hem hier expliciet als block gebruikt.

[Verwijderd]

curry684 schreef op donderdag 08 mei 2008 @ 02:09:
[...]

Compleet afgezien van de inhoud he is het om een hele hoop redenen extreem aan te raden om al je elements lowercased te houden en braaf double quotes om je attribute values te zetten. Daarnaast zou ik als de semantiek je blijkbaar zo hoog zit geen span gebruiken voor een semantiekloos blok op een pagina maar een div - een span is een inline element terwijl je hem hier expliciet als block gebruikt.

Die quotes had ik zelf al aangepast, tevens de lowercase. W3 gaat dit namelijk niet leuk vinden. Ik snapte persoonlijk ook niet waarom de maker hiervan dit deed, ik denk om onderscheid te maken in zijn code.

Span naar div is zeker een goed idee.

Toch bedankt voor de opmerking welke wel op zijn plaats is

[Verwijderd]

Heeft iemand nog een idee hoe ik onderstaand kan oplossen ?



Dit gebeurd wanneer ik de divs in een <td> plaats, wanneer ik alleen layers gebruik waar deze in staan heb ik dit niet.

Een layer in een cell met in deze layer deze hele set heeft ook geen zin, zelfde output als in het plaatje.

Lijkt een soort van cell padding/spacing maar dan op layers

[Verwijderd]

Heeft iemand trouwens nog een idee om een echte border (bijvoorbeeld 3px) om een rounded border box heen te zetten ?

De box die werkt prima, bovenstaan probleem was niet echt een issue, echter zou ik ook nog wel een rounded border om een rounded box willen zetten.

[Bosmonster]

Onderdeel van je afbeelding maken?

[Verwijderd]

Bosmonster schreef op dinsdag 20 mei 2008 @ 13:56:
Onderdeel van je afbeelding maken?

Ik gebruik geen afbeelding, maar puur CSS based round borders doormiddel van span.

Ik denk dat ik voor die extra border inderdaad aan een plaatje vast zit.

[TeeDee]

Dus bottomline: gebruik de aangedragen oplossing van moozzuzz of Borizzz. De oplossing van moozzuzz heeft ook een revisited variant.