Hjælpeforum til Ludvigs Hjørne

Har rodet lidt med indsættelse af billeder på min side....

Scanner ind og behandler i irfan - men størrelsen er ikke nem at styre...... http://www.friskfyr30.frac.dk/lejlighedsetiketter.html har også prøvet en talbel... heller ikke så smart... http://www.bryggerihistorie.dk/indexdiv.htm noget a la denne side - der står alle etiketter på en pæn række....

Kan godt se i kildekoden at width og height er forskellig fra billede til billede - kan man definere 3 områder pr. linie og så indsætte billeder så de står i midten af dette felt...

mvh

Kay-Verner

Har lidt en ide om jeg skal anvende css og definere en stil... fx lige som billedhoejre og billedvenstre

Du opnår det mest fleksible layout, hvis du lader billederne flyde frit. Så vil der blive vist så mange billeder som muligt på hver linje. Har den besøgende et bredt vindue, kan der måske være fire billeder på en linje, mens en besøgende med et smalt vindue vil få vist to billeder på hver linje.

Prøv at se denne side:
http://bertel.lundhansen.dk/?page=snowp ... owpictures
Prøv at ændre størrelsen på dit browservindue og se, hvad der sker med billederne.

Bruger du en tabel, vil dem med det smalle vindue skulle rulle sidelæns for at kunne se alle billeder.

Dit stilark indeholder allerede stilklassen billedvenstre, som er velegnet til dette formål. Der er dog en lille ulempe, eftersom dine billeder ikke er lige høje. En løsning kunne være, at du laver dem lige høje i dit grafikprogram, eller at du laver en stilklasse med en fast højde svarende til det højeste billede. Det vil nok være pænest, hvis du laver billederne med samme højde i grafikprogrammet.

Hvis billederne har samme højde, kan du gøre følgende i KompoZer:

Indsæt alle billederne lige efter hinanden - altså uden mellemrum eller andet. Klik på et billede, så det bliver markeret => i rullemenuen med stilklasser skal du vælge stilklassen billedvenstre => gentag med de andre billeder.

ja det virker når jeg kun laver med store billeder og ikke andet...

http://www.friskfyr30.frac.dk/lejlighedsetiketter.html jeg vil gerne tvinge etiketterne til at starte under hinanden i venstre side og ikke rykke ind.

Nå nu er jeg vist hjemmeside blind og må i seng

Kay-Verner

friskfyr30 skrev:http://www.friskfyr30.frac.dk/lejlighedsetiketter.html jeg vil gerne tvinge etiketterne til at starte under hinanden i venstre side og ikke rykke ind.

Løsningen her er at placere et billede og den tilhørende tekst sammen og så tvinge det efterfølgende indhold ned på næste linje med et flydestop.

Du skal lige oprette en ny stilklasse:
.flydestop
og i det hvide felt indsætter du:
clear: both;

Det er nemmest at arbejde direkte i kildekoden i dette tilfælde. I det nedenstående eksempel indsætter du koden <div class="flydestop"></div> hvert sted, du vil gennemtvinge et linjeskift med ny start helt ude til venstre, fx:

<div class="flydestop"></div>
<img scr ... resten af billedkoden><p>Her er billedteksten</p>
<div class="flydestop"></div>
<img scr ... resten af billedkoden><p>Her er billedteksten</p>
<div class="flydestop"></div>
flere billeder...

Ja det virker jo - dejligt... Er nået lidt længere i projektet og faktisk ret godt tilfreds med resultatet...

http://www.friskfyr30.frac.dk/aftappere1.html

Billederne er ret tætte på hinanden...Kan godt centrere dem på siden, men hvordan laver jeg mere luft mellem billederne

mvh
Kay-Verner

#Snart 1 uge i sommerhus - uden internet, men med den bærbare og masser af forsøg med hjemmesiden#

Dette laver lidt afstand på samtlige billeder på alle html-sider:

Opret en ny stil med navnet img (bemærk, intet punktum). I det hvide felt, indsæt: padding:5px - hvor du selvfølgelig kan udskifte 5-tallet med et andet tal.

Dette vil lave en afstand på 5px på alle fire sider af alle billeder - der vil altså være 5px til venstre for det første billede på en linje, 10 px mellem billederne og 5 px til højre for det sidste billede.

Alternativt kan du bruge padding-right:5px, der kun indsætter afstand til højre for billederne.

Hvis du ikke vil have afstanden på alle billeder på samtlige html-sider, kan du i stedet oprette en ny stilklasse med navnet .billedafstand. I det hvide felt indsætter du det samme som ovenfor.

Du kan så efterfølgende markere et billede og påføre stilklassen ved at vælge billedafstand i rullemenuen med stilklasser.

Smart... takker