[CSS / xHTML] Een zg. trashbox maken met CSS zonder tabellen

[Verwijderd]

Onderin dit topic had ik gevraagd of iemand een oplossing kon bedenken in CSS voor het volgende probleem:



Wat ik dus wil, is een blok met vier hoeken, en vier "zijkanten" die aansluiten op die hoeken, en in het midden een blok waarin ik tekst kwijt kan. Dit blok moet er goed uitzien op elk formaat - ik wil dus dat je deze "trashbox" kunt hergebruiken voor meerdere doeleinden die ook verschillende formaten vereisen.

Clay kwam al met het een site waarin ze uitleggen hoe je dit kunt bereiken met een paar plaatjes, alleen heeft dit een kleine beperking: zodra je transparante hoeken gebruikt (afrondingen of schuine hoeken etc.) overlapt de boel elkaar, en wilt het net niet lukken.

Op zich was dat ook wel op te lossen volgens de maker van die pagina, maar werd het dan weer niet browser vriendelijk... alleen Internet Explorer kan het dan goed weergeven. Safari en Mozilla Firebird hebben er beide problemen mee.

Dus hierbij mijn uitdaging: maak een trashbox met transparante hoeken, volledig in CSS zonder gebruik te maken van tabellen!

Let er wel op dat deze trashbox te gebruiken moet zijn op iedere manier mogelijk, absoluut gepositioneerd en gecentreerd bijvoorbeeld. De breedte en hoogte moeten zowel 6000px kunnen zijn als 20 pixels zonder al teveel problemen. En als het even mogelijk is, laat dan ook de code ietwat bruikbaar/leesbaar

Ik ben erg benieuwd..

[Verwijderd]

Met CSS3 is het niet zo'n kunst, met CSS2 is het onmogelijk om dit te doen zonder HTML elementen en attributen toe te voegen die puur en alleen voor style doeleinden noodzakelijk zijn.

[Verwijderd]

Precies, dat is het probleem Met flash zou het me ook wel lukken om netjes afgeronde hoekjes te krijgen, met CSS3 ongetwijfeld ook, maar nu eigenlijk CSS2. Ik kan me niet voorstellen dat het onmogelijk is. Volgens mij is de enige efficiënte oplossing... tabellen.

En daar ligt dus de uitdaging, het moet zonder kunnen. Maar hoe?

[Verwijderd]

Het kan wel hoor, door 8 elementen te nesten en background images te gebruiken, maar die oplossing is dan nog ranziger dan gebruik maken van tabellen.

[Clay]

heb wel een idee,
* Clay gaat ff poken

[edit]

Het idee strandt bij de laatste hoek beetje jammer. Wat op zich wel werkt is 4 backgrounds er zo inzetten:



met de volgende html:

code:

<div class="trashbox">
    <h1> title </h1>
    <div>
        <p> content </p>
    </div>
</div>

zou je de linkerkant op de box zelf kunnen zetten, met een padding-left om de transparantie van de hoek te bewaren. De h1 krijgt dan de bovenste, de div in de box de rechter. dan heb je 3 hoeken van de 4 al staan, en je hebt een groot probleem;

• Die geneste div is suf, heeft geen functie buiten meer backgrounds zetten.
• Linksonder gaat nooit lukken omdat de box zelf die hoek gaat vernaggelen met zijn eigen background.
• De backgrounds houden ergens op, niets repeat omdat het zowel hoek als lijn is, de box kan zo dus niet eindeloos scalen.

met genoeg nesting kan je het idd misschien wel voor elkaar krijgen, maar dat is idd zoals Cheatah al zegt ranzig; je hebt er 8 nodig. voor alle hoeken en zijkanten een element.

Wat wel kan is dat je met de :before en :after extra elementen via de css gaat toevoegen. Maar dan moet je wel een constructie verzinnen die iig wat toonbaars in IE laat zien, gezien het gebrek aan ondersteuning.

[ Voor 104% gewijzigd door Clay op 23-11-2003 16:37 ]

[Verwijderd]

Dus de conclusie hierbij is dat we, zolang CSS3 nog niet goed ondersteund wordt, het maar beter bij tabellen kunnen laten? Da's toch best wel jammer

Het zal ongetwijfelt mogelijk zijn om dit voorelkaar te krijgen met pure CSS, maar in afwachting tot CSS3 kunnen we in plaats van een lading CSS en javascript geneuzel beter een tabel plaatsen en het zo oplossen. Dit ook met tijdswinst in het achterhoofd. Voor de hobby is het leuk om alles in CSS te doen, helaas maakt mijn klant het geen bal uit of er nou een tabel staat of een DIV-je

Dat wordt dus cheaten, helaas

[Clay]

Het kan niet als de box alle kanten uit moet scalen zonder bergen elementen. Maar het verschil tussen tablebased of cssbased is er dan niet echt; je gebruikt hoe dan ook bergen elementen met als resultaat brakke nietszeggende html. Als je je box een vaste breedte geeft kan het met 3 backgrounds. Lijkt me maar een klein offer eigenlijk Alles Alle kanten uit meescalen ziet er imo ook niet uit.

[Verwijderd]

Clay schreef op 23 november 2003 @ 17:02:
Het kan niet als de box alle kanten uit moet scalen zonder bergen elementen. Maar het verschil tussen tablebased of cssbased is er dan niet echt; je gebruikt hoe dan ook bergen elementen met als resultaat brakke nietszeggende html. Als je je box een vaste breedte geeft kan het met 3 backgrounds. Lijkt me maar een klein offer eigenlijk Alles Alle kanten uit meescalen ziet er imo ook niet uit.

Daar ben ik het wel mee eens, maar je vergeet een klein dingetje: er mogen geen beperkingen zijn CSS3 lost dit op, maar CSS2 lijkt hier niet voor geschikt te zijn.

Tabellen hebben ook weer hun eigen beperkingen, maar zoals je op deze site kunt zien gebruiken ze een trashbox die wel geschaald kan worden, alleen, ook beperkt door die achtergrond in de "top bottom" positie. Als deze trashbox wel 5000pixels breed kon zijn, zou hij voor veel meer doeleinden gebruikt kunnen worden..


Enig idee wanneer CSS3 gebruikt kan worden in de populaire browsers?

[Verwijderd]

Tabellen zijn altijd een _slechtere_ optie, aangezien ze _niks_ met layout te maken hebben. CSS3 wordt over 5 jaar door Mozilla/Opera/Safari ondersteund (realistisch) en over 10 jaar in IE (on-realistisch als MS zo door gaat met eigen plannen als XAML).

[Johnny]

Op deze pagina staat een "niet zo ranzige" CSS2 manier beschreven:

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

[Clay]

Da's nou alweer dezelfde link het hele probleem is dat dat werkt, mits het een transparante border is.

CSS3 zie ik idd ook niet zo gauw ondersteund worden. En zodra er 1 browser is die het ondersteunt kan je het ook nog lang niet standaard gaan gebruiken, aangezien de oude browsers echt niet zomaar weg zijn. IE5.0 zat al bij win98, en die kan je ook nog niet echt negeren. 5.5 is niet veel beter (en 6 is wat css betreft ook waardeloos), en met die 3 zit je al op > 90% van de gebruikers.

Waar ik de hoogste pet van op heb zijn Mozilla, Opera en Safari. CSS3 support zie ik daar ooit nog wel inkomen, maar voordat je er echt blind op kan varen... Voorlopig maakt IE nog de dienst uit. Het enige wat je kan doen is IE ondermijnen door mensen die beter browsers gebruiken een rijkere site voor te schotelen.

[Justice]

http://www.andreas-kalt.de/roundedbox/ ?
(of andere links op http://css-discuss.incutio.com/?page=RoundedCorners)

[ Voor 49% gewijzigd door Justice op 23-11-2003 19:26 ]

[Verwijderd]

Relaxte links. Om even verder te gaan over CSS3. Mozilla heeft al wel ondersteuning voor het een en ander. Met name selectors:

:target
:empty

En nog een paar attribute selectors, als [attr^=val]

[Verwijderd]

Nou, je zou ook nog met htc behaviors en xbl bindings kunnen werken om ronde hoekjes te krijgen.
Ik heb daarmee wel eens gewerkt:
http://home.hccnet.nl/m.wargers/html/jeugd.htm

Hiermee haak ik de bindings/behaviors aan div class="hoofdstuk":

code:

.hccnet .hoofdstuk{
behavior:url(http://home.hccnet.nl/m.wargers/css/normaal/rondehoek4.htc);
-moz-binding:url("http://home.hccnet.nl/m.wargers/css/normaal/rondehoek2.xml#rd");
}

Dit zijn de resp de files van de behavior en de binding-file.
http://home.hccnet.nl/m.wargers/css/normaal/rondehoek4.htc
http://home.hccnet.nl/m.w...normaal/rondehoek2.xml#rd

Maar goed, dit werkt alleen maar in Mozilla en IE, maar als je brakke css-support van IE ongedaan wil maken, dan zou je iets met htc-behaviors kunnen proberen.
Maar daar had Clay ook al eens een topic aan besteed geloof ik.

[odysseus]

Clay schreef op 23 november 2003 @ 19:20:
Waar ik de hoogste pet van op heb zijn Mozilla, Opera en Safari. CSS3 support zie ik daar ooit nog wel inkomen, maar voordat je er echt blind op kan varen... Voorlopig maakt IE nog de dienst uit. Het enige wat je kan doen is IE ondermijnen door mensen die beter browsers gebruiken een rijkere site voor te schotelen.

Konqueror (en dus zeer waarschijnlijk ook Safari) ondersteunt al een vrij groot deel van de voorgestelde CSS3-standaard. Nog niet alles gaat goed, maar een hoop onderdelen werken prima. Zie de tabel op [url=http://www.macedition.com/cb/resources/css3support_selectors.html[/i]deze[/] pagina voor meer details. Overigens ondersteunt ook Mozilla al een vrij groot aantal CSS3-elementen .

[Verwijderd]

Ik vraag me af of die lijst betrouwbaar is. Bijna geen enkele browser ondersteund selector grouping correct: http://www.annevankestere...s/2003/11/15/css-grouping