/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
'Billedrammer' i HTML/CSS ?
Fra : Stig Johansen


Dato : 20-10-09 05:41

Hej.

Ja, 'Billedrammer' - jeg ved ikke rigtig hvad jeg ellers skulle kalde det.

Indledningsvis har jeg ikke noget eksempel, for det er det jeg er ude efter
- eller om der er ladsiggørligt.

Det handler lidt om de store billeder i noget jeg sidder og fedter med:
<http://w-o-p-r.dk/test/galleri.poc3.html>

Her har jeg bare sat en border på billedet.

Men nu kunne jeg godt tænke mig hvis man kunne customisere det til at ligne
et billede, eller måske et maleri.

Når jeg skriver 'billedramme', så tænker jeg på de fysiske rammer man har
hængene på væggen.

Jeg er jo ikke særlig god til det der html og css, men jeg forestiller mig
noget i denne stil:
En eller anden div der indeholder:
- en lille img, i øverste venstre hjørne - hjørnet på rammen
- en 'venstre' img, der udgør rammen, og repeates lodret
- en lille img, i nederste venstre hjørne - hjørnet på rammen
- en 'øverste' img, der udgør rammen og repeates vandret
- en lille img, i øverste højre hjørne - hjørnet på rammen
- en 'højre' img, der udgør rammen, og repeates lodret
- en lille img, i nederste højre hjørne - hjørnet på rammen

Disse img'er kan jeg evt tage med et kamera og klippe til.

Jeg har som sagt ikke lavet noget eksempel med 'problemet', da jeg ikke ved
om det overhovedet kan lade sig gøre.

Og hvis det kan lade sig gøre, så ved jeg ikke rigtig hvor jeg skal starte.

Det skal lige siges, at da størrelse på selve billedet er kendt, må det
gerne være lavet rent i pixels.

Lige nu skal jeg kun bruge det til at designe database indhold, men hvis det
ikke kan lade sig gøre, så dropper jeg det.

Så vidt jeg kan se, så må det være noget med 8 omkransende div'er, der skal
tilpasses.

--
Med venlig hilsen
Stig Johansen

 
 
Kim Ludvigsen (20-10-2009)
Kommentar
Fra : Kim Ludvigsen


Dato : 20-10-09 05:47

Stig Johansen skrev:

> Indledningsvis har jeg ikke noget eksempel, for det er det jeg er ude efter
> - eller om der er ladsiggørligt.

Prøv at tage et kig på den sidste skabelon på denne side:
http://kimludvigsen.dk/libris/kompozer/skabeloner/index.php

Er det noget i den stil, du tænker på? I så fald kan du
hente skabelonen og tjekke koderne.

--
Mvh. Kim Ludvigsen
Bliv klogere:
http://ordforklaring.dk

Birger Sørensen (20-10-2009)
Kommentar
Fra : Birger Sørensen


Dato : 20-10-09 07:26

Stig Johansen formulerede spørgsmålet:
> Hej.
>
> Ja, 'Billedrammer' - jeg ved ikke rigtig hvad jeg ellers skulle kalde det.
>
> Indledningsvis har jeg ikke noget eksempel, for det er det jeg er ude efter
> - eller om der er ladsiggørligt.
>
> Det handler lidt om de store billeder i noget jeg sidder og fedter med:
> <http://w-o-p-r.dk/test/galleri.poc3.html>
>
> Her har jeg bare sat en border på billedet.
>
> Men nu kunne jeg godt tænke mig hvis man kunne customisere det til at ligne
> et billede, eller måske et maleri.
>
> Når jeg skriver 'billedramme', så tænker jeg på de fysiske rammer man har
> hængene på væggen.
>
> Jeg er jo ikke særlig god til det der html og css, men jeg forestiller mig
> noget i denne stil:
> En eller anden div der indeholder:
> - en lille img, i øverste venstre hjørne - hjørnet på rammen
> - en 'venstre' img, der udgør rammen, og repeates lodret
> - en lille img, i nederste venstre hjørne - hjørnet på rammen
> - en 'øverste' img, der udgør rammen og repeates vandret
> - en lille img, i øverste højre hjørne - hjørnet på rammen
> - en 'højre' img, der udgør rammen, og repeates lodret
> - en lille img, i nederste højre hjørne - hjørnet på rammen
>
> Disse img'er kan jeg evt tage med et kamera og klippe til.
>
> Jeg har som sagt ikke lavet noget eksempel med 'problemet', da jeg ikke ved
> om det overhovedet kan lade sig gøre.
>
> Og hvis det kan lade sig gøre, så ved jeg ikke rigtig hvor jeg skal starte.
>
> Det skal lige siges, at da størrelse på selve billedet er kendt, må det
> gerne være lavet rent i pixels.
>
> Lige nu skal jeg kun bruge det til at designe database indhold, men hvis det
> ikke kan lade sig gøre, så dropper jeg det.
>
> Så vidt jeg kan se, så må det være noget med 8 omkransende div'er, der skal
> tilpasses.

Rammerne om billeder og tekst på vingilf.dk er fremstillet sådan.
Næsten ;>)
Midterdelene i top og bund har bredde i CSS - men det kan lade sig gøre
dynamisk også.
Midterdelen på siderne er blot en streg, så de er border på de
elementer der viser indholdet.
Så det kan bestemt lade sig gøre.

Jeg ved ikke om du er på udkig efter alternativer, men eet kunne være,
at lægge rammen som absolut positionerede elementer indenfor det
element der skal vise billedet. Det er måske lidt nemmere med den
dynamiske del af det. Uden at have gjort forsøg. Man kan jo her bruge
top, bund, left og right placering, i stedet for at skulle kende den
faktiske størrelse af det endelige resultat - lade sidestykkerne gå
under hjørnerne. Hvis samme ramme på alle billeder, kan man også angive
disse som baggrundsbillede i css'en...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Stig Johansen (20-10-2009)
Kommentar
Fra : Stig Johansen


Dato : 20-10-09 10:22

Birger Sørensen wrote:

> Stig Johansen formulerede spørgsmålet:
>> Men nu kunne jeg godt tænke mig hvis man kunne customisere det til at
>> ligne et billede, eller måske et maleri.
>>
>> Når jeg skriver 'billedramme', så tænker jeg på de fysiske rammer man har
>> hængene på væggen.
>
> Rammerne om billeder og tekst på vingilf.dk er fremstillet sådan.
> Næsten ;>)

He- er det i orden hvis jeg hugger det til et eksempel :)?

> Midterdelene i top og bund har bredde i CSS - men det kan lade sig gøre
> dynamisk også.
> Midterdelen på siderne er blot en streg, så de er border på de
> elementer der viser indholdet.
> Så det kan bestemt lade sig gøre.

Tak - så går jeg videre med det.

> Jeg ved ikke om du er på udkig efter alternativer, men eet kunne være,
> at lægge rammen som absolut positionerede elementer indenfor det
> element der skal vise billedet. Det er måske lidt nemmere med den
> dynamiske del af det. Uden at have gjort forsøg. Man kan jo her bruge
> top, bund, left og right placering, i stedet for at skulle kende den
> faktiske størrelse af det endelige resultat - lade sidestykkerne gå
> under hjørnerne. Hvis samme ramme på alle billeder, kan man også angive
> disse som baggrundsbillede i css'en...

I bund og grund, så tænker jeg mere i en kombination af 'template' og
'styles', som man kan angive under det enkelte galleri.

Her tænker jeg specielt på denne sekvens:
.....
<div id="imagediv1">
<img id="image1" src="http://w-o-p-r.dk/images/fun/recycle_logo.jpg"
onload="loaded(this)"
onmouseover="switchzindex('1')"/>
<br/>
<b id="overskrift1" >Partially recycled</b>
<p id="tekst1">Some of the javascript on this site are made of 100% recycled
bits</p>
</div>
.....
Som mere eller mindre kan ligge i databasen.

Da ethvert billede er(eller kan være) af en arbitrær størrelse, dúer det nok
ikke med en fast baggrundsbillede.

Men i skrivende stund er jeg ved at lave serverside kode, og det visuelle må
komme senere (hvis der bliver 2 torsdage i en uge).

--
Med venlig hilsen
Stig Johansen

Birger Sørensen (21-10-2009)
Kommentar
Fra : Birger Sørensen


Dato : 21-10-09 10:54

Stig Johansen udtrykte præcist:
> Birger Sørensen wrote:
>
>> Stig Johansen formulerede spørgsmålet:
>>> Men nu kunne jeg godt tænke mig hvis man kunne customisere det til at
>>> ligne et billede, eller måske et maleri.
>>>
>>> Når jeg skriver 'billedramme', så tænker jeg på de fysiske rammer man har
>>> hængene på væggen.
>>
>> Rammerne om billeder og tekst på vingilf.dk er fremstillet sådan.
>> Næsten ;>)
>
> He- er det i orden hvis jeg hugger det til et eksempel :)?

Nu er det sådan, at stumperne er klippet ud af spillet og tilpasset til
siden.
Så man kan vel dårligt tillade sig at protestere?
Omvendt, så kan jeg jo heller ikke bare give lov, da originalerne
egentlig stammer andetsteds fra! 8-o
Men for min skyld må du gerne

>> Midterdelene i top og bund har bredde i CSS - men det kan lade sig gøre
>> dynamisk også.
>> Midterdelen på siderne er blot en streg, så de er border på de
>> elementer der viser indholdet.
>> Så det kan bestemt lade sig gøre.
>
> Tak - så går jeg videre med det.
>
>> Jeg ved ikke om du er på udkig efter alternativer, men eet kunne være,
>> at lægge rammen som absolut positionerede elementer indenfor det
>> element der skal vise billedet. Det er måske lidt nemmere med den
>> dynamiske del af det. Uden at have gjort forsøg. Man kan jo her bruge
>> top, bund, left og right placering, i stedet for at skulle kende den
>> faktiske størrelse af det endelige resultat - lade sidestykkerne gå
>> under hjørnerne. Hvis samme ramme på alle billeder, kan man også angive
>> disse som baggrundsbillede i css'en...
>
> I bund og grund, så tænker jeg mere i en kombination af 'template' og
> 'styles', som man kan angive under det enkelte galleri.
>
> Her tænker jeg specielt på denne sekvens:
> ....
> <div id="imagediv1">
> <img id="image1" src="http://w-o-p-r.dk/images/fun/recycle_logo.jpg"
> onload="loaded(this)"
> onmouseover="switchzindex('1')"/>
> <br/>
> <b id="overskrift1" >Partially recycled</b>
> <p id="tekst1">Some of the javascript on this site are made of 100% recycled
> bits</p>
> </div>
> ....
> Som mere eller mindre kan ligge i databasen.

Det ser fornuftigt ud.

> Da ethvert billede er(eller kan være) af en arbitrær størrelse, dúer det nok
> ikke med en fast baggrundsbillede.
>
> Men i skrivende stund er jeg ved at lave serverside kode, og det visuelle må
> komme senere (hvis der bliver 2 torsdage i en uge).

På trersdag..?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Jørgen Farum Jensen (20-10-2009)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 20-10-09 10:48

Stig Johansen skrev:

> Så vidt jeg kan se, så må det være noget med 8 omkransende div'er, der skal
> tilpasses.
>

Mindre kan nu nok gøre det, hvis man tænker
det igennem. Den fikserede størrelse gør
det noget lettere. Jeg ser flere metoder,
1, som i
http://webdesign101.dk/x/frame.html
der blot er to billeder lagt oven på hinanden
i samme div,
2, hvor hvor de fire hjørner skæres ud af rammen
og indsættes på samme måde som i
http://webdesign101.dk/css/eksempler/eksempel3.php
og
3. hvis billedets størrelse er variabel, og man
derfor er nødt til at have enten 4 eller 8
stykker, afhængigt af karakteren af de enkelte
sider af rammen.

Hvis du er ligeglad med visningen i IE,
er http://www.css3.info/preview/border-image/
selvfølgelig en mulighed

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Søg
Reklame
Statistik
Spørgsmål : 177580
Tips : 31968
Nyheder : 719565
Indlæg : 6409081
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste