[CSS] Ronde hoeken maken om DIV's met CSS

[Verwijderd]

Mensen,

Ik ben bezig met het ontwerp van een nieuwe site en ik loop vast op een waarschijnlijk makkelijk op te lossen probleem.

Ik wel mijn site op delen in een aantal vlakken d.m.v CSS. Ik heb een aantal DIV's gemaakt welke over het algemeen absoluut gepositioneerd zijn. Geen problemen tot dusver.

Nu wil ik dat deze div's rond hoeken krijgen, zoals je dat tegenwoordig op veel sites ziet. Ik weet niet hoe ik dit voor elkaar moet krijgen met CSS. Ik weet dat het kan met puur tabellen, maar met tabellen binnen de DIV's krijg ik het weer niet voor elkaar.

Weet iemand hoe je met puur CSS de hoeken van een DIV kan afronden?

Een voorbeeld van wat mijn bedoeling is staat hier http://www.proxi.nl/Algemeen/index.php

Laten we geen dicsussie starten over de pro's en contra's tussen tabellen en CSS, ik kies voor CSS.

[Rhapsody]

volgens mij is dat niet mogelijk.

Ook afgeronde hoeken is onmogelijk tot zover ik weet, al staat me er wel iets van bij dat het met XUL kan,maar dat wordt enkel in Mozilla ondersteund.

[analog_]

Dat zijn afbeeldingen
http://www.proxi.nl/images/textboxlefttop.gif
Gaat volgens mij niet met css , zoja dan zou ik het graag willen weten
edit:
hoe je het doet ?
in html plaatje :
[img]blaat[/img] zoiets voor links boven.
Ever heard of the 'edit' function ?

[ Voor 44% gewijzigd door analog_ op 14-09-2004 21:39 ]

[Verwijderd]

Dat is klote, had ik niet verwacht. Is het dan wel mogelijk om met tabellen binnen DIV's de hoeken af te ronden?

Als ik dit namelijk test dan wordt mijn complete div structuur door elkaar gegooid! Heeft dit te maken met dat je een extra attribuut bij het image moet plaatsen (display: block) of zo?

[Verwijderd]

Ik wil ook wel met afbeeldingen werken, alleen het liefst niet met tabellen.

[kaspur]

misschien heb je hier iets aan ?

http://www.alistapart.com/articles/customcorners/

[Mafioso]

Misschien dat je hier wat aan hebt:
http://www.alistapart.com/articles/mountaintop/
http://www.alistapart.com/articles/customcorners/

, kaspur was _net_ wat eerder

[ Voor 13% gewijzigd door Mafioso op 14-09-2004 21:42 ]

[Verwijderd]

er is een hele ingewikkelde oplossing om ronde hoeken te maken met css.
als je de letter "n" van webdings (een rondje) goed positioneert, kan je zelfs een rechthoekmaken met afgeronde hoeken en een border.
voorbeeld: http://webfx.eae.net/games/connectfour/connectfour.html

maar dan moeten mensen wel webdings op hun computer hebben.
dat is weer op te lossen door: http://www.blooberry.com/...ntax/atrules/fontface.htm

maar dan moet je wel webdings in .eot hebben.

samengevat: gebruik plaatjes

dexus

[Verwijderd]

@ mafioso
Die van mountaintop had ik al doorgenomen. Werkt alleen met een bepaald element en is dus niet bruikbaar voor mijn site. Toch bedankt.

@kaspur
Ik zal hem eens doornemen, het lijkt erop dat ze daar wel doen wat ik wil. Thanxx.

[Verwijderd]

CSS3: border-radius

Nu al verkrijgbaar als -moz-border-radius

[Bram77]

Cool! Geweldig dat er mensen bezig blijven met uitbrijden van mogelijkheden

[Verwijderd]

CSS 3 wordt door de huidige browsers toch niet ondersteund? Is ook niet echt een bruikbare oplossing dan lijkt me.. Leuk dat het er aan komt maar dan heb ik nu vrij weinig aan

[DizzyWeb]

-moz-border-radius werkt alleen in gecko based browsers. Mozilla & Firefox accepteren het iig.

[Verwijderd]

@dizzyweb:
Ik neem aan dat je het met eens bent als je site zo ontwikkelt dat hij er alleen in Mozilla en FireFox optimaal uit ziet vrij stompzinning is.

@kaspur:
De link die jij gaf werkt ook niet helemaal lekker Iemand anders nog suggesties?

[ Voor 47% gewijzigd door Verwijderd op 14-09-2004 22:07 ]

[DizzyWeb]

Nee, dat is niet perse onzinnig. Dat kan ook gewoon innovatief zijn. Met niet-afgeronde hoeken is de functionaliteit er niet minder op...

[Verwijderd]

Nee maar het design wel en daar gaat het nu toch om. Als het nu andersom was dat IE en Netscape het wel goed deden dan zou er wat voor te zeggen zijn, nu niet wat mij betreft.

[Bram77]

Ik zou het zelf gewoon lekker simpel houden. Maar dat ben ik...

code:

div.divName{
url("/images/rounded.gif") 
no-repeat fixed 
center center
}

[Verwijderd]

Netscape is gebaseerd op Mozilla, maar wordt inmiddels niet echt meer gebruikt.

[Verwijderd]

@Bram77:
Die methode werkt leuk als de content niet flexibel is. Zodra de div resized klopt je plaatje dan toch niet meer. Correct me if I'm wrong.

Toch raar dat er zo vaak sites gemaat worden met afgeronde hoeken en dat er blijkbaar niet echt een standaard methode is om dat makkelijk m.b.v CSS weer te geven.

[Kvn]

Verwijderd schreef op 14 september 2004 @ 22:14:
Netscape is gebaseerd op Mozilla, maar wordt inmiddels niet echt meer gebruikt.

Is het niet andersom? ( Kan zijn dat ik iets heel doms zeg nu... )

Even totaal offtopic trouwens

[ Voor 8% gewijzigd door Kvn op 14-09-2004 22:27 ]

[Verwijderd]

Is het niet andersom? ( Kan zijn dat ik iets heel doms zeg nu... )

Nee, dat is niet het geval.

[Verwijderd]

En ik altijd maar denken dat Netscape werd vrijgegeven aan mozilla.org, dan is het misschien zo dat mozilla.org na netscape kwam, maar mozilla zelf dan dus netscape is.

Verwijderd schreef op 14 september 2004 @ 23:26:
[...]
Nee, dat is niet het geval.

Netscape=Mozilla

[ Voor 39% gewijzigd door Verwijderd op 14-09-2004 23:41 ]

[Verwijderd]

Nee, Netscape is ermee gestopt. De eerste publieke release van Netscape, een beta versie van Netscape 6.0, was gebaseerd op de open-source Mozilla code base.

[mpegernie]

Verwijderd schreef op 14 september 2004 @ 21:49:
CSS3: border-radius

Nu al verkrijgbaar als -moz-border-radius

In de css specs ziet het er idd mooi uit, maar Mozilla's -moz-border-radius geeft geen afgeronde hoeken zoals daar staat aangegeven maar maakt er een schuine hoek van. Dat ziet er goed uit bij een kleine radius (2px) maar doorboven is het niet echt mooi.

FF of Mozilla gebruikers kunnen het waarschijnlijk wel aan hun tabs zien, die hebben een vrij lage -moz-border-radius waarde en lijken daardaar afgerond.

[IschaGast]

Op mijn eigen site heb ik ook nog 2 voorbeelden staan met rounded corners, gebaseerd op die van http://456bereastreet.com/lab/

Het enige verschil is dat je nu de borderkleur kan aanpassen in de CSS en bij die van 456... kan dat niet.

In de browser die ik hier voor handen heb werkt hij gewoon, heb alleen niet de mogelijkheid om het in alle mogelijke browsers te testen.

Misschien heb je er wat aan

offtopic:
Server kan af en toe ff down zijn omdat ze ermee bezig zijn

[ Voor 47% gewijzigd door IschaGast op 15-09-2004 14:23 ]

[ritsjoena]

offtopic:

Verwijderd schreef op 14 september 2004 @ 23:52:
Nee, Netscape is ermee gestopt. De eerste publieke release van Netscape, een beta versie van Netscape 6.0, was gebaseerd op de open-source Mozilla code base.

Er is pas nog een nieuwe versie van Netscape uitgekomen en hij wordt nog gebruikt.

Als ik me goed herinner is het historisch zo gegroeid: eerst mozilla, daaruit netscape. Vervolgens is mozilla van Netscape afgesplitst als opensource variant. Mozilla is toen gesplitst in het browserpakket en de engines gecko en de mail-engine. Nieuwe versies van mozilla zijn vervolgens hier weer op gebaseerd en daarop is Netscape weer gebaseerd.

[ Voor 3% gewijzigd door ritsjoena op 15-09-2004 12:37 ]

[Reinier]

IschaGast schreef op 15 september 2004 @ 12:24:
Op mijn eigen site heb ik ook nog 2 voorbeelden staan met rounded corners, gebaseerd op die van http://456bereastreet.com/lab/
Misschien heb je er wat aan

Cool!
Ik begrijp je Engels af en toe niet, _{I can get away with using just two one (white and almost invisible) background images} maar daar gaat het niet om

[IschaGast]

Reinier schreef op 15 september 2004 @ 12:36:
[...]

Cool!
Ik begrijp je Engels af en toe niet, _{I can get away with using just two one (white and almost invisible) background images} maar daar gaat het niet om

Speciaal voor jou heb ik het ff aangepast.
Mijn engels is niet zo heel erg goed zoals je al merkt, verder heb ik gewoon de tekst gekopieerd van 456.... omdat ik dit ff snel gefixd had en geen echte tijd om alles helemaal aan te passen.

Als je nog meer foutjes ziet please let me know, dan pas ik het weer ff aan

[Reinier]

IschaGast schreef op 15 september 2004 @ 12:40:
[...]
Speciaal voor jou heb ik het ff aangepast.

Held Btw ik bedoelde het niet onaardig mocht je dat denken

Als je nog meer foutjes ziet please let me know, dan pas ik het weer ff aan

Nou... just one images, die laatste s moet weg.

En nu weer ontopic, ik denk dat ik ga overstappen op jouw methode aangezien je de border color met css kan aanpassen. Dat is cool

[Verwijderd]

Er is pas nog een nieuwe versie van Netscape uitgekomen en hij wordt nog gebruikt.

O ja das waar. Ze hadden eerst, na 7.1 aangekondigd dat Netscape RIP was. ( http://annevankesteren.nl/archives/2003/07/while-i-was-away ) Maar nu is er inderdaad een Netscape 7.2 (gebaseerd op Mozilla 1.7).

Als ik me goed herinner is het historisch zo gegroeid: eerst mozilla, daaruit netscape.

Het bedrijf Netscape heeft besloten om de volgende versie van Netscape, de opvolger van Netscape 4.x open source te maken. Dat werd Mozilla en de codenaam was toen Netscape 5, uiteindelijk is daaruit de eerste versie van Netscape voortgekomen. Nu is Mozilla (sinds 2003 juli of iets daarvoor) onafhankelijk en wordt gefundeerd door de Mozilla Foundation met bedrijven die het geheel sponseren waaronder IBM etc.

[Verwijderd]

http://456bereastreet.com/lab/rounded/
dat zijn de rounded corners van 456...

[Verwijderd]

Zullen we het off-topic geneuzel over Mozilla en Netscape even achterwege laten? Daar schiet ik (en anderen die hetzelde probleem hebben) namelijk niet echt veel mee op.

Die site van Reinier ga ik nu even doornemen, kijken of dat een bruikbare oplossing is. Wordt vervolgd.

Oh ja, niet geheel overbodig om te vermelden is het volgende. In mijn ontwerp zijn alle div's een vaste breedte en hoogte, behalve de "content-div". Een oplossing die alleen uitgaat van vaste breedtes/hoogtes is dus geen optie.

Mijn bedoeling is om een witte achtergrond te nemen, met daarin div's die in een bepaalde kleur omlijnd zijn (dus niet opgevuld!) en de omlijning heeft dan afgeronde hoeken.

Ik zeg dit er bij omdat ik ik veel oplossingen tegenkom, die niet aan deze voorwaarden voldoen.

[ Voor 48% gewijzigd door Verwijderd op 15-09-2004 19:17 ]

[Verwijderd]

dan is deze tog perfect... http://www.ischagast.nl/playground/teaser/flexible/

[Verwijderd]

Niet echt, citaat van die site: This is an example teaser box. Since its width is fixed, I can get away with using...

De breedte is in dit geval een vast gegeven en dat is bij mij niet altijd zo. Het ontwerp mijn site staat overigens hier: http://home.planet.nl/~maten154

[Verwijderd]

Geneuzel? ...

Anyway: http://alistapart.com/articles/customcorners2/

[Verwijderd]

verander het is gewoon zo:

code:

.teaser {
    text-align: left;
    margin: 10px auto;
    width:70%;
}

geen problemen werkt perfect, denk dat de text van dat andere voorbeeld kwam.
maar deze kan je gewoon doen wat je wil, ik zie geen problemen ofzo

off: bij je voorbeeld lay-out is de banner te breed bij 800x600, ik krijg een horizontale-scrollbar.

[ Voor 18% gewijzigd door Verwijderd op 15-09-2004 20:20 ]

[Verwijderd]

@Dexus:
Ik zal er nog een naar kijken, hoop dat ik het hier wel mee voor elkaar krijg. Dat van die banner zal ik meenemen, het is dan ook nog een snel in elkaar geflanst design

Geprobeerd en het werkt. Wat ik alleen een groot nadeel aan deze manier vindt, is dat je de div's de achtergrondkleur van de rand geeft. Nu zul je zeggen wat maakt dat uit? Maar bij het laden van de pagina zie je dus eerst even de (in mijn geval) oranje achtergrond kleur en daarna de rand. Erg lelijk dus..

Daar komt bij dat het de CSS code niet overzichtelijker maakt, maar dat is volgens bij geen een van de toepasbare manieren zo.

Weet iemand nog een betere manier? Volgens mij moet het gewoon makkelijker en netter kunnen..

[ Voor 61% gewijzigd door Verwijderd op 15-09-2004 21:15 ]

[IschaGast]

Bij deze: http://www.ischagast.nl/playground/teaser/flexible/ moet je niet te veel naar de tekst kijken die in die teaser box staat. Ik heb die tekst namelijk zo gekopieerd van die andere en nog geen tijd gehad om dat ding helemaal aan te passen zeg maar.

edit:
Ik heb de tekst fff snel aangepast

In principe is die gewoon flexibel in hoogte en in breedte, ligt er gewoon aan hoe groot je dat plaatje maakt. Dat kan je dus helemaal zelf bepalen!

Kijk maar gewoon welke oplossing voor jouw het beste is, er zijn zoveel manieren om rounded corners te produceren. Alleen is dit de enige, die ik tot nu toe gezien heb, waarbij je de border kan aanpassen d.m.v. de CSS.

Suk6 ermee!

[Verwijderd]

belgie, heb je m'n vorige reactie nou gemist of kon je er niks mee?

[Verwijderd]

Ik zag inderdaad dat hij ook werkt met flexibele breedtes/hoogtes, maar dat lost het probleem was schets in de post hierboven nog niet op. (namelijk dat je eerste de achtergrondkleur ziet bij het laden van de pagina, in jouw geval wordt de hele div heel even grijs).

Daarom wil ik deze het liefst niet gebruiken. Je hebt gelijk dat er veel manieren zijn waarop je ronde hoeken kan maken met CSS, maar voor mijn ontwerp zijn er niet zo veel manieren heb ik het idee.

[IschaGast]

Ook voor jouw manier zijn er heel veel oplossingen.

Kijk maar de reactie van anne en deze is dezelfde als die van mij alleen dan omgekeerd: http://456bereastreet.com/lab/teaser/flexible/

Dat je bij die van mij eerst een hele grijze box ziet klopt, dat is het geval bij sommige browsers. Hmmmm ff gekeken en ik zie het eigenlijk alleen bij IE iedere keer en bij opera alleen bij de eerste keer laden.

[ Voor 37% gewijzigd door IschaGast op 15-09-2004 21:42 ]

[Verwijderd]

@IschaGast, vage naam trouwens
Ik ga die manier van jou nog een keer proberen, kwam er net niet helemaal uit.

@Anne
Ik ging er vanuit dat deze manier niet werkte, omdat er gewerkt werd met een gekleurde (gradiente) achtergrond. Zal er ook nog eens naar kijken.

Kom er op terug..

[JoeKurr]

-nm-

[ Voor 99% gewijzigd door JoeKurr op 15-09-2004 23:06 ]

[mullah]

* mullah gooit ook een voorbeeld/duit in het zakje... deze doet het op niet egaal gekleurde achtergrondjes

[ Voor 12% gewijzigd door mullah op 16-09-2004 12:26 ]

[Verwijderd]

@mullah
Mooie duit, de link is dood

Ik denk dat ik toch voor de optie van http://www.ischagast.nl/playground/teaser/flexible/ ja, jammer dat er niet echt een top voorbeeld bij is, die precies doet wat ik wil.

Wellicht heeft iemand anders nog een suggestie?

[IschaGast]

Enige nadeel van mijn voorbeeld is dat hij het bijvoorbeeld niet doet op een gradient background.

Hij kan het wel doen op een gekleurde achtergrond maar als je dan verschillende pagina's hebt met een andere background dan moet je alsnog steeds een ander plaatje maken.

Advies voor mijn methode is dus om hem te gebruiken als je een witte achtergrond gebruikt.

[mullah]

Verwijderd schreef op 15 september 2004 @ 23:55:
@mullah
Mooie duit, de link is dood

Dan moet ik toch eens mijn provider navragen, de link doet het bij mij gewoon goed enzo..

Maar deze doet dus ongeveer:


waarbij dat lelijke achtergrondje de body background is

[Verwijderd]

Ik heb het nu grotendeels voor elkaar! Zie http://home.planet.nl/~maten154

Heb uiteindelijk toch de manier Ischagast gebruikt. Ik wil hem nog optimaliseren, door eerst de background image in te laden en daarna pas de background color. Dat moet voorkomen je eerst alle div's gevuld krijgt met de border color. .

Bedankt allen, mochten er problemen zijn in bepaalde browsers, dan hoor ik het graag (liever niet natuurlijk )

[Verwijderd]

probeer het eens met mozilla,
en probeer het eens op 800x600
allebei werkt de pagina niet goed (de ronde hoeken wel)

[Reinier]

Verwijderd schreef op 16 september 2004 @ 15:37:
Ik heb het nu grotendeels voor elkaar! Zie http://home.planet.nl/~maten154

Bedankt allen, mochten er problemen zijn in bepaalde browsers, dan hoor ik het graag (liever niet natuurlijk )

code:

[img]"images\banner.gif"[/img]

Daar struikelt Firefox over (en terecht), in IE gaat het wel goed.

Edit: ik bedoel dus dat de backslash een slash moet zijn

[ Voor 10% gewijzigd door Reinier op 18-09-2004 18:13 ]

[Verwijderd]

Bedankt voor de reacties dusver, het probleem met de ronde hoeken is grotendeels opgelost. Nu loop ik alleen tegen twee specifieke IE problemen aan.

De site staat onder http://www.termaten.nl/elburgfood.nl/index.php

Zoals je kunt zien wordt de bovenkant van de div's aan zijkanten gevuld met een achtergrondplaatje die er voor zorgt dat de bovenkant van die divjes een oranje achtergrondkleur hebben. Dit wordt gedaan door de h2 header een background-image mee te geven met negative-margins. Dit gaat alleen niet altijd goed in IE 6.0 (lager heb ik niet getest), terwijl dat wel goed gaat in FireFox. De css klopt volgens mij ook. Soms geeft IE wel de header goed weer en soms weer niet. Heel vaag.

Een tweede probleem is dat IE niet goed omgaat met de rechter-margin van de content div. Theoretisch zou de rechtermargin net zo groot moeten zijn als de linker, namelijk 220 px. De div's aan de zijkanten (links en rechts) zijn namelijk even breed, namelijk 130 px. 70 px's margin voor de div's aan de zijkant + 130 px's voor de breedte van die div's + 20px's space= 220px's). Dit werkt aan de linkerkant in IE 6.0 goed, rechts alleen niet. Hier moet ik een rechter-margin van 185 px's meegeven omdat de content-div anders te ver inspringt van rechts. In FireFox werkt een rechtermargin van 220 px's perfect, zoals het hoort dus. De div's zijn allen absoluut gepositioneerd.

Dit heeft waarschijnlijk te maken met een brakke implementatie van IE m.b.t CSS, maar ik weet niet hoe ik dit moet veranderen om het in beide browsers goed te krijgen.

Ik ga er vanuit dat het nog wel in dit topic mag (het zijn immers 2 kleine css-gerelateerde problemen). Als dit niet het geval is open ik wel een nieuw topic.

[mullah]

tip 1: je CSS is valid maar zorg er ook voor dat je html valid is .. een <li> hoort bijvoorbeeld in een <ul> en niet in een <span>

tip 2: <div id="product_preview"> is af te raden, underscores ( _ ) in id en classnames zijn op de een of andere manier problematisch... sommige browsers schijnen het niet lekker te vinden en het was zelfs eens foute css

Je laatste blokje (met nieuws) doet het in firefox ook niet goed, maar nog slechter in msie

[Verwijderd]

@Mullah:
Bedankt voor de tip, had ik zelf nl nog niet naar gekeken. Ik heb de meeste fouten eruit gehaald (en ga de andere er nu uithalen), maar toch denk ik niet dat dit wat met mijn problemen te maken heeft.

Dat het nieuwsblokje het niet goed doet is nieuw voor mij, heeft het nl wel de hele tijd goed gedaan. Ga ik nu naar kijken.

edit:
Dat van het nieuwsblokje was idd een klein foutje in de css en is nu opgelost.

Weet iemand anders nog waardoor de eerder genoemde 2 problemen optreden in IE?

[ Voor 10% gewijzigd door Verwijderd op 21-09-2004 13:07 ]

[Verwijderd]

De sidebox vind ik altijd fijn werken.. simpel en snel, werkt zelfs in IE5..

http://www.vertexwerks.com/tests/sidebox/

[ Voor 3% gewijzigd door Verwijderd op 21-09-2004 13:13 ]

[Verwijderd]

@kattebak:
Sorry, maar dat is een compleet andere manier en heeft ook niet echt betrekking op bovenstaande problemen. Zoals je kunt zien in FireFox werkt deze opzet in theorie goed, alleen omdat IE buggy is met sommige dingen werkt het nog niet helemaal zoals zou moeten.

edit:
Ik heb nu een soort van hack gevonden voor de margin-right, alleen werkt hij nog niet helemaal. De hack staat hier beschreven http://www.quirksmode.org/logo.css

Op de een of andere manier negeert IE deze hack.

[ Voor 30% gewijzigd door Verwijderd op 21-09-2004 13:30 ]

[Reinier]

Verwijderd schreef op 21 september 2004 @ 13:10:
De sidebox vind ik altijd fijn werken.. simpel en snel, werkt zelfs in IE5..

http://www.vertexwerks.com/tests/sidebox/

Maar hoe goed is die manier?



(FF 1.0PR)

[Grijze Vos]

Reinier, hij had niet gedacht dat iemand met zo'n brede window zou browsen denk ik. Kwestie van zn ene plaatje wat groter maken, meer niet.

[Reinier]

Ja zeg, het is maar op 1400x1050 en het gaat al fout! Volgens mij is dit wéér een voorbeeld van "bijna perfect, maar toch weer net niet"

[mullah]

simpel op te lossen in de goeie browsers met een max-width, en in msie met een width scriptje

code:

<style>
#element {
max-width:500px;
width:expression(document.body.clientWidth > 500? "500px": "auto" );
</style>

[ Voor 43% gewijzigd door mullah op 21-09-2004 17:32 . Reden: scriptje toegvoegd ]

[Verwijderd]

@Reinier:
Goed genoeg, alleen omdat IE er brak mee omgaat is er een probleem. In FireFox gaat alles zoals het hoort. Je kan wel doorgaan over jouw oplossing, maar die heb ik in een eerder stadium al bekeken en toen heb ik voor mijn manier gekozen.

Het gaat er nu niet om welke manier beter is, maar om die twee problemen die optreden. Toch bedankt hoor, maar ik schiet daar niet echt veel mee op..