Borders plaatsen

[bekok]

Hoi,

Ik ben momenteel bezig om een website te maken. Ik werk voornamelijk met een concept waarbij ik een plaatje als achtergrond heb en in het plaatje tekst heb. Voor een beter beeld: http://bekok.eu/mcdreamdesign/ Zoals jullie kunnen zien is de tekst dus eigenlijk gewoon geplaatst in de volgende afbeelding: http://bekok.eu/mcdreamdesign/images/background2.jpg Echter ik weet dat dit niet zo'n snelheids-vriendelijke manier van een website bouwen is. Daarom wil ik ook eigenlijk alleen maar een achtergrondslice hebben (http://bekok.eu/mcdreamdesign/images/slice2.jpg) en een footer met een plaatje en aflopende border zodat elke tekst zo lang kan zijn als mogelijk. Echter ik moet beginnen om borders te maken op de plekken waar deze in de achtergrondafbeelding zijn. Dat is echter al mijn eerste struikelblok, want ik heb wat dingen lopen proberen, maar ik heb eigenlijk geen idee hoe ik mijn code moet structuren om er voor te zorgen dat er op de huidige plekken gecodeerde borders zijn ipv een deel van een plaatje. Ik zoek hier dus wat hulp bij Ik kwam overigens deze tutorial tegen: http://net.tutsplus.com/t...-acquaint-you-with-css-3/ voor het maken van rond-aflopende borders.

[Pkunk]

Je bent dus voornamelijk aan het stoeien met hoe je het beste ronde hoekjes kan maken. Kijk eens hier bijvoorbeeld:
http://www.roundedcornr.com/

Verder kan je natuurlijk bij een heleboel sites afkijken om te kijken hoe zij rondje hoekjes hebben gemaakt.

Daarnaast kan je als je echt op performance wil spelen dingen doen als 1 plaatje met daarin alle rondje hoekjes die hebt gebruiken i.c.m. background-position.

[posttoast]

Het is maar net hoe belangrijk je het vindt dat de hoekjes in alle browsers rond zijn, maar ik gebruik zelf meestal de CSS3-oplossing (die tutorial die je noemt). In Internet Explorer werkt dat niet, maar wellicht dat een volgende versie het wel gaat ondersteunen. Graceful degradation noemt men dat.

[Verwijderd]

Ik vind je oplossing wel prima. Waarom zou je geen achterbrondafbeelding gebruiken hiervoor? Wat als je een golvend lijntje zou hebben, of een lijntje met een patroon?

Er is niet veel mis aan je eigen oplossing, en je plaatje is niet eens zo groot, 154 kB.

[Bosmonster]

Verwijderd schreef op zondag 24 mei 2009 @ 12:52:
Ik vind je oplossing wel prima. Waarom zou je geen achterbrondafbeelding gebruiken hiervoor? Wat als je een golvend lijntje zou hebben, of een lijntje met een patroon?

Er is niet veel mis aan je eigen oplossing, en je plaatje is niet eens zo groot, 154 kB.

Mwah, het is niet schaalbaar zo en het kan echt een enorm stuk kleiner dan 154 K. De gradient op de achtergrond kun je al makkelijk lostrekken bijvoorbeeld en als PNG opslaan van 1K ofzo. De witte lijnen hoeven ook niet meer dan een paar K te zijn. En het JPG'je op de achtergrond is ook wel te doen in 20-30K.

Al met al kun je het zelfde bereiken met 60%+ minder en ook nog eens meer flexibiliteit.

posttoast schreef op zondag 24 mei 2009 @ 12:52:
Het is maar net hoe belangrijk je het vindt dat de hoekjes in alle browsers rond zijn, maar ik gebruik zelf meestal de CSS3-oplossing (die tutorial die je noemt). In Internet Explorer werkt dat niet, maar wellicht dat een volgende versie het wel gaat ondersteunen. Graceful degradation noemt men dat.

CSS3 gebruiken kan prima als het geen dominerend onderdeel is van je design natuurlijk, zoals de ronde hoekjes hier op GoT. In het design van TS kun je dat imho niet zomaar wehalen voor 70% van je gebruikers, dat schaadt gewoon je ontwerp.

Losse hoekjes uitknippen zal ook niet werken in dit geval, door de gradient op de achtergrond, dus zou ik in dit geval de menu-borders als 1 achtergrond pakken en het grotere vlak eronder op de goeie ouwe manier in 2'en knippen (bovenkant en onderkant, en gewoon CSS borders links en rechts voor het middenvlak).

[ Voor 38% gewijzigd door Bosmonster op 24-05-2009 13:40 ]

[posttoast]

Bosmonster schreef op zondag 24 mei 2009 @ 13:37:
CSS3 gebruiken kan prima als het geen dominerend onderdeel is van je design natuurlijk, zoals de ronde hoekjes hier op GoT. In het design van TS kun je dat imho niet zomaar wehalen voor 70% van je gebruikers, dat schaadt gewoon je ontwerp.

Helemaal mee eens, uit mijn tekst blijkt inderdaad niet zo duidelijk dat het wat mij betreft design-afhankelijk is.