Onderwerp: kader over foto

Hallo op mijn website www.kidsshop.be heb ik heel veel foto's van artiklen
staan.
NU wou ik over iedere foto een mooie kader zetten zoals je in PSP een
fotorand over een foto kan zetten.

Ik heb in psp een fotokader gemaakt met transparante achtergrond.
Nu,kan ik dit (en is het überhaupt mogelijk) over de image laten komen?

In een statische pagina zou ik doen met een layer, dit heb ik ook
geprobeerd.
Maar in mij asp komt het niet goed.
2 mogelijkheden: ofwel komt de kader boven de image staan (in ene repeat
region trouwens)
of wel komt het er mooi over maar heb ik boven de foto een hele witruimte.

Hoe los ik dit op?

"Viv" <vivke@pandora.be> wrote:

> Hallo

Dag Viv,

[ http://www.kidsshop.be ]
> NU wou ik over iedere foto een mooie kader zetten zoals je in PSP
> een fotorand over een foto kan zetten.
<knip>
> Hoe los ik dit op?

Het meest simpele (en ook ouderwets betrouwbare) is het de lijst in stukken
te snijden en met de afbeelding in een tabel te stoppen. Je gebruikt dan een
tabel met 9 cellen; 4 voor de hoekafbeeldingen, 4 voor de kanten en 1 voor
de afbeelding in het midden. Op die manier hoef je je ook niet echt te
bekommeren om de afmetingen van de plaat.

De hoeken kun je gewoon als IMG in de hoekcellen plaatsen en de kanten kun
je laten bestaaan uit een zich herhalend achtergrondplaatje. De cellspacing
en -padding is dan uiteraard 0 (nul) en de plaatjes (IMG) hoeven geen border
en marge en laat je weergeven als 'block' element ('display:block'), zodat
ze niet onverhoopt op de basislijn van een linebox kunnen eindigen.

Het kan allemaal natuurlijk ook stukken ingewikkelder (zeker als je
afbeeldingen niet allen even groot zijn), maar dat kan nog wel besproken
worden als dit antwoord je niet bevalt...

WD

"Warden Dave" <warden_dave@mnsys.invalid> schreef in bericht
news:e5mdi5$19ha$1@nl-news.euro.net...
> "Viv" <vivke@pandora.be> wrote:
>
>> Hallo
>
> Dag Viv,
>
> [ http://www.kidsshop.be ]
>> NU wou ik over iedere foto een mooie kader zetten zoals je in PSP
>> een fotorand over een foto kan zetten.
> <knip>
>> Hoe los ik dit op?
>
> Het meest simpele (en ook ouderwets betrouwbare) is het de lijst in
> stukken te snijden en met de afbeelding in een tabel te stoppen. Je
> gebruikt dan een tabel met 9 cellen; 4 voor de hoekafbeeldingen, 4 voor de
> kanten en 1 voor de afbeelding in het midden. Op die manier hoef je je ook
> niet echt te bekommeren om de afmetingen van de plaat.
>
> De hoeken kun je gewoon als IMG in de hoekcellen plaatsen en de kanten kun
> je laten bestaaan uit een zich herhalend achtergrondplaatje. De
> cellspacing en -padding is dan uiteraard 0 (nul) en de plaatjes (IMG)
> hoeven geen border en marge en laat je weergeven als 'block' element
> ('display:block'), zodat ze niet onverhoopt op de basislijn van een
> linebox kunnen eindigen.
>
> Het kan allemaal natuurlijk ook stukken ingewikkelder (zeker als je
> afbeeldingen niet allen even groot zijn), maar dat kan nog wel besproken
> worden als dit antwoord je niet bevalt...
>
> WD

Hoi,

die manier ken ik maar het is niet de oplossing die ik zoek.
De kader moet echt over de foto komen.
Kijk op deze url dan zie je misschien beter wat ik bedoel:
http://www.kidsshop.be/testframe.htm

alvast bedankt voor de hulp

"Viv" <vivke@pandora.be> wrote:

> De kader moet echt over de foto komen.
> Kijk op deze url dan zie je misschien beter wat ik bedoel:
> http://www.kidsshop.be/testframe.htm
>
> alvast bedankt voor de hulp

Als je echt 2 elementen (visueel) boven op elkaar wilt krijgen dan kun je
dat bijv. doen door een container, die zelf content kan hebbn, relatief te
positioneren ('positionelative') om dan 1 of meer kindelementen absoluut
te positioneren ('position:absolute'). Als je die kinderen op bijv. 'left'
en 'top' 0 (nul) positioneert dan zal de linkerbovenhoek van zo'n
kindelement gelijkvallen met de linkerbovenhoek van het ouderelement. Als
zo'n kind dan een plaatje is/bevat met transparante delen dan kun je het
ouderelement of medekind met lagere zIndex met enige bof daar doorheen zien.
Als de plaatjes waar het kader echt 'over' vallen moet niet allen gelijke
afmetingen hebben dan moet je zo natuurlijk wel voor iedere afmeting een
passend kaderplaatje hebben, of je moet de plaat door de UA op passende
grootte laten brengen, wat soms minder mooie resultaten geeft.

WD

Viv vertrouwde ons het volgende toe:

> "Warden Dave" <warden_dave@mnsys.invalid> schreef in bericht
> news:e5mdi5$19ha$1@nl-news.euro.net...
>> "Viv" <vivke@pandora.be> wrote:
>>
>>> Hallo
>>
>> Dag Viv,
>>
>> [ http://www.kidsshop.be ]
>>> NU wou ik over iedere foto een mooie kader zetten zoals je in PSP
>>> een fotorand over een foto kan zetten.
>> <knip>
>>> Hoe los ik dit op?
>>
>> Het meest simpele (en ook ouderwets betrouwbare) is het de lijst in
>> stukken te snijden en met de afbeelding in een tabel te stoppen. Je
>> gebruikt dan een tabel met 9 cellen; 4 voor de hoekafbeeldingen, 4
>> voor de kanten en 1 voor de afbeelding in het midden. Op die manier
>> hoef je je ook niet echt te bekommeren om de afmetingen van de
>> plaat.
>>
>> De hoeken kun je gewoon als IMG in de hoekcellen plaatsen en de
>> kanten kun je laten bestaaan uit een zich herhalend
>> achtergrondplaatje. De cellspacing en -padding is dan uiteraard 0
>> (nul) en de plaatjes (IMG) hoeven geen border en marge en laat je
>> weergeven als 'block' element ('display:block'), zodat ze niet
>> onverhoopt op de basislijn van een linebox kunnen eindigen.
>>
>> Het kan allemaal natuurlijk ook stukken ingewikkelder (zeker als je
>> afbeeldingen niet allen even groot zijn), maar dat kan nog wel
>> besproken worden als dit antwoord je niet bevalt...
>>
>> WD
>
> Hoi,
>
> die manier ken ik maar het is niet de oplossing die ik zoek.
> De kader moet echt over de foto komen.
> Kijk op deze url dan zie je misschien beter wat ik bedoel:
> http://www.kidsshop.be/testframe.htm
>
> alvast bedankt voor de hulp

Waarom zou je die kaders niet in een tabel kunnen opnemen?
In 8 stukken knippen en in de rand van een 9-cellen tabel zetten,
zoals al genoemd.
Neem in de middencel een iframe op en je kan daarin elke afbeelding of
varaibele pagina laten zien.

--

Vriendelijke groeten,

]-[oRus
www.westbrabantsevwg.nl

"Viv" <vivke@pandora.be> wrote:

> Hallo op mijn website www.kidsshop.be heb ik heel veel foto's van
> artiklen staan.
> NU wou ik over iedere foto een mooie kader zetten zoals je in PSP een
> fotorand over een foto kan zetten.

[ ... ]

> Hoe los ik dit op?

Hangt een beetje af van wat je kader precies is. Als het een randje is met
een dropshadow: http://www.alistapart.com/articles/cssdropshadows/

--
John Bokma
Website design: http://johnbokma.com/websitedesign/
Ervaren Perl / Java programmeur beschikbaar: http://castleamber.com/
Tevreden opdrachtgevers: http://castleamber.com/testimonials.html

"Viv" <vivke@pandora.be> schreef in bericht
news:6Nwfg.458598$kU6.12057757@phobos.telenet-ops.be...
> Hallo op mijn website www.kidsshop.be heb ik heel veel foto's van artiklen
> staan.
> NU wou ik over iedere foto een mooie kader zetten zoals je in PSP een
> fotorand over een foto kan zetten.
>
> Ik heb in psp een fotokader gemaakt met transparante achtergrond.
> Nu,kan ik dit (en is het überhaupt mogelijk) over de image laten komen?
>
> In een statische pagina zou ik doen met een layer, dit heb ik ook
> geprobeerd.
> Maar in mij asp komt het niet goed.
> 2 mogelijkheden: ofwel komt de kader boven de image staan (in ene repeat
> region trouwens)
> of wel komt het er mooi over maar heb ik boven de foto een hele witruimte.
>
> Hoe los ik dit op?
>

Opgelost zie : http://www.kidsshop.be/Scripts/prodL...p?idcategory=9

code:

<div id="container" style="position: relative; width: 175px; height: 225px;
float: left; top:0px;" >
<div id="frame" style="position:absolute; z-index:1; width: 175px;
height: 225px; left:0px; top:0px; background-image:
url(../Scripts/frame.gif); layer-background-image:
url(../Scripts/frame.gif); border: 1px none #000000;"></div>
<div id="Image" style="position:absolute; z-index:0; width: 175px;
height: 225px; left:0px; top:20px;overflow:hidden;"><a
href="prodView.asp?idproduct=<%=IDProduct%>"><img src="<%=pImagesDir &
smallImageURL%>" width="150"border=0
alt="<%=server.HTMLEncode(description)%>"></a><br><br></div></div></div>

Bedankt om me op weg te zetten!