---

Jeg forsøger at formattere et fotogalleri ved hjælp af css, men det vil ikke
rigtig arte sig for mig!
Problemet er, at ikke alle billeder er lige høje og derved bliver det noget
rod at se på.
Se http://www.ikasthistorie.dk/tulstrupbilleder.asp
Jeg vil gerne have alle billederne til at stå med overkanten på linie samt
at der altid er 4 billeder på række, men det er ikke lykkedes indtil nu!
Er der nogen, der har et forslag?

Alle billederne er anbragt i en ramme med fast bredde vha
<div class="billeder">
</div>

Derindimellem er billederne med undertekst angivet således:
<div class="minifoto">
<img src="[billede]" Alt="">
<p>[billedtekst]</p>
</div>

Ved hver fjerde billede er der for at tvinge til ny linie skrevet:
<div class="minifoto nylinje">
<img src="[billede]" Alt="">
<p>[billedtekst]</p>
</div>

I CSS-filen har jeg som forsøg under 'div.minifoto' forsøgt med
'height:450px', men det virker ikke.

CSS-filen indeholder:

div.billeder{
position:absolute;
left: 160px;
top : 160px;
width:630px;
float=left;
margin-top : 0px;
margin-bottom : 10px;
margin-right : 0px;
border :1px solid black; }

div.minifoto {
width: 130px;
/* height:450px */
float: left;
margin: 10px;
background: url(ramme1.gif) no-repeat; }

div.minifoto img {
border: 1px solid #777;
margin: 10px 0 0 10px; }

div.minifoto p {
margin: 0;
padding: 0 20px 20px 10px;
background: url(ramme2.gif) no-repeat 0 100%; }

..nylinje { clear: left; }

Mvh Kurt

---

Kurt G:
> Jeg forsøger at formattere et fotogalleri ved hjælp af css, men det vil ikke
> rigtig arte sig for mig!
> Problemet er, at ikke alle billeder er lige høje og derved bliver det noget
> rod at se på.
> Se http://www.ikasthistorie.dk/tulstrupbilleder.asp
> Jeg vil gerne have alle billederne til at stå med overkanten på linie samt at
> der altid er 4 billeder på række, men det er ikke lykkedes indtil nu!
> Er der nogen, der har et forslag?
>
snip
> Mvh Kurt

Hvis du validerer, og retter fejlene, vil det måske ændre sig.
Mellemrum er ikke tilladt i URI'er - brug %20 is stedet.

Din CSS er også fejlbehæftet.
opx er ikke en brugbar værdi - det er 0px derimod (laver den selv,
tit).
Den kode du har skrevet her i NG er ikke den samme som du har på siden.
Specielt for dine billeder har du skrevet at du har "float : left" -
men på siden står der "float = left". Hvilket giver et helt andet
resultat (en valideringsfejl i stedet for at floate dine billeder til
venstre)
Der er flere fejl (manglende ; og amnglende enheder) - men brug
validatorerne, og find dem selv.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Ret fejlene, og se om det ikke hjælper - ellers må du vende tilbage.

Birger

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

---

Birger Sørensen har bragt dette til os:
> Kurt G:
>> Jeg forsøger at formattere et fotogalleri ved hjælp af css, men det vil
>> ikke rigtig arte sig for mig!
>> Problemet er, at ikke alle billeder er lige høje og derved bliver det noget
>> rod at se på.
>> Se http://www.ikasthistorie.dk/tulstrupbilleder.asp
>> Jeg vil gerne have alle billederne til at stå med overkanten på linie samt
>> at der altid er 4 billeder på række, men det er ikke lykkedes indtil nu!
>> Er der nogen, der har et forslag?
>>
> snip
>> Mvh Kurt
>
> Hvis du validerer, og retter fejlene, vil det måske ændre sig.
> Mellemrum er ikke tilladt i URI'er - brug %20 is stedet.
>
> Din CSS er også fejlbehæftet.
> opx er ikke en brugbar værdi - det er 0px derimod (laver den selv, tit).
> Den kode du har skrevet her i NG er ikke den samme som du har på siden.
> Specielt for dine billeder har du skrevet at du har "float : left" - men på
> siden står der "float = left". Hvilket giver et helt andet resultat (en
> valideringsfejl i stedet for at floate dine billeder til venstre)
> Der er flere fejl (manglende ; og amnglende enheder) - men brug
> validatorerne, og find dem selv.
>
> http://validator.w3.org/
> http://jigsaw.w3.org/css-validator/
>
> Ret fejlene, og se om det ikke hjælper - ellers må du vende tilbage.
>
> Birger

Jeg kan se du arbejder med et ;>)
Det er kun mellemrum i billedreferancer, der skal erstattes med %20 - i
overskriften må du godt bruge almindelige mellemrum ;>)

Du har måske også en misforståelse af clear. Der cleares før det
element, det står på - ikke efter.
Så din nylinje skal stå på det element der kommer _efter_ det sidste på
linien. Første gang på det 5. element - derefter på hvert 4.

Birger

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

---

Lige nu har du problemer med padding på p-elementerne, og margin på
minifoto. De støder sammen, og flytter minifoto.

Prøve at sætte padding-bottom til 0 på p'erne, og sæt den i stedet på
minifoto.

Birger

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

---

hej Kurt
jeg har brugt masser af tid på samme type med masser af div
men da jeg nærlæste hvad du ville, når du kun vil have 4 billeder på række , så
ville jeg bygge det i en tabel istedet for, for så er der helt styr på tingene
så kort og godt mit forslag er <tabel>

M.V.H. bruno

Kurt G wrote in dk.edb.internet.webdesign.html:
> Jeg forsøger at formattere et fotogalleri ved hjælp af css, men det vil ikke
> rigtig arte sig for mig!
> Problemet er, at ikke alle billeder er lige høje og derved bliver det noget
> rod at se på.
> Se http://www.ikasthistorie.dk/tulstrupbilleder.asp
> Jeg vil gerne have alle billederne til at stå med overkanten på linie samt
> at der altid er 4 billeder på række, men det er ikke lykkedes indtil nu!
> Er der nogen, der har et forslag?
>
> Alle billederne er anbragt i en ramme med fast bredde vha
> <div class="billeder">
> </div>
>
> Derindimellem er billederne med undertekst angivet således:
> <div class="minifoto">
> <img src="[billede]" Alt="">
> <p>[billedtekst]</p>
> </div>
>
> Ved hver fjerde billede er der for at tvinge til ny linie skrevet:
> <div class="minifoto nylinje">
> <img src="[billede]" Alt="">
> <p>[billedtekst]</p>
> </div>
>
> I CSS-filen har jeg som forsøg under 'div.minifoto' forsøgt med
> 'height:450px', men det virker ikke.
>
> CSS-filen indeholder:
>
> div.billeder{
> position:absolute;
> left: 160px;
> top : 160px;
> width:630px;
> float=left;
> margin-top : 0px;
> margin-bottom : 10px;
> margin-right : 0px;
> border :1px solid black; }
>
> div.minifoto {
> width: 130px;
> /* height:450px */
> float: left;
> margin: 10px;
> background: url(ramme1.gif) no-repeat; }
>
> div.minifoto img {
> border: 1px solid #777;
> margin: 10px 0 0 10px; }
>
> div.minifoto p {
> margin: 0;
> padding: 0 20px 20px 10px;
> background: url(ramme2.gif) no-repeat 0 100%; }
>
> ..nylinje { clear: left; }
>
> Mvh Kurt
>
>


--
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

---

Bruno Christensen skrev:

> jeg har brugt masser af tid på samme type med masser af div
> men da jeg nærlæste hvad du ville, når du kun vil have 4 billeder på række , så
> ville jeg bygge det i en tabel istedet for, for så er der helt styr på tingene
> så kort og godt mit forslag er <tabel>

Det har den ulempe at billederne forsvinder hvis vinduet ikke kan
rumme dem på en gang.

Her kan du se billeder der tilsyneladende er opstillet i en tabel
- men det er de bare ikke. Prøv at formindske vinduet og se hvad
der sker.


http://bertel.lundhansen.dk/?page=snowpictures/snowpictures&m=K

Det er lavet ved at hvert billede er lagt i en venstre-floatet
div inden i en rammediv der også er floatet.

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

"Bertel Lund Hansen" <unospamo@lundhansen.dk> skrev i en meddelelse
news:r8b435dib96kqa46kprqnl3a23vt34q99d@news.stofanet.dk...
> Bruno Christensen skrev:
>
>> jeg har brugt masser af tid på samme type med masser af div
>> men da jeg nærlæste hvad du ville, når du kun vil have 4 billeder på
>> række , så
>> ville jeg bygge det i en tabel istedet for, for så er der helt styr på
>> tingene
>> så kort og godt mit forslag er <tabel>
>
> Det har den ulempe at billederne forsvinder hvis vinduet ikke kan
> rumme dem på en gang.
>
KLIPPET
> --
> Bertel
> http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/

Jeg har prøvet at anbringe billederne i en tabel, som er inde i den store
div med bredden 630px.
Selv om man gør vinduet smallere forbliver billederne, så det ser ud til at
blive løsningen.
Se http://www.ikasthistorie.dk/tulstrupbilleder1.asp

Mvh Kurt

---

Kurt G skrev:

> Jeg har prøvet at anbringe billederne i en tabel, som er inde i den store
> div med bredden 630px.

Tabeller er et helvede at vedligeholde.

Her er koden til mine billeder fra Horsens. Kun 4 linjer er medtaget, og
jeg har udskiftet linket til de store billeder med XYZ, kun for ikke at forvirre:

<div id='midtfelt'>
<p class='indeksbillede'><a href='XYZ'><img src='snowpictures/01.jpg' width='150' height='113' alt='snowpictures/01.jpg'></a><br>Nr. 1</p>
<p class='indeksbillede'><a href='XYZ'><img src='snowpictures/02.jpg' width='150' height='113' alt='snowpictures/02.jpg'></a><br>Nr. 2</p>
<p class='indeksbillede'><a href='XYZ'><img src='snowpictures/03.jpg' width='150' height='113' alt='snowpictures/03.jpg'></a><br>Nr. 3</p>
<p class='indeksbillede'><a href='XYZ'><img src='snowpictures/04.jpg' width='150' height='113' alt='snowpictures/04.jpg'></a><br>Nr. 4</p>
</div>

#midtfelt {
   margin-left: 13em;
   position: relative;
   display: block;
   height: 45em;
   min-height: 45em;
}
head+body #midtfelt { height:auto; }

..indeksbillede {
   float: left;
   width: 150px;
   height: 170px;
   margin: 0;
   padding: 10px;
   text-align: center;
}

Mere behøver du ikke.

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

"Bertel Lund Hansen" <unospamo@lundhansen.dk> skrev i en meddelelse
news:jfj435lucbp7o7bppda4bafjle587681i9@news.stofanet.dk...
> Kurt G skrev:
>
>> Jeg har prøvet at anbringe billederne i en tabel, som er inde i den store
>> div med bredden 630px.
>
> Tabeller er et helvede at vedligeholde.
>
> Her er koden til mine billeder fra Horsens. Kun 4 linjer er medtaget, og
> jeg har udskiftet linket til de store billeder med XYZ, kun for ikke at
> forvirre:
>
> <div id='midtfelt'>
> <p class='indeksbillede'><a href='XYZ'><img src='snowpictures/01.jpg'
> width='150' height='113' alt='snowpictures/01.jpg'></a><br>Nr. 1</p>
> <p class='indeksbillede'><a href='XYZ'><img src='snowpictures/02.jpg'
> width='150' height='113' alt='snowpictures/02.jpg'></a><br>Nr. 2</p>
> <p class='indeksbillede'><a href='XYZ'><img src='snowpictures/03.jpg'
> width='150' height='113' alt='snowpictures/03.jpg'></a><br>Nr. 3</p>
> <p class='indeksbillede'><a href='XYZ'><img src='snowpictures/04.jpg'
> width='150' height='113' alt='snowpictures/04.jpg'></a><br>Nr. 4</p>
> </div>
>
> #midtfelt {
> margin-left: 13em;
> position: relative;
> display: block;
> height: 45em;
> min-height: 45em;
> }
> head+body #midtfelt { height:auto; }
>
> .indeksbillede {
> float: left;
> width: 150px;
> height: 170px;
> margin: 0;
> padding: 10px;
> text-align: center;
> }
>
> Mere behøver du ikke.
>
> --
> Bertel
> http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/

Det vil nok ikke betyde så meget for mig.
Jeg sætter lidt ASP-kode til at læse alle *.jpg filer i en folder og
derefter lave tabellen med billederne. Det tager lidt længere første gang,
men med flere billedgallerier er tiden hurtigt tjent hjem!

Mvh Kurt

---

Kurt G skrev:

> Det vil nok ikke betyde så meget for mig.
> Jeg sætter lidt ASP-kode til at læse alle *.jpg filer i en folder og
> derefter lave tabellen med billederne. Det tager lidt længere første gang,
> men med flere billedgallerier er tiden hurtigt tjent hjem!

Jeg bruger såmænd PHP til at ordne mine billeder.

Helvedet begynder når man skal indpasse et nyt billede på tredje
plads i anden linje.

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

"Kurt G" <kurt_g@guldbaek.net> skrev i en meddelelse news:4a3241f5$0$90270
Klippet
>> Det har den ulempe at billederne forsvinder hvis vinduet ikke kan
>> rumme dem på en gang.
>>
> KLIPPET
>> --
>> Bertel
>> http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
>
> Jeg har prøvet at anbringe billederne i en tabel, som er inde i den store
> div med bredden 630px.
> Selv om man gør vinduet smallere forbliver billederne, så det ser ud til
> at blive løsningen.
> Se http://www.ikasthistorie.dk/tulstrupbilleder1.asp
>
> Mvh Kurt

Det var vist noget vrøvl!
Jeg forstod det i første omgang sådan, at tabellen med alle billeder
forsvandt, men det er jo ikke tilfældet!
Selvfølgelig bliver der klippet af billedrne i højre kant, men det kan jeg
vist leve med i dette tilfælde. Der skal et ret lille vindue til, før det
bliver et problem!

Mvh Kurt

---

Kurt G skrev:

> vist leve med i dette tilfælde. Der skal et ret lille vindue til, før det
> bliver et problem!

Som f.eks. vinduet på en mobil?

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

"Bertel Lund Hansen" <unospamo@lundhansen.dk> skrev i en meddelelse
news:ldl435dut40nek118t19ev07cp72imrnh0@news.stofanet.dk...
> Kurt G skrev:
>
>> vist leve med i dette tilfælde. Der skal et ret lille vindue til, før det
>> bliver et problem!
>
> Som f.eks. vinduet på en mobil?
>
> --
> Bertel
> http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/

Jeg må indrømme, at så langt tænker jeg ikke.
Det har heller ikke været noget krav fra dem, der skal bruge sitet!

Mvh Kurt

---

Kurt G skrev:

> > Som f.eks. vinduet på en mobil?

> Jeg må indrømme, at så langt tænker jeg ikke.

Jeg tænker sådan set ikke langt. Jeg tænker bare i fleksibelt
design, og så vil det automatisk virke i mange browsere.

> Det har heller ikke været noget krav fra dem, der skal bruge sitet!

Det er ikke smart. Andelen af små computere (mobiler og andre
håndholdte) vil være støt stigende i mange år endnu.

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

Bertel Lund Hansen skrev:
> Kurt G skrev:
>
>>> Som f.eks. vinduet på en mobil?
>
>> Jeg må indrømme, at så langt tænker jeg ikke.
>
> Jeg tænker sådan set ikke langt. Jeg tænker bare i fleksibelt
> design, og så vil det automatisk virke i mange browsere.
>
>> Det har heller ikke været noget krav fra dem, der skal bruge sitet!
>
> Det er ikke smart. Andelen af små computere (mobiler og andre
> håndholdte) vil være støt stigende i mange år endnu.
>

Og det har vi vidst i årevis. Det er lidt sørgeligt
at folk, der gerne vil lave websider for andre ikke
ser sig i stand til at rådgive om den slags.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk

---

Kurt G skrev:

> <div class="minifoto nylinje">
> <img src="[billede]" Alt="">
> <p>[billedtekst]</p>
> </div>

Hvis du fjerner "nylinje" og sætter højde på
boksene, retter det sig ind.

Så må du bare finde en anden metode til
baggrunden.

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

---

"Allan Vebel" <spam@do.not> skrev i en meddelelse
news:4a321f9b$0$90271$14726298@news.sunsite.dk...
> Kurt G skrev:
>
>> <div class="minifoto nylinje">
>> <img src="[billede]" Alt="">
>> <p>[billedtekst]</p>
>> </div>
>
> Hvis du fjerner "nylinje" og sætter højde på
> boksene, retter det sig ind.
>
> Så må du bare finde en anden metode til
> baggrunden.
>
> --
> Allan Vebel
> http://html-faq.dk
> http://vebel.dk
>
Tjah, det kan man godt sige!
Nu står de alle i en enkelt kolonne i stedet for 4 kolonner.
Og det har ingen indflydelse på højden.

CSS-er:
div.minifoto
{
width: 130px;
height:350px
float: left;
margin: 10px;
background: url(kap12a.gif) no-repeat;
}

Anbringer jeg heigth før width kommer der godt nok 4 kolonner, men til
gengæld er højre kant afskåret og formatteringen er stadig underlig.
Det ser faktisk ikke ud til, at heigth slår igennem, så der må være noget
andet galt!

Mvh Kurt

---

Kurt G tastede følgende:
> "Allan Vebel" <spam@do.not> skrev i en meddelelse
> news:4a321f9b$0$90271$14726298@news.sunsite.dk...
>> Kurt G skrev:
>>
>>> <div class="minifoto nylinje">
>>> <img src="[billede]" Alt="">
>>> <p>[billedtekst]</p>
>>> </div>
>>
>> Hvis du fjerner "nylinje" og sætter højde på
>> boksene, retter det sig ind.
>>
>> Så må du bare finde en anden metode til
>> baggrunden.
>>
>> -- Allan Vebel
>> http://html-faq.dk
>> http://vebel.dk
>>
> Tjah, det kan man godt sige!
> Nu står de alle i en enkelt kolonne i stedet for 4 kolonner.
> Og det har ingen indflydelse på højden.
>
> CSS-er:
> div.minifoto
> {
> width: 130px;
> height:350px
> float: left;
> margin: 10px;
> background: url(kap12a.gif) no-repeat;
> }
>
> Anbringer jeg heigth før width kommer der godt nok 4 kolonner, men til
> gengæld er højre kant afskåret og formatteringen er stadig underlig.
> Det ser faktisk ikke ud til, at heigth slår igennem, så der må være noget
> andet galt!
>
> Mvh Kurt

Problemet er, at den nedersted padding på dine tekster går ud over
billedrammen.
Sæt den ned til 10px - så virker det med din nylinje for hver fjerde.
At få det til at floate helt som Bertel og Allan foreslår, kan ikke
lade sig gøre, når du har forskellig størrelse billeder.
Alternativet til det er, at sætte billedrammen lige stor for alle
billederne.
Eller måske at sætte hele rammen med billede og indhold i endnu en div,
som har fast højde, og så floate den i stedet.
Birger

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

---

Kurt G skrev:

> div.minifoto
> {
> width: 130px;
> height:350px
> float: left;
> margin: 10px;
> background: url(kap12a.gif) no-repeat;
> }

Jeg kan se at du mangler et ; efter 350px - det kan
hurtigt gå galt.

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

---

"Allan Vebel" <spam@do.not> skrev i en meddelelse
news:4a326855$0$90274$14726298@news.sunsite.dk...
> Kurt G skrev:
>
>> div.minifoto
>> {
>> width: 130px;
>> height:350px
>> float: left;
>> margin: 10px;
>> background: url(kap12a.gif) no-repeat;
>> }
>
> Jeg kan se at du mangler et ; efter 350px - det kan
> hurtigt gå galt.
>
> --
> Allan Vebel
> http://html-faq.dk
> http://vebel.dk
>
Det er nu rettet, men hjalp ikke.
Jeg tager en tænkepause!

Mvh Kurt

---

Kurt G skrev:

> Det er nu rettet, men hjalp ikke.

Billederne kom da ind på række nu, så noget har
da hjulpet.

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