---

Jeg vil gerne lave denne her side i html med styles i:

http://www.henrik-jensen.dk/Imageready.html

Det kunne jeg ikke uden programmet Imageready, som jeg har brugt
til automatisk at generere den kode man ser her. Problemet er så
at Imageready, i hvert fald når jeg bruger det, tilføjer en masse
ekstra kode som umiddelbart er lidt svært at fjerne. Derudover
tilføjer programmet en ekstra pixel så bredden bliver mere end
den skal være.

Det jeg egentlig vil, er at lave denne her side i ren html med
styles helt fra bunden af. hvordan gør jeg det? Mit udgangspunkt
når jeg starter er, at jeg har et billede af hvordan siden skal
se ud, jeg ved bredden SKAL være 590px præcis, og så kender jeg
størrelsen på alle billederne. Hvordan er så den "rigtige" måde
at komme videre på?

Mit problem er at billederne på siden "lapper" ind over hinanden,
som man kan se i koden, derfor har jeg svært ved at se hvor mange
rækker og kolonner der skal være ned igennem siden.





--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

som jeg ser det har du 2 muligheder:

1. du kan via et billedbehandlingsprogram tilpasse billederne så de
passer ind i din tabel opbygning

2. droppe tabellen og opbygge dit design med div elementet
og så via posion: absolute placere dine bokse der hvor du vil ha´dem


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Henrik wrote:
> Jeg vil gerne lave denne her side i html med styles i:
>
> http://www.henrik-jensen.dk/Imageready.html
>
> Det kunne jeg ikke uden programmet Imageready, som jeg har brugt
> til automatisk at generere den kode man ser her. Problemet er så
> at Imageready, i hvert fald når jeg bruger det, tilføjer en masse
> ekstra kode som umiddelbart er lidt svært at fjerne. Derudover
> tilføjer programmet en ekstra pixel så bredden bliver mere end
> den skal være.
>
> Det jeg egentlig vil, er at lave denne her side i ren html med
> styles helt fra bunden af. hvordan gør jeg det? Mit udgangspunkt
> når jeg starter er, at jeg har et billede af hvordan siden skal
> se ud, jeg ved bredden SKAL være 590px præcis, og så kender jeg
> størrelsen på alle billederne. Hvordan er så den "rigtige" måde
> at komme videre på?
>
> Mit problem er at billederne på siden "lapper" ind over hinanden,
> som man kan se i koden, derfor har jeg svært ved at se hvor mange
> rækker og kolonner der skal være ned igennem siden.
>

Du tager billedet og sætter som
style='background-image:url(url) no-repeat'
I din box.
Derefter laver du 4 divs som du sætter med
style='position:relative'
Eller
style='position:absolute'
og så top:XXpx og left:YYpx.

Så virker det. Og det vil presentere sig meget bedre i en ikke grafisk
browser.!

mvh Kim Isaksen

---

>
> Du tager billedet og sætter som
> style='background-image:url(url) no-repeat'
> I din box.
> Derefter laver du 4 divs som du sætter med
> style='position:relative'
> Eller
> style='position:absolute'
> og så top:XXpx og left:YYpx.
>
> Så virker det. Og det vil presentere sig meget bedre i en ikke grafisk

lige som eksempel fik jeg lavet den her...

<url:http://www.imtech.dk/test/billed_og_tekst.php>

Der kan du også se fordelen ved en 'overflow:auto' i den midterste box.

en rettelse til mig selv er at det hedder background:url(url) no-repeat

Jeg gad ikke sidde og måle de præcise positioner. Det er derfor det ikke
er lige on target med positionerne. Og altså ikke fordi det ikke er muligt.!

/iM

---

