Schaduwrand

Status
Niet open voor verdere reacties.
G

gast3913

Gebruiker
Lid geworden
31 dec 2006
Berichten
77
Beste Helpmij forumleden,

Ik ben bezig met het maken van een nieuwe website en ik wil me meer richten op het grafisch ontwerpen daarvan. Dit omdat de vorige websites daar op te schoten.
Ik heb nu via html en een paar plaatjes die horizontaal en verticaal worden herhaald dit weten te bereiken: http://img827.imageshack.us/img827/7694/schaduwrand.png

Probleem is nu dat het hele gebeuren niet verticaal ge-resized word wanneer de content groter zou worden. De code doet er hier nu even niet zo zeer toe. Het plaatje laat zien wat ik wil doen. maar dus ook het verticaal resizen.
Wat is nu de beste manier om dit aan te pakken?

Met vriendelijke groeten en bij voorbaat dank,

Jules.
 
zou ik toch even je code mogen zien?
dan kan ik je sugestie geven :)
 
CSS3 heeft een mooie prop genaamd box-shadow en die doet precies wat je wilt!



(Natuurlijk is er ook voor dit 'probleem' geen 100% oplossing: CSS3 werkt alleen in nieuwere browsers!)
 
Hoi Jules,
Als je geen css3 wilt of kunt *) gebruiken, dan zet je de schaar in het image:

schaar-er-in.png

Het middenstuk haal je er tussen uit, en de boven- en onderkant zet je naast elkaar. Rechts ervan komt een stuk van het middendeel: net zo hoog als de wat er naast zit:

sprite-geplakt.png

Hiermee heb je een zg. css-sprite (gecombineerd img) gemaakt. Die gaan we nu monteren als achtergrond. Dat kan bv. als volgt:
  • Het middenstuk komt als background-image in de <body>, en wordt verticaal herhaald (repeat-y).
  • Het bovenstuk komt als background-image in een <div> meteen na de body: met de hoogte van het bovenstuk.
  • Het onderstuk komt als background-image in een <div> als laatste in de body: met de hoogte van het onderstuk.
Zo worden de boven- en onderkant over de <body>-kolom met alleen het middenstuk heen geplakt, en is het plaatje compleet.
De goede gedeelten van het image worden steeds met de background-position geselecteerd.

Als nu de body groeit vanwege een langere pagina, dan wordt de middenkolom automatisch hoger, en blijven de boven- en onderkant netjes op hun plaats.

Met vriendelijke groet,
CSShunter
__________
*) Bv. bij een karteltjes-randje.
 
Laatst bewerkt:
MOOOoooi!

Voor de geïnteresseerden Dit was mijn oplossing: http://www.2shared.com/file/S_d4bFdW/border_test.html en ik zag direct al toen het af was dat de code niet bepaald goed opgezet was. Door de - waarden bijvoorbeeld. Ik heb het met de box shadow voor elkaar gekregen (harstikke mooi) maar ik weet dat toch nog redelijk veel mensen niet aan IE9 zitten en aan andere nieuwe browsers....dus ik denk dat ik voor de work arround ga van css hunter. zeer mooi uitgevonden! Nu nog even zien toe te passen maar dat gaat denk ik wel lukken :) Ik begrijp het principe :)

Hartelijk dank allemaal!

Toppie!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan