[layout] probleem met ronde corners

[Verwijderd]

ik heb voor een schoolopdracht een ontwerp gemaakt voor een website ( zie onderstaande afbeelding).



nu zit ik op dit moment met het probleem dat ik niet goed voor me heb hoe ik deze layout het beste op kan zetten. Wanneer ik namelijk de achtergrond bij de corners transparant wil houden ( ik heb op de achtergrond een herhalend patroon), moet ik gebruik gaan maken van GIF of PNG. Echter, de bestandsgrootte van die linkerafbeelding wordt dan wel behoorlijk groot.

een andere optie zou zijn om de website te maken in Flash, maar daar heb ik nog niet teveel kennis van, en die optie zou ik eigenlijk niet willen gebruiken.

Ik heb naar de volgende oplossingen gekeken voor de rounded corners:

• http://kalsey.com/2003/07/rounded_corners_in_css/
• http://www.alistapart.com/articles/customcorners/

maar bij beide heb ik dan een probleem met die linkerfoto. Die is in sommige gevallen tot 40 a 50 KB en dat is teveel van het goede.

Mijn vraag:

Ik vraag niet om code, maar hoop dat iemand me kan wijzen op een goede manier om deze layout op te delen. Is Flash mn enige optie, of hoe kan ik dit door CSS en HTML ook oplossen?

[IschaGast]

Misschien staat er hier iets voor je bij:
http://css-discuss.incutio.com/?page=RoundedCorners

Al denk ik dat het lastig zal worden ook vanwege je achtergrond. Ik heb niet alle technieken bekeken maar volgens mij maken ze allemaal gebruik van een plaatje om de ronde hoek te simuleren. Op een egale achtergrond zou het perfect werken maar met jouw achtergrond is het onmogelijk denk ik.

Misschien deze: http://pro.html.it/esempio/nifty/

[ Voor 7% gewijzigd door IschaGast op 25-04-2005 11:00 ]

[Verwijderd]

ja, daar was ik dus ook al bang voor.. ik zou dan eventueel kunnen kijken om die achtergrond te verwijderen, maar dan zit ik denk ik nog steeds met het probleem aan de binnenkant van die corners. De foto moet daar netjes in verwerkt zitten zoals je hieronder ziet:



iemand anders raadde me net aan om eventueel een layout te maken met behulp van tabellen. Dan zou ik de afbeeldingen in ieder geval netjes kunnen slicen. Maar zou dat echt zoveel schelen?

edit:

die laatste link is idd wel interessant. daar ga ik nog even doorheen surfen. thnx!

[ Voor 9% gewijzigd door Verwijderd op 25-04-2005 11:04 ]

[Sappie]

Ik heb deze rounded corner variant ooit gebruikt in een website: http://www.redmelon.net/tstme/4corners/ (dan in de source kijken naar de second example).

Wel een overvloed aan (in dit geval noodzakelijke) div's, maar daar valt het denk ik wel mee op te lossen.

Edit:

Als de grootte van je geronde gedeelte altijd even breed en/of hoog blijft is het natuurlijk wel ff makkelijker op te lossen.

[ Voor 30% gewijzigd door Sappie op 25-04-2005 11:18 ]

[Verwijderd]

Sappie schreef op maandag 25 april 2005 @ 11:12:
Als de grootte van je geronde gedeelte altijd even breed en/of hoog blijft is het natuurlijk wel ff makkelijker op te lossen.

de layout blijft altijd dezelfde hoogte en breedte hebben ja, ik zit nu even te kijken naar je link.. nu nog even kijken hoe het precies met de images in elkaar gezet is.

[Sappie]

als de layout telkens eenzelfde breedte en hoogte heeft kun je het toch al oplossen door middel van een header (met afgeronde hoeken), 2 kolommen (één voor t plaatje en één voor de tekst) en een footer (met afgeronde hoeken). en dan uiteraard nog het onderste gedeelte.

[Verwijderd]

op deze manier dus?. Dat ga ik zo proberen. thnx!

[Sappie]

zoiets zou ik het doen denk ik ja..

wel wordt het, bedacht ik me net, nog een gegoochel als er ook andere plaatjes in het linkergedeelte moeten komen en je wilt dat een beetje netjes oplossen. Je wilt denk ik niet al die verschillende plaatjes gaan slicen, maar daar is denk ik (met waarschijnlijk 't een en ander absoluut positioneren) nog wel uit te komen.

[ Voor 9% gewijzigd door Sappie op 25-04-2005 11:36 ]

[Verwijderd]

dat wordt dus wel het geval, Ik heb 4 verschillende images die daar links zullen komen ( afhankelijk van welke pagina). Ander probleem is dat elke pagina ook een ander kleurenschema heeft. Mijn voorbeeld bovenin de post is magenta met blauw, maar een andere pagina heeft daar limoengroen met paarse tinten.

Ik zit nu echt te twijfelen of Flash niet gewoon veel makkelijker is om dit te gaan regelen..

[Sappie]

Aangezien die pagina's met een andere foto ook een ander kleurenschema hebben zou ik gewoon gebruik maken van een viertal verschillende css bestandjes (en dus ook losse plaatjes voor o.a. de corners ed). Het zal wel even een beetje aankloten zijn, maar er is echt wel uit te komen imo. Mocht je het met html / css gaan oplossen en er niet uit komen, vraag het dan hier

Verder ben ik geen voorstander van het gebruik van Flash voor complete websites, maargoed dat is mijn mening

[Verwijderd]

ik ben er ook niet echt bepaald een voorstander van om Flash te gaan gebruiken daarvoor. Ik denk dat ik het CSS verhaal wel werkend krijg, ik heb bijna de testlayout in elkaar gezet. Ik ga in ieder geval met deze oplossing voorlopig verder... thnx!

Mochten er nog andere ideeen zijn hoor ik die echter wel graag nog!

[BtM909]

Maak eens een testcase tussen jpg en png? of heb je dat al gedaan?

[bolleh]

zoiets?

ik heb een container div gemaakt, daarin 2 divjes voor links en rechts. en 4 divjes voor de corners, dat kunnen natuurlijk ook je img's zijn.

in de linker div heb ik weer 3 divjes voor je background. 1 bovenaan naast je corner, 1 onderaan naast je corner en 1 in het midden.

tuurlijk kun je ook die linker corner img's net zo breed maken als je background en dan hoef je maar 1 img in te voegen ipv 2. tis maar net wat je wilt

[Verwijderd]

BtM909 schreef op maandag 25 april 2005 @ 12:05:
Maak eens een testcase tussen jpg en png? of heb je dat al gedaan?

nee, dat had ik nog niet gedaan.. voor zover ik net gekeken heb is JPG nog even betere kwaliteit tegen lager formaat, maar misschien dat ik met de nieuwe foto's ander resultaat boek..

[BtM909]

Verwijderd schreef op maandag 25 april 2005 @ 12:45:
[...]


nee, dat had ik nog niet gedaan.. voor zover ik net gekeken heb is JPG nog even betere kwaliteit tegen lager formaat, maar misschien dat ik met de nieuwe foto's ander resultaat boek..

Aan de andere kant, het is voor school? Waarom dan zoveel moeite doen, indien png iets groter wordt?

[Sappie]

JPG wordt gecompressed hè.. dus betere kwaliteit zal het niet zijn. PNG compressed afaik nix en het is dus idd een afweging van kwaliteit tov bestandsgrootte of je JPG of PNG gaat gebruiken. (btw ik vind 40 à 50 kb niet teveel voor dat plaatje op je pagina hoor)

@bolleh: Dat begint er al op te lijken idd Een minpuntje (wat makkelijk opgelost kan worden) is het feit dat, wanneer je voor de verschillende corners deels transparante images gaat gebruiken, de rode background van je container weer tevoorschijn komt.

[bolleh]

Sappie schreef op maandag 25 april 2005 @ 12:49:
JPG wordt gecompressed hè.. dus betere kwaliteit zal het niet zijn. PNG compressed afaik nix en het is dus idd een afweging van kwaliteit tov bestandsgrootte of je JPG of PNG gaat gebruiken. (btw ik vind 40 à 50 kb niet teveel voor dat plaatje op je pagina hoor)

@bolleh: Dat begint er al op te lijken idd Een minpuntje (wat makkelijk opgelost kan worden) is het feit dat, wanneer je voor de verschillende corners deels transparante images gaat gebruiken, de rode background van je container weer tevoorschijn komt.

klopt, maar die hoeft dan ook geen background kleur te hebben he

zo werk ik altijd persoonlijk mn websites in het begin uit. gewoon met een lading divjes met verschillende kleuren etc en daarna pas de content invoegen

en het idee van die allesomvattende container div is imho dat die ook transparant wordt en dat je de rest van je stuff naargelang die div kan positioneren zodat je geen moeite hoeft te doen en alles aan de hand van de topleft corner van de pagina alles hoeft te positioneren, nogal veel werk

[ Voor 15% gewijzigd door bolleh op 25-04-2005 12:53 ]

[Verwijderd]

BtM909 schreef op maandag 25 april 2005 @ 12:47:
[...]

Aan de andere kant, het is voor school? Waarom dan zoveel moeite doen, indien png iets groter wordt?

das waar, ze maken er wel een gewoonte van om daarop te zeuren, omdat het "voor een bestaande" opdrachtgever bestemd is. Ik ga het iig sowieso wel proberen en kijken wat het mooiste oogt..

EDIT:

even een klein opzetje hoe het er nu snel uitziet met plaatjes..
http://homepages.svc.fcj.hvu.nl/1187246/dock154/test.htm

ik moet wel nog even testen in andere browsers... ( mozilla etc..)

[ Voor 23% gewijzigd door Verwijderd op 25-04-2005 13:24 ]