kim isaksen wrote in dk.edb.internet.webdesign.html:
> >
> > Du tager billedet og sætter som
> > style='background-image:url(url) no-repeat'
> > I din box.
> > Derefter laver du 4 divs som du sætter med
> > style='position:relative'
> > Eller
> > style='position:absolute'
> > og så top:XXpx og left:YYpx.
> >
> > Så virker det. Og det vil presentere sig meget bedre i en ikke grafisk
>
> lige som eksempel fik jeg lavet den her...
>
> <url:http://www.imtech.dk/test/billed_og_tekst.php>
>
> Der kan du også se fordelen ved en 'overflow:auto' i den midterste box.
>
> en rettelse til mig selv er at det hedder background:url(url) no-repeat
>
> Jeg gad ikke sidde og måle de præcise positioner. Det er derfor det ikke
> er lige on target med positionerne. Og altså ikke fordi det ikke er muligt.!
>
> /iM
>

Hej,

Tak for de gode råd. Jeg tror godt jeg kan se hvad du mener, men jeg skal lige
prøve at lege lidt med det. Lige et par spørgsmål:

Du vil have at jeg skære hele siden som et stort billede, og så lægger
<div>-tags ind over, ikke? Hvad nu hvis billederne bare skal skæres op hver for
sig, hvordan kan jeg så styre det hele? Vil du have at jeg laver koden først,
og så tilpasser størrelsen på billederne udfra min kode, i stedet for omvendt?
Vi har nemlig en designer tilknyttet som laver billederne, og han har nok svært
ved at skære dem præcis på pixelniveau som jeg gør det i f.eks. ImageReady.

Og:
Den side jeg laver er en del af en større side - altså indholdet indgår som en
slags CMS-indhold (content management system), hvor jeg ikke er sikker på at
jeg kan anvende <div>-taggene. Men det skal jeg lige prøve først.







--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

> Du tager billedet og sætter som
> style='background-image:url(url) no-repeat'
> I din box.
> Derefter laver du 4 divs som du sætter med
> style='position:relative'
> Eller
> style='position:absolute'
> og så top:XXpx og left:YYpx.
>
> Så virker det. Og det vil presentere sig meget bedre i en ikke grafisk
> lige som eksempel fik jeg lavet den her...
>
> <url:http://www.imtech.dk/test/billed_og_tekst.php>

> en rettelse til mig selv er at det hedder background:url(url) no-repeat

Hej igen,

Jeg kom lige til at poste et indlæg med svar i toppen, beklager....



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Henrik wrote:
> Tak for de gode råd. Jeg tror godt jeg kan se hvad du mener, men jeg skal lige
> prøve at lege lidt med det. Lige et par spørgsmål:
>
> Du vil have at jeg skære hele siden som et stort billede, og så lægger
> <div>-tags ind over, ikke? Hvad nu hvis billederne bare skal skæres op hver for
> sig, hvordan kan jeg så styre det hele? Vil du have at jeg laver koden først,
> og så tilpasser størrelsen på billederne udfra min kode, i stedet for omvendt?
> Vi har nemlig en designer tilknyttet som laver billederne, og han har nok svært
> ved at skære dem præcis på pixelniveau som jeg gør det i f.eks. ImageReady.

Hvis billederne er dynamiske, og du ikke på forhånd kender størrelsen så
har du muligvis et problem. Men det ville du jo også have med tabeller
eller lign. Så skal du egentligt helst bruge noget serverside meta data
til at bestemme dit html.

Hvis du derimod godt kender størrelsen på beskærringerne så er det
letteste lige at lave lille script til at måle punkter på billedet du
skal placere din css layer i.

javascript

var pos_x,pos_y;
function show_cursor_in_ie() {
   pos_x = event.x;
pos_y = event.y;
window.status = pos_x + 'x' + pos_y;
}

i body
<body onmousemove='show_cursor_in_ie()' onmousedown='alert(pos_x + "x" +
pos_y)'>

Det virker ikke i MOZILLA da eventlisteners skal sættes i gecko

>
> Og:
> Den side jeg laver er en del af en større side - altså indholdet indgår som en
> slags CMS-indhold (content management system), hvor jeg ikke er sikker på at
> jeg kan anvende <div>-taggene. Men det skal jeg lige prøve først.

Næsten alle cms systemer jeg kender bruger netop div's da det er meget
lettere at arbejde med end tables.
Så mon ikke det kan lade sig gøre.!

Lige til sidst skal du være opmærksom på at hvis print og screen skal
være identisk kan du IKKE bruge denne løsning (da backgroud ikke default
printes med ud). Så skal du i stedet lave css layers eg. billedet med
z-index 1, teksten ovenpå med z-index mere end 1.!

mvh Kim Isaksen

---

> Hvis billederne er dynamiske, og du ikke på forhånd kender størrelsen så
> har du muligvis et problem. Men det ville du jo også have med tabeller
> eller lign. Så skal du egentligt helst bruge noget serverside meta data
> til at bestemme dit html.


Billederne er ikke dynamiske, men siderne varierer fra gang til gang, så jeg skal
sætte siden op på ny hver gang.

> Hvis du derimod godt kender størrelsen på beskærringerne så er det
> letteste lige at lave lille script til at måle punkter på billedet du
> skal placere din css layer i.
>
> javascript
>
> var pos_x,pos_y;
> function show_cursor_in_ie() {
>    pos_x = event.x;
> pos_y = event.y;
> window.status = pos_x + 'x' + pos_y;
> }
> i body
> <body onmousemove='show_cursor_in_ie()' onmousedown='alert(pos_x + "x" +
> pos_y)'>

Jeg tror ikke helt jeg forstår formuleringen "måle punkter på billedet du
skal placere din css layer i". Hvad skal jeg bruge det til? Det jeg kender er
størrelsen på de forskellige billeder jeg skal have med på siden hver gang. Men
både tabeller og ImageReady laver ekstra kode, men det mener du jeg kan løse
(nemt?) uden tabeller? Også hvis jeg har 15 små billeder på en side som krydser
hinanden ala den side i det link jeg vedlagde? Vil det ikke tage lang tid at lave
når siderne er anderledes fra gang til gang?

> Det virker ikke i MOZILLA da eventlisteners skal sættes i gecko

Tja, det skal virke i Mozilla, da min chef mener at det nok skulle være muligt at
optimere sin HTML-kode til mindst 99% af de mest brugte browsere (herunder IE,
Netcape, Opera og Mozilla).

> Næsten alle cms systemer jeg kender bruger netop div's da det er meget
> lettere at arbejde med end tables.
> Så mon ikke det kan lade sig gøre.!

Nu er det ikke et helt almindeligt CMS-system vi bruger - jeg er faktisk ikke
sikker på at jeg kan bruge <body>-tagget, da det automatisk bliver inkluderet på
siden på anden vis, så det eneste jeg kan er at skrive rent HTML og sætte
css-styles på koden...

Henrik


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Henrik wrote:
>>Hvis billederne er dynamiske, og du ikke på forhånd kender størrelsen så
>>har du muligvis et problem. Men det ville du jo også have med tabeller
>>eller lign. Så skal du egentligt helst bruge noget serverside meta data
>>til at bestemme dit html.
>
>
>
> Billederne er ikke dynamiske, men siderne varierer fra gang til gang, så jeg skal
> sætte siden op på ny hver gang.
>
>
>>Hvis du derimod godt kender størrelsen på beskærringerne så er det
>>letteste lige at lave lille script til at måle punkter på billedet du
>>skal placere din css layer i.
>>
>>javascript
>>
>>var pos_x,pos_y;
>>function show_cursor_in_ie() {
>>   pos_x = event.x;
>> pos_y = event.y;
>> window.status = pos_x + 'x' + pos_y;
>>}
>>i body
>><body onmousemove='show_cursor_in_ie()' onmousedown='alert(pos_x + "x" +
>>pos_y)'>
>
>
> Jeg tror ikke helt jeg forstår formuleringen "måle punkter på billedet du
> skal placere din css layer i". Hvad skal jeg bruge det til? Det jeg kender er
> størrelsen på de forskellige billeder jeg skal have med på siden hver gang. Men
> både tabeller og ImageReady laver ekstra kode, men det mener du jeg kan løse
> (nemt?) uden tabeller? Også hvis jeg har 15 små billeder på en side som krydser
> hinanden ala den side i det link jeg vedlagde? Vil det ikke tage lang tid at lave
> når siderne er anderledes fra gang til gang?
>
>
>>Det virker ikke i MOZILLA da eventlisteners skal sættes i gecko
>
>
> Tja, det skal virke i Mozilla, da min chef mener at det nok skulle være muligt at
> optimere sin HTML-kode til mindst 99% af de mest brugte browsere (herunder IE,
> Netcape, Opera og Mozilla).
>

Nevermind. Måle scriptet var bar ment som hjælp til at finde
positionerne til at sætte divs ind med. Der blev jeg vidst misforstået
godt og grundigt :)
Selve css og position virker fint i alle grafisk browsere der
understøtter css 1.2.

>
>>Næsten alle cms systemer jeg kender bruger netop div's da det er meget
>>lettere at arbejde med end tables.
>>Så mon ikke det kan lade sig gøre.!
>
>
> Nu er det ikke et helt almindeligt CMS-system vi bruger - jeg er faktisk ikke
> sikker på at jeg kan bruge <body>-tagget, da det automatisk bliver inkluderet på
> siden på anden vis, så det eneste jeg kan er at skrive rent HTML og sætte
> css-styles på koden...
>
> Henrik
>
>

Samme som ovenfor..!

mvh Kim Isaksen

---

Henrik <mail@henrik-jensen.dk> skrev:

> Jeg vil gerne lave denne her side i html med styles i:
>
> http://www.henrik-jensen.dk/Imageready.html

Jamen, du behøver slet ikke en tabel til opgaven - og sidde der
og fedte med rowspan og colspan - det er alt for besværligt.

Klip billederne ud i den størrelse de skal bruges, og læg dem
der hvor du vil have dem med position:absolute; - det samme
med tekstboksene.

Jeg har lige lavet et hurtigt eksempel på:
http://vebel.dk/test/henrik-jensen/hj.htm - det tog mig mindre end
en halv time.

Her har jeg lagt en ramme om tekstboksene, så du kan se hvor
meget de fylder. Den kan du bare slukke for til sidst.

> at Imageready, i hvert fald når jeg bruger det, tilføjer en masse
> ekstra kode som umiddelbart er lidt svært at fjerne.

Skrot det program til at lave kode. Det er sikkert fint til billeder,
men kode skal det holde sig fra

> tilføjer programmet en ekstra pixel så bredden bliver mere end
> den skal være.

Det kan jeg se. Mit eksempel er 593px, idet der er lavet ud fra et
screendump af din originalside, men det kan du bare justere på i
din css.

--
Allan Vebel
http://html-faq.dk

---

> Jamen, du behøver slet ikke en tabel til opgaven - og sidde der
> og fedte med rowspan og colspan - det er alt for besværligt.

Tak, det håbede jeg på du ville sige :) Jeg kan simpelhen ikke styre
sådanne sider med row og colspan.

> Jeg har lige lavet et hurtigt eksempel på:
> http://vebel.dk/test/henrik-jensen/hj.htm - det tog mig mindre end
> en halv time.

> Allan Vebel
> http://html-faq.dk

Jeg skal lige prøve at lege lidt med det, så vender jeg tilbage med
resultatet - foreløbig tak for hjælpen!



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

> Klip billederne ud i den størrelse de skal bruges, og læg dem
> der hvor du vil have dem med position:absolute; - det samme
> med tekstboksene.
>
> Jeg har lige lavet et hurtigt eksempel på:
> http://vebel.dk/test/henrik-jensen/hj.htm - det tog mig mindre end
> en halv time.
> Allan Vebel
> http://html-faq.dk

Det virker ikke rigtig for mig....

Den "content-side" jeg arbejder med, er en del af en større side. Når
jeg lægger kode op på siden, bliver der automatisk lagt kode ind i
toppen og i bunden af samme side når den bliver vist.

Det kodeeks. du har lavet "skubber" ikke min nederste bundmenu, men
placerer sig ovenpå det - det svarer til at der er en tabel på min side,
så mit indhold, og så en tabel til slut igen - håber det giver
mening(!). Hvordan undgår man det? Skal man så bruge relative i stedet
for absolute???


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials