---

Hej NG
Jeg kan ikke rigtigt få nedenstående til at virke efter hensigten:

I CSS:
..boks-v {
width: 155px;
margin-left: 5px;
float: left;
text-align: center;
}
..boks-c {
width: 95%;
margin-left: 5px;
float: left;
text-align: left;
}
..boks-h {
width: 25%;
float: right;
text-align: right;
}

I HTML body:
<div class="boks-v">
billede 100px til 150px bredt
</div>
<div class="boks-c">
en masse tekst
<div class="boks-h">
en smule tekst
</div>
</div>
Hvis det helle ligger inde i en stor boks der f.eks er 95% bred skal de
første 150 px sættes af til boks-v, boks-c skal så fylde 95% af resten af
den plads der er tilbage og inde i den skal der yderst til højre ligge en
boks-h der fylder 25% af boks-c's plads
Det er meningen at det hele skal stå på en række og at alle bokse skal
bevare bredden uanset f.eks billedernes størrelse.
Kan det overhovedet lade sig gøre?
http://www.peter-m-p.dk/test/moebler.shtml
--
Hilsen
Mia
www.jalo-smykker.dk

---

Mia J wrote:

[snip css og html]

> Hvis det helle ligger inde i en stor boks der f.eks er 95% bred
> skal de første 150 px sættes af til boks-v, boks-c skal så fylde
> 95% af resten af den plads der er tilbage og inde i den skal der
> yderst til højre ligge en boks-h der fylder 25% af boks-c's plads

Først skal du være opmærksom på, at en blockelements totale bredde er
givet ved
   total bredde = width + paddings + borders + margins

I dine angivne eksempler med 'width: 95%' og 'margin-left: 5px'
bliver den totale bredde af det givne element altså 95%+5px. Altså en
størrelse, man ikke rigtig har styr på.

> Det er meningen at det hele skal stå på en række og at alle bokse
> skal bevare bredden uanset f.eks billedernes størrelse.
> Kan det overhovedet lade sig gøre?
> http://www.peter-m-p.dk/test/moebler.shtml

I det angivne eksempel er det næsten lige før en tabel ville være at
foretrække - der er jo tale om data vedr. et produkt.

Men ellers kan du forsøge dig med noget i den her stil:

<div id="container">
   
   <div class="boks-v">
       <img ... />
   </div>

   <div class="boks-c">
       <div class="boks-c-body">
           Rigtig fin, gammel ...

           <div class="boks-h">
               Nr. 15-001
           </div>
       </div>
   </div>

</div>

..boks-v {
   clear: left;
   float: left;
   width: 150px;    
}

..boks-c {
   margin-left: 150px;
}

..boks-h {
   width: 25%;
}

Jeg har ikke forsøgt med ovenstående, og generelt føler jeg, at en
tabel vil være meget bedre egnet til den givne problemstilling. Der
er trods alt tale om data vedr. et produkt, og da der formentlig skal
præsenteres flere produkter på samme side, vil en tabel netop være at
foretrække.

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

---

"Anders Thorsen Holm" skrev i en meddelelse:
[snip]
> Jeg har ikke forsøgt med ovenstående, og generelt føler jeg, at en
> tabel vil være meget bedre egnet til den givne problemstilling. Der
> er trods alt tale om data vedr. et produkt, og da der formentlig skal
> præsenteres flere produkter på samme side, vil en tabel netop være at
> foretrække.

Tak for hurtigt svar.
Jeg bruger de gode gamle tabeller til formålet. Det bliver helt nostalgisk.

--
Hilsen
Mia
www.jalo-smykker.dk

---

"Mia J" skrev i en meddelelse
> Tak for hurtigt svar.
> Jeg bruger de gode gamle tabeller til formålet. Det bliver helt
nostalgisk.

Jeg var lige lidt hurtig!
Kan man i css definere bredden af henholdsvis kollonne 2 og 3 og måske
samtidig tvinge dem til at holde til højre?

--
Hilsen
Mia
www.jalo-smykker.dk

---

Mia J wrote:

> Kan man i css definere bredden af henholdsvis kollonne 2 og 3

Det kan gøres ved hjælp af <colgroup> og CSS:

[HTML]

<table class="products">
<colgroup>
<col class="productimg" />
<col class="productdesc" />
<col class="productcode" />
</colgroup>
<thead>
<tr><th>Billede</th><th>Beskrivelse</th><th>Kode</th></tr>
</thead>
<tbody>
<tr>
<td><img ... /></td>
<td>Bla bla bla</td>
<td>TK-421</td>
</tr>
</tbody>
</table>


[CSS]

table.products {
   width: 100%;
   border-collapse: collapse;
   border: none;
   margin: 0;
   padding: 0;
}

table.products td {
   margin: 0;
   padding: 0;
}

table.products col.productimg {
   width: 150px;
}

table.products col.productdesc {
   /* bredden defineres ikke - denne søjle burde tilpasse sig */
}

table.products col.productcode {
   width: 25%;
}


Ovenstående bredder tager dog udgangspunkt i *hele* tabellens bredde.
Der er muligvis også overflødige deklarationer.

> og måske samtidig tvinge dem til at holde til højre?

Mener du højrejustering af teksten? Eller skal tabellen gøres så
bred, som der nu er plads til?

I ovenstående CSS er tabellen sat til 100% bredde af det, der er til
rådighed. Kolonnen med koden burde derfor ligge helt ude til højre.

Ønskes højrejustering af tekst i en bestemt kolonne, bliver du nødt
til at tildele de pågældende celler en klasse med 'text-align:
right'. Det ser dog ud til, at IE f.eks. tillader, at man angiver
'text-align: right' oppe i col.productcode-reglen.

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

---

Anders Thorsen Holm wrote:

[snip brug af <col> og CSS]
> Det ser dog ud til, at IE f.eks. tillader, at
> man angiver 'text-align: right' oppe i col.productcode-reglen.

Og for en god ordens skyld bør det her påpeges, at det er i strid med
specifikationen, jvf.

   <http://www.w3.org/TR/CSS2/tables.html#q4>

| Table cells may belong to two contexts: rows and columns. However, in
| the source document cells are descendants of rows, never of columns.
| Nevertheless, some aspects of cells can be influenced by setting
| properties on columns.

Egentlig ærgeligt, at det kun er tabelcellers border, background, width
og visibility, man kan justere på via <col>-elementerne.

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

---

"Anders Thorsen Holm" skrev i en meddelelse:
> > Det ser dog ud til, at IE f.eks. tillader, at
> > man angiver 'text-align: right' oppe i col.productcode-reglen.
>
> Og for en god ordens skyld bør det her påpeges, at det er i strid med
> specifikationen, jvf.
>
> <http://www.w3.org/TR/CSS2/tables.html#q4>
>
> | Table cells may belong to two contexts: rows and columns. However, in
> | the source document cells are descendants of rows, never of columns.
> | Nevertheless, some aspects of cells can be influenced by setting
> | properties on columns.
>
> Egentlig ærgeligt, at det kun er tabelcellers border, background, width
> og visibility, man kan justere på via <col>-elementerne.

Okay 10000 gange tak for hjælpen. Ovenstående må så klares med en div style
i de pågældende celler.


--
Mange hilsner
Mia
www.jalo-smykker.dk

---

Mia J wrote:

> Ovenstående må så klares med en div style i de pågældende celler.

Du kan også bare tildele de enkelte celler en klasse:

[HTML]
....
<tr>
<td><img ... /></td>
<td>beskrivelse</td>
<td class="code"></td>
</tr>
....

[CSS]

td.code {
   text-align: right;
}

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

---

Hej Anders.
"Anders Thorsen Holm" <zoolook@daimi.au.invalid> skrev i en meddelelse
news:Xns94BDCC8A213AFzoolook@130.225.247.90...
> Mia J wrote:
>
> > Ovenstående må så klares med en div style i de pågældende celler.
>
> Du kan også bare tildele de enkelte celler en klasse:
>
> [HTML]
> ...
> <tr>
> <td><img ... /></td>
> <td>beskrivelse</td>
[snip]
Nu skal du ikke lære Mia for meget om alle de tabeller. Bare et råd, hun
er nemlig lige sluppet af med alle de tabeller i tabeller Mvh Knud

---

from south wrote:

> Nu skal du ikke lære Mia for meget om alle de tabeller. Bare et
> råd, hun er nemlig lige sluppet af med alle de tabeller i tabeller
>

Hehe, nej det kan der være noget om. Men i det konkrete tilfælde er en
tabel, efter min mening, den bedst passende løsning. Siden skal
præsentere noget data omkring møbler - billede, beskrivelse, kode og
muligvis yderligere information - her er det naturligt at benytte en
tabel, særligt hvis der skal vises information om flere produkter på en
gang.

Alternativt kunne man benytte <dl>-lister, men hvis der er mere end 1
eller 2 stumper information om hvert produkt, er en definitionsliste
ikke længere egnet.

Nok er tabeller ikke beregnet til layout - men de kan/skal/bør så
sandelig stadig bruges til det, de er beregnet til, i stedet for at
skrue alle (u)mulige div-i-div-baserede løsninger sammen.

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

---

Hej Anders.
"Anders Thorsen Holm" <zoolook@daimi.au.invalid> skrev i en meddelelse
news:Xns94BDCFBFDC183zoolook@130.225.247.90...
> from south wrote:
>
> Hehe, nej det kan der være noget om. Men i det konkrete tilfælde er en
[snip]
Godt ord igen, forstår dig, og din forklaring. Det var kun en fodnote,
som du sikkert også forstod. Og Mia forstod den sikkert også Mvh
Knud

---

"from south" skrev i en meddelelse:
> Godt ord igen, forstår dig, og din forklaring. Det var kun en fodnote,
> som du sikkert også forstod. Og Mia forstod den sikkert også Mvh
> Knud

Hej Knud
Sikke en tillid til din lærling
Nej, jeg er så glad for det jeg har lært, at der lige skulle sluges en kamel
før jeg kunne se fornuften i at bruge tabeller til dette projekt.
Det jeg så glæder mig over er, at jeg får lært at bruge css i den
forbindelse også.
Hvad var livet før css?

--
Mange hilsner
Mia
www.jalo-smykker.dk

---

Mia J wrote:

> Nej, jeg er så glad for det jeg har lært, at der lige skulle
> sluges en kamel før jeg kunne se fornuften i at bruge tabeller til
> dette projekt.

He, det gik da ellers meget fint

> Det jeg så glæder mig over er, at jeg får lært at
> bruge css i den forbindelse også.

Godt at høre.

> Hvad var livet før css?

<font>, <center>, <body alink="blue" vlink="red">, etc. ?!

Jeg har taget et lille kig på din side igen:

   <http://www.peter-m-p.dk/test/moebler.shtml>

Dine "se stort billede"-links bruger javascript til at åbne billeder
i et nyt vindue. Folk, der af den ene eller anden grund har
deaktiveret javascript, vil derfor ikke kunne se de store billeder
ved klik på de links.

Men det kan du hurtigt lave om på: i stedet for at skrive:

<a href="#" onclick="newWindow('salg/028.jpg', 371, 370);return
false;">se stort billede</a>

tilføjer du blot stien til billedet:

<a href="salg/028.jpg" onclick="newWind('salg/028.jpg',371,370);
return false;">se stort billede</a>

så vil det fungere som et almindelig link, hvis javascript er slået
fra.


Og så behøver du heller ikke at bruge de der <div class="p10"> inde i
tabelcellerne - giv i stedet selve tabelcellerne den klasse, så har
det samme virkning.

Altså: i stedet for

<td>
<img src="salg/tn_028.jpg" width="150" height="120" alt="">
<div class="p10">
<a href="#" onclick="newWindow('salg/028.jpg', 371, 370);return
false;">se stort billede</a>
</div>      
</td>

kan du nøjes med:

<td class="p10">
<img src="salg/tn_028.jpg" width="150" height="120" alt="" />
<a href="salg/028.jpg" onclick="newWind('salg/028.jpg',371,370);
return false;">se stort billede</a>
</td>


Bare klø på, det ser efterhånden rigtig godt ud!

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

---

"Anders Thorsen Holm" skrev i en meddelelse:
> > Nej, jeg er så glad for det jeg har lært, at der lige skulle
> > sluges en kamel før jeg kunne se fornuften i at bruge tabeller til
> > dette projekt.
>
> He, det gik da ellers meget fint

Jo flere ting jeg får lagt ind i de tabeller jo mere kan jeg mærke kamelen


> > Det jeg så glæder mig over er, at jeg får lært at
> > bruge css i den forbindelse også.
>
> Godt at høre.
>
> > Hvad var livet før css?
>
> <font>, <center>, <body alink="blue" vlink="red">, etc. ?!

Puha ja det er også rigtigt, men det er heldigvis en evighed (mindst 3
måneder) siden.


> Jeg har taget et lille kig på din side igen:
>
> <http://www.peter-m-p.dk/test/moebler.shtml>

Det er jeg glad for. Man spørger jo ikke om noget man tror er rigtigt!

> Dine "se stort billede"-links bruger javascript til at åbne billeder
> i et nyt vindue. Folk, der af den ene eller anden grund har
> deaktiveret javascript, vil derfor ikke kunne se de store billeder
> ved klik på de links.
>
> Men det kan du hurtigt lave om på: i stedet for at skrive:
>
> <a href="#" onclick="newWindow('salg/028.jpg', 371, 370);return
> false;">se stort billede</a>
>
> tilføjer du blot stien til billedet:
>
> <a href="salg/028.jpg" onclick="newWind('salg/028.jpg',371,370);
> return false;">se stort billede</a>
>
> så vil det fungere som et almindelig link, hvis javascript er slået
> fra.

Det vil jeg så ændre, jeg troede kun at man kunne åbne "hel side" uden JS

> Og så behøver du heller ikke at bruge de der <div class="p10"> inde i
> tabelcellerne - giv i stedet selve tabelcellerne den klasse, så har
> det samme virkning.
<snip kode>

Selvfølgelig, det tænkte jeg ikke lige på.

> Bare klø på, det ser efterhånden rigtig godt ud!

Mange tak og endnu engang tak for hjælpen.

--
Hilsen
Mia
www.jalo-smykker.dk

---

"Anders Thorsen Holm" skrev i en meddelelse:
<snip>
> Men det kan du hurtigt lave om på: i stedet for at skrive:
>
> <a href="#" onclick="newWindow('salg/028.jpg', 371, 370);return
> false;">se stort billede</a>
>
> tilføjer du blot stien til billedet:
>
> <a href="salg/028.jpg" onclick="newWind('salg/028.jpg',371,370);
> return false;">se stort billede</a>
>
> så vil det fungere som et almindelig link, hvis javascript er slået
> fra.

Hej Anders
Var det en lidt tidlig aprilsnar? Nu åbner et stort vindue med billedet
oppe i det ene hjørne og det er altså ikke særlig kønt.

--
Hilsen
Mia
www.jalo-smykker.dk

---

"Mia J" skrev i en meddelelse:
> Hej Anders
> Var det en lidt tidlig aprilsnar? Nu åbner et stort vindue med
billedet
> oppe i det ene hjørne og det er altså ikke særlig kønt.

Jeg ved ikke lige hvad jeg fik lavet, men nu virker det. Sorry

--
Hilsen
Mia
www.jalo-smykker.dk