Ronde hoeken in tabel

[sandra82]

Hallo allemaal,

Vroeger (dik 10 jaar geleden, toen ik 15 jaar was) heb ik eens een website in frontpage gemaakt m.b.v. frames. Toen vond ik het allemaal zo moeilijk niet.

Ik wil nu een site maken m.b.v. tabellen. Ik heb nu dreamweaver gedownload en het lijkt nu een stuk moelijker.

Maar de vraag is nu... hoe maak ik een tabel met afgeronde hoeken? Dat vind ik erg mooi.

aub niet al te moeilijke taal gebruiken, ik kan wel redelijk wat met computers, maar computertaal wordt al vrij snel te moeilijk.

Vr groet
sandra

 

[Lita112]

Kijk hier eens, gewoon met google gevonden: http://home.planet.nl/~como/artikelen/afgeronde-hoeken.html

 

[csshunter]

Of deze: www.google.nl/search?q=ronde+hoekjes+met+css.
Meteen de eerste is raak - maar zonder tabellen: nog mooier!

 

[sandra82]

hey bedankt!

ik ben de laatste dagen zoveel via google aan het zoeken geweest.... hoe het komt dat ik hier dan niet op ben gekomen... :shocked:

Hoe bedoel je.... zonder tabellen nog mooier?

Groet
sandra

 

[Lita112]

Ik heb simpelweg gezocht op "dreamweaver ronde hoeken" Eerste link die ik kreeg.

En hij bedoelt dat je zonder een tabel te maken, je ook ronde hoeken kan maken. Die link is misschien nog wel beter.

Maar stoei er eens mee zou ik zeggen.

 

[csshunter]

Hoi Sandra,

hoe het komt dat ik hier dan niet op ben gekomen... :shocked:

Dat komt omdat er heel veel schijn-oplossingen voor ronde hoekjes op internet worden gezet door mensen die er net niet het fijne van begrijpen (zelfs door webdesign-bedrijven die ook ergens de klok hebben horen luiden), en omdat veel van die schijn-oplossingen hetzelfde zijn, of gekopieerd, of naar elkaar verwijzen, enz.enz. - Er zijn niet zo gek veel werkende universele hoekjes-methoden (terwijl heel veel pagina's dat wel voorspiegelen), en om die eruit te pikken is een heel karwei: dan moet je alles testen. Met veel teleurstellingen als het weer niet werkt zoals jij wilt.
Daarbij komt ook nog, dat behoorlijk veel "oplossingen" alléén een beschrijving zijn van wat je zou moeten doen: wel met codes en soms met een plaatje van het resultaat, maar zonder echt werkend voorbeeld. Dan moet je maar raden of het werkt, of eerst een pagina met hun code bouwen om daar achter te komen!
- Dus niet verbaasd dat je er niet zo gauw op kwam.

Maar goed: ik bedoel:
Als je met tabellen gaat werken moet je maar liefst 3x3 = 9 cellen maken om de hoekjes en randjes goed te kunnen plaatsen (voor elke box die je afgeronde hoekjes wilt geven). Behalve dat dat indruist tegen de principes van scheiding van inhoud en vorm ("gebruik géén tabellen voor de opmaak, gebruik tabellen alleen als je tabellarische gegevens moet laten zien"), kan het ook problemen opleveren bij het op de pagina plaatsen, of als twee van die hoekjes-boxen elkaar moeten overlappen.

Met de css-oplossing werk je met <div>'s (divisions, element-blokken), en dat is een stuk flexibeler, en ook betere code. Als je bv. je hoekjes-box in een <div> hebt verpakt, kan je die zó op elke plaats op de pagina zetten. En <div>'s kunnen net zo goed mee-rekken en krimpen als een tabel, als je relatieve maten (procenten) gebruikt voor de breedte.
Mijn ervaring: als je even doorbijt met experimenteren met de css-methode, dan wil je niet anders meer!

Zo ongeveer!

Succes!
CSS-Hunter

Edit: tijdens mijn tikwerk kwam de post van lita112 binnen! Hoi Lita, het klopt wat je zegt over mijn bedoeling!

 

[Lita112]

Mee eens Hunter, begin het css gebeuren ook steeds beter onder de knie te krijgen.

 

[sandra82]

Owwwww daar ga ik al.....

Dus jullie bedoelen niet mijn website maken in tabellen maar met CSS alles maken?

Ik merk nu wel met het werken met tabellen veel beperkingen. Je kunt bv niet op tab drukken om iets verder in de tabellen nog wat tekst neer te zetten, moet je daar ook weer tabellen in maken, grrr! Gaat dat met CSS wel?

Ik ga die link eens lezen.... en mijn broer wellicht vragen om jullie teksten eens te lezen. Komen we zeker wel weer wat verder!

bedankt
sandra

 

[csshunter]

Hoi Sandra,

Ik merk nu wel met het werken met tabellen veel beperkingen.

Da-klop!

Ja, met CSS alles maken: want met CSS kan (bijna) ALLES!
Probleempje: er vallen heel veel (combinaties van) mogelijkheden in CSS te kiezen, en ze zeggen "CSS heeft een steile leercurve".
Ook dat klopt, is mijn ervaring. Je moet veel tegelijk weten, voordat je er goed mee overweg kunt. Maar het wordt steeds leuker, als je de mogelijkheden leert om een webpagina exactement precies te laten doen wat jij wilt!

Een aardige introductie, en toelichting bij de meeste css-eigenschappen met veel voorbeelden zit in de CSS-afdeling van de handleidinghtml.nl. Daar zal je je niet vervelen, zeker niet als je zelf (of samen met je broer) eenvoudige testpagina's gaat maken om te experimenteren hoe het allemaal werkt.

Vriendelijke gegroet,
CSS-hunter

 

[sandra82]

Hé ik begin het te snappen.

Dreamweaver staat al op stand CSS zag ik....

Nog 1 klein vraagje.....

Ik kwam bij http://www.roundedcornr.com
Daar kun je zo'n ding al maken (helaas niet transparant en zou het liefst de gradient hebben)

Je vult enkele dingen in en voila... je krijgt een HTML code, CSS, code (heb je die beide nodig?) en de foto's van alle hoekjes.

Nu is dat erg leuk en aardig.... maar waar zet je die zooi (haha) neer? Tussen de body's of zo?

kan even niet naar mijn broer... is op kamp. Ow... ik ben hier echt niet goed in... wellicht eens een boek kope.

groetjes sandra

 

[csshunter]

Hoei! Dit is er eentje waarbij ze er niet bij vertellen dat hun methode géén transparante hoekjes kan ondersteunen.
Ze werken namelijk met wat ik maar de "overplak-techniek" zal noemen: eerst wordt de volledige <div> gevuld met het gradiënt-plaatje, en later worden daar witte hoekjes overheen geplakt.
Kijk, dit gebeurt er als je de box waarin hun "looks like" zit een andere achtergrondkleur geeft dan het wit van de hoekjes. Als je van de witte hoekjes transparante hoekjes zou maken, kijk je door het transparant heen naar de gradiënt die er achter zit, en niet naar het paars dat daar weer achter zit ...

Maar ik kan je misschien wel een stukje op weg helpen met de Liquid Corners Methode. Om te beginnen wat vraagjes:

1. Is het één vakje of zijn er méér, die dezelfde binnenkant en dezelfde ronde hoekjes moeten krijgen?
2. En hoe zit het met de breedte van het vakje (of: de vakjes): wordt het een vaste breedte (in pixels)? Zo ja, welke breedte(s)? Of moet zo'n vakje in de breedte uitrekbaar zijn (met breedte-maat opgegeven in %)?
3. Heb je de gradiënt van het vakje al klaar als plaatje? Kan je dat dan uploaden zodat wij het kunnen zien?

Tot zover vast,
(vanavond ben ik er niet)
CSS-hunter

 

[sandra82]

Hey bedankt! Dat waardeer ik echt enorm!! :thumb:

hier zie je de opzet plus de 4 hoeken die ik van roundencornr gehaald heb. Ik had een hoeking van 10 genomen (voor alle hoeken wil ik dit hetzelfde houden).

De donkere kleur van de hoekjes is die van de donkerste kleur van mijn achtergrond (zie www.cincerity.nl) en heet #27242B
De licht grijze kleur van de grote tabel is #EEEFF1
De lichtste kleur van de tabellen daarin is gewoon wit #FFFFFF

Je ziet dus een grote tabel met kleinere tabellen erin.
Van de kleine witte tabellen wordt de linksbovenste voor het menu. De drie links onder elkaar hebben eenzelfde breedte, 127 pixels. Het paste even niet in het snel gemaakte plaatje, maar ik wilde ze alledrie even lang hebben, de pixels geeft dreamweaver niet aan. Ik denk ongeveer 2,5 keer zo lang als breed?
De onderste twee (midden en rechts) zijn 192 breed.
Ik had een celruimte ertussen van 25 aangehouden dus de twee grote tabellen worden 192 + 192 + 25 = 409.

Kijk de lengte van alle tabellen weet ik nog niet, ligt eraan oeveel tekst erin moet komen....

(zie bericht hieronder)

 

[sandra82]

En hier zijn dezelfde hoekjes, die ik transparant heb gemaakt.
Ze zijn van de grijze tabel.

(zie bericht hieronder ook nog)

 

[sandra82]

en hier de witte hoekjes.

Groetjes
Sandra

 

[csshunter]

plaatjes plaatjes plaatjes

Die ga ik allemaal maar eens op m'n gemak bekijken!
Kijken of ik het snap.

 

[csshunter]

een stalenkaartje

Euh, , de bedoeling van de opzet.jpg is dat de pagina dwars komt te liggen, dus zo, een kwart slag gedraaid?

Als ik 'm zo horizontaal heb, dan zou de breedte van links naar rechts zijn: 127 + 25 + 192 + 25 + 192 +randje links van ook 25 + randje rechts van ook 25 = totaal: 611px breed? :shocked:

Dat is wel heel smal, en dan kan je nauwelijks tekst in de vakjes krijgen (of de bezoekers moeten steeds een heel eind naar beneden doorscrollen om een vakje te lezen, en dan weer omhoog voor het volgende vakje - en daar weer naar beneden, enz.). Met deze exacte maten komt het er zó uit te zien in de bowser.

Maar je hebt veel meer ruimte horizontaal tot je beschikking. Nog maar een enkeling heeft tegenwoordig nog een beeldscherm van 800x600px. Als je een vaste breedte aanhoudt en die 800x600px ook wilt bedienen, kan je gaan tot ca. 770px breed (800 min wat ruimte voor de scrollbar aan de rechterkant). Dat is het gebied binnen de groene stippeltjes. Dat zouden de vakjes denk ik een aangename vergroting vinden.
Gaan we de opzet daarop aanpassen?

De hoogte van de vakjes hangt inderdaad van de vulling af, dus we laten de hoeveelheid tekst in een vakje zelf de hoogte bepalen.

Nu gaan we eerst even de ronde hoekjes vergeten!

Om <div>'s te kunnen maken die ronde hoekjes krijgen, moet eerst de gedetailleerde opzet van de pagina vastgesteld worden. Voor de rangschikking van de vakjes heb je met css namelijk méér mogelijkheden dan het starre raster waar de tabel-methode toe leidt.

• Je kan bv. willen: de bovenste 3 vakjes zijn altijd even hoog (afhankelijk van het vakje met de meeste tekst er in) > deze nr.1.
• Je kan ook willen: de 3 aan de linkerkant worden niet groter dan de tekst die er in komt, en komen dan meteen onder elkaar, zonder zich iets aan te trekken van de rest > deze nr.2.
• Of een opzet waarbij de bovenste twee rechts óók niet aan elkaar vast zitten > deze nr.3.

Kortom, de vraag: waar dacht je aan?

Groetjes,
CSS-hunter

 

[csshunter]

one for all !

Hier is een montage van de serie hoekjes die je toestuurde: de linkerbovenhoek. Zo zou het er uit komen te zien. Hier is de achtergrond nog egaal #27242B, dat gaat dus later de gradiënt worden. De maten van de vakjes kunnen ook nog helemaal aangepast worden, het gaat om de aanblik van de hoekjes en de afstanden tussen de vakjes. Dit de bedoeling?

Verder heb ik vast even een gecombineerd plaatje met alle benodigde hoekjes gemaakt. Als deze bekijkt, zie je de transparante witte hoekjes niet: vanwege de witte achtergrondkleur van het browservenster. Maar hier zie je in paars waar de transparante stukjes zitten.
Met de hoekjes hieruit kunnen dus alle hoekjes gemaakt worden van de linkerbovenhoek-figuur, - en ook de hoekjes die niet in de linkerbovenhoekfiguur zitten.

De truc gaat namelijk worden:

1. De hoekjes komen steeds in een <div></div>-vakje met de plaatjes als achtergrond.
2. Plaatjes als achtergrond = die kunnen dus niet méér te zien geven dan de grootte van het kijkvenstertje (het <div>-vakje).
3. Dus we kunnen alle plaatjes slim in 1 bestand zetten, en daar dan telkens het partje van gebruiken dat we nodig hebben.

Om een partje te nemen dat ergens middenin het gecombineerde plaatje zit, kan je via css het plaatje een stukje "liften". D.w.z. met de css-eigenschap "background-position" kan je bepalen op welke hoogte van het plaatje de achtergrondfiguur van een bepaalde box moet beginnen. Ook links-rechts kan je instellen, zodat je alleen bv. een rechterbovenhoekje zichtbaar kan maken. Mooi hè, dat CSS! :love:

• Voordeel is: er hoeven door de bezoeker van je site niet 2 x 4 hoekjes = 8 hoekjes-plaatjes opgevraagd te worden bij de server van je site, en de server van je site hoeft die 8 plaatjes niet aan de computer van de bezoeker terug te sturen, maar dus slechts 1 combi-plaatje waar alles in zit. Dat is minder up- en downloadverkeer (dus minder CO2-belasting, want het kost allemaal energie), en een flinke snelheidswinst bij het op het scherm krijgen van je pagina.
• Ook is een gecombineerd plaatje altijd kleiner dan 8 afzonderlijke plaatjes, want de "pakketjes gegevens" die over internet heen en weer gestuurd worden, hebben allemaal een vastgestelde grootte.
  Elk pakketje heeft een eigen "header" die geen "echte gegevens" bevat, maar instructies geeft over wat er met de gegevens van het pakketje gebeuren moet. - Dat snoept ruimte af van het pakketje.
  Als iets niet in zo'n pakketje past, worden het twee pakketjes (en 2 headers!), ook al wordt misschien het grootste deel van het tweede pakketje niet gebruikt. Past het nog niet, dan komt er een 3e pakketje bij, enz. (2 volle en 1 gedeeltelijk niet volle).
  Als er 8 plaatjes zijn, zitten er dus 8x onvolledige pakketjes bij (en 7 extra headers), en bij 1 bestand maar 1 onvolledig pakketje (met 1 extra header). Bent u er nog? - In elk geval: minder onvolledige pakketjes = minder ballast = nog sneller!
• Voor hoe het "liften" van een background-image precies in z'n werk gaat: zie bijvoorbeeld artikeltje "De patrijspoort-theorie".

Maar ... de vraag van de vorige keer blijft staan: hoe moet de rangschikking van de vakjes precies worden?

CSS-hunter

 

[sandra82]

eeeuh... wacht dit moet ik allemaal nog eens op mijn gemak nalezen. Ik moet nu weg en 'even snel antwoorden' is er niet bij.

maar in elk geval... het voorbeeld van de pagina die ik ga moet niet horizontaal komen te liggen maar verticaal zoals het plaatje aangeeft. Dus je hebt rechts boven een groot vak.

wat betreft de maten: Ik heb gewoon de maten genomen van de voorbeeldpagina die ik heb. Zie deze link
http://osc.template-help.com/wt_24465/index.html

Groet
sadra

 

[csshunter]

Hoi Sandra,
Nou, als het goed is, kan het zelfs heel makkelijk (of de indeling nu staand of liggend is).

• Kijk: More rounded corners in a page. Die lijkt er toch heel veel op!

Ik zou die eens proberen toe te passen. Waar precies de extra code-regels voor de ronde hoekjes moeten komen zie je in de broncode van de verschillende stapjes.

Succes!
CSShunter

 

[sandra82]

okee, ik ga dat eens proberen.
Ik houd je op de hoogte : )

Heel erg bedankt... vind het erg fijn dat je me zo geholpen hebt.

groetjes
sandra