2 vraagjes ivm rounded corners en het positioneren van div's

[imax]

Hallo,
Allereerst een gelukkig nieuwjaar toegewenst!!
Nu heb ik 2 vraagjes:
1) Op internet vind in verschillende technieken om ronde hoekjes te krijgen aan een div in css maar ik vroeg mij af welke nu de beste is? Het probleem is dat ik met een achtergrondafbeelding werk dus de achtergrond van de hoekjes met transparant zijn. Is het al een goed idee om dit met css3 te doen? wordt dit al goed ondersteunt door de meeste browsers? en zo ja, hoe doe je dit dan juist?
2) In ben mementeel bezig aan een website en hierbij moet in 3 div-kadertjes naast elkaar plaatsen van 300px op 300px. Tot nu toe ben ik er nog niet in gelukt om dit te verwezelijken. ze komen altijd onder elkaar te staan. Hoe doe ik dit het beste??

Alvast bedankt !!!
Axel

 

[Woutertjuh88]

1: Met CSS3 kun je gewoon dit doen: border-radius: 5px 5px 5px 5px; Dan zijn alle hoeken rond met 5 px. Maar Internet Explorer ondersteund dit niet en andere oudere browsers ondersteunen dit ook niet. FireFox(-moz-border-radius), Safari, Opera en Chrome doen het wel.
Meer leesvoer!
Nog meer leesvoer!

2: Wat ik doe om divjes naast elkaar te plaatsen is het volgende(float gebruiken....):

<div style="width: 900px; height: 300px;">
 <div style="width: 300px; height: 300px; float: left;">div 1</div>
 <div style="width: 300px; height: 300px; float: left;">div 2</div>
 <div style="width: 300px; height: 300px; float: left;">div 3</div>
</div>

Hierdoor plak je hem gelijk aan de vorige div aan.

 

[imax]

Ok, prachtig, Het werkt!!!
Heel erg bedankt bedankt!!
Dus dan zal ik css3 gebruiken voor de ronde hoekjes vermits alle hedendaagse browsers het ondersteunen

 

[csshunter]

Hoi imax,
Inderdaad zou ik css3 momenteel nog niet gebruiken voor ronde hoekjes als je ze op alle in omloop zijnde browsers goed wilt laten zien.

Er zwerven op internet ontstellend veel manieren rond om zonder css3 ronde hoekjes te maken, maar er zijn er echt maar een paar bij die ook met transparante buitenkanten van de hoekjes kunnen omgaan. Als je gaat zoeken is dat een speld in een hooiberg, en meestal kan je ook niet in één oogopslag zien of ze wel of niet transparantie ondersteunen.

• Zie hier een overzichtje met test van zo'n 35 oplossingen: op een paar na vallen ze allemaal door de mand.

Maar ik ken er eentje die het wel doet, met css2.1 (= alle browsers, ook bv. IE6) en 1 of 2 mini-images (en zonder javascript).

• Een speeltuin voor je: Liquid Corners Playgarden.
• En het bijbehorende artikel: Liquid round corners
• Op de startpagina staan in de index nog meer links naar RondeHoekjes toepassingen.

Veel plezier ermee!

Met vriendelijke groet,
CSShunter

 

[csshunter]

Ha, een kruispost!
Over de "ondersteuning door hedendaagse browsers": lang niet iedereen zorgt voor updaten naar de laatste versie! Ik denk dat er nog behoorlijk veel oudere versies in omloop zijn, die het niet kunnen.

Bijvoorbeeld alle Internet Explorers t/m IE8 ondersteunen niet de border-radius, en er zijn zat mensen (ondergetekende is daar een voorbeeld van) die weigeren hun goed draaiende WinXP in te wisselen voor een Windows7. Want je moet eerst Win7 kopen om IE9 te kunnen gebruiken!

Maar niet iedereen met XP gebruikt een andere browser dan IE; dus er zullen nog vrij veel mensen zijn (en organisaties / bedrijven / instellingen, waarvan het wagenpark ook niet zo modern is, met IE als enige aanwezige of toegestane browser), die niet van de ronde css3 hoekjes kunnen genieten.

Toegegeven, met een img en css2.1 is het iets lastiger, maar het werkt op alle browsers. En je kan er veel mooiere hoekjes mee maken!

Met vriendelijke groet,
CSShunter

<edit>
O ja, ik heb ik nog deze op voorraad: Automatic liquid round corners (met javascript).
</edit>

 

[imax]

Aha, ok dus css3 is toch nog niet zo een goed idee...
Bedankt voor de info in elk geval, ik ga aan de slag met deze .
Ik laat nog iets weten als het mij gelukt is!
Alvast bedankt!

 

[csshunter]

Hoi imax,
Script nog wat aangepast om ook zonder ID's te werken (alleen een class="cornerbox" is nu voldoende):

• autocorners.php

Succes!
CSShunter

 

[That Guy]

Ik moet helaas echt tegen bovenstaande ingaan; op het moment is border-radius de 'beste' oplossing. Waarom?


Het wordt ondersteund door alle huidige browsers. Zie bijvoorbeeld hier. IE 6 t/m 8 ondersteunen het op het moment niet; dat is waar, en zoals csshunter al gezegd heeft, er zijn nog genoeg mensen die met een van deze versies werken. Maar is dit het gedoe waard om te lopen klooien met extra HTML elementen, plaatjes of Javascript? Nee! Ten eerste maak je de pagina voor iedereen 'dikker' (meer code, en ook plaatjes in sommige gevallen), ook browsers die prima met border-radius omgaan; ten tweede moet je eens naar het grotere plaatje kijken; je loopt (in sommige gevallen) stijl in de HTML te proppen, en dat is niet echt een strak plan. Immers, CSS is voor de opmaak, en HTML voor de inhoud! Ohja, en als het goed is maakt het toch eigenlijk helemaal niet uit dat een (klein) deel van je gebruikers rechte hoeken ziet?


Maargoed, dit is mijn mening (hoewel ik denk dat ik 'm wel OK heb onderbouwd met feiten ).