af Kim Ludvigsen » man mar 15, 2010 20:15
npm skrev:Ang. den manglende boks nederst på siden Postkort, lidt mere om problemet.
Jeg tilføjer i kildekoden som du beskriver og de sidste linier bliver: </div><div>Bi.vognen</div></body></html> skifter til normal visning og boksen er der men alle billederne på siden er flyttet et par cm. op.
Jeg fik ikke kigget ordentligt på din kode før. Du har flere problemer. Og du har et større arbejde for dig, hvis det skal gøres, så det virker bedst muligt. Du bestemmer selv, om du vil prøve at følge nedenstående, eller om du vil prøve på anden måde at få det til at passe. Jeg bruger kodeeksempler i nedenstående, og det kan føles lidt nørdet. Og jeg må på forhånd sige, at jeg ikke har alt for meget tid, så jeg kan ikke hjælpe med meget andet end nedenstående.
Du har brugt absolut ud for position til dine billeder - det betyder, at billederne får en fast placering, og hvis du så ændrer på andre tings placering, så passer det ikke længere sammen. Man bør kun bruge absolut position, hvis man vil opnå specielle effekter - og hvis man er erfaren, da det meget nemt kan give problemer.
Du oprettet forskellige stile til hver boks i stedet for at bruge den samme stil til alle bokse med billeder.
Og endelig benytter du andre billedstørrelser end de originale størrelser.
Lad mig starte med det sidstnævnte: Brug altid billedernes originale størrelse. Hvis billedet ikke har den ønskede størrelse, så brug et billedbehandlingsprogram til at ændre størrelsen. Kvaliteten bliver bedre på den måde, og i de tilfælde, hvor du ønsker billedet skal være mindre end den originale størrelse, bliver billedet hurtigere at hente, fordi det kommer til at fylde færre KB.
Med hensyn til boksene, så er det bedste at lave en enkelt stil til samtlige "hoved"-bokse. Altså de bokse, hvor du har to billeder og lidt tekst i. Du skal blot definere bredden, idet højden automatisk tilpasser sig indholdet i boksen. Du skal samtidig lade boksen benytte relativ placering og at lade den flyde til venstre. Du kan selvfølgelig også tilføje stile til margin og til centrering af tekst.
I hovedboksene placerer du to bokse til de to billeder og deres tilhørende tekst. Også her kan du nøjes med en enkelt stil til samtlige af den slags bokse. Og som før skal du blot definere bredden, relativ position og flyde til venstre. Og evt. angive margin og centrering af tekst.
Kodemæssigt kan det se sådan ud:
<div class="hovedboks">
<p>Overskrift i boksen</p>
<div class="billedboks">
<p>Tekst til billedet</p>
<img scr=billed1.jpg" width=337" height="238" alt="alternativ tekst" title="Billedtekst, når musen holdes over">
</div>
<div class="billedboks">
<p>Tekst til billedet</p>
<img scr=billed2.jpg" width=337" height="238" alt="alternativ tekst" title="Billedtekst, når musen holdes over">
</div>
Og det gentages så blot hele vejen ned ad siden for hver hovedboks med billeder.
[quote="npm"]
Ang. den manglende boks nederst på siden Postkort, lidt mere om problemet.
Jeg tilføjer i kildekoden som du beskriver og de sidste linier bliver: </div><div>Bi.vognen</div></body></html> skifter til normal visning og boksen er der men alle billederne på siden er flyttet et par cm. op.[/quote]
Jeg fik ikke kigget ordentligt på din kode før. Du har flere problemer. Og du har et større arbejde for dig, hvis det skal gøres, så det virker bedst muligt. Du bestemmer selv, om du vil prøve at følge nedenstående, eller om du vil prøve på anden måde at få det til at passe. Jeg bruger kodeeksempler i nedenstående, og det kan føles lidt nørdet. Og jeg må på forhånd sige, at jeg ikke har alt for meget tid, så jeg kan ikke hjælpe med meget andet end nedenstående.
Du har brugt absolut ud for position til dine billeder - det betyder, at billederne får en fast placering, og hvis du så ændrer på andre tings placering, så passer det ikke længere sammen. Man bør kun bruge absolut position, hvis man vil opnå specielle effekter - og hvis man er erfaren, da det meget nemt kan give problemer.
Du oprettet forskellige stile til hver boks i stedet for at bruge den samme stil til alle bokse med billeder.
Og endelig benytter du andre billedstørrelser end de originale størrelser.
Lad mig starte med det sidstnævnte: Brug altid billedernes originale størrelse. Hvis billedet ikke har den ønskede størrelse, så brug et billedbehandlingsprogram til at ændre størrelsen. Kvaliteten bliver bedre på den måde, og i de tilfælde, hvor du ønsker billedet skal være mindre end den originale størrelse, bliver billedet hurtigere at hente, fordi det kommer til at fylde færre KB.
Med hensyn til boksene, så er det bedste at lave en enkelt stil til samtlige "hoved"-bokse. Altså de bokse, hvor du har to billeder og lidt tekst i. Du skal blot definere bredden, idet højden automatisk tilpasser sig indholdet i boksen. Du skal samtidig lade boksen benytte relativ placering og at lade den flyde til venstre. Du kan selvfølgelig også tilføje stile til margin og til centrering af tekst.
I hovedboksene placerer du to bokse til de to billeder og deres tilhørende tekst. Også her kan du nøjes med en enkelt stil til samtlige af den slags bokse. Og som før skal du blot definere bredden, relativ position og flyde til venstre. Og evt. angive margin og centrering af tekst.
Kodemæssigt kan det se sådan ud:
<div class="hovedboks">
<p>Overskrift i boksen</p>
<div class="billedboks">
<p>Tekst til billedet</p>
<img scr=billed1.jpg" width=337" height="238" alt="alternativ tekst" title="Billedtekst, når musen holdes over">
</div>
<div class="billedboks">
<p>Tekst til billedet</p>
<img scr=billed2.jpg" width=337" height="238" alt="alternativ tekst" title="Billedtekst, når musen holdes over">
</div>
Og det gentages så blot hele vejen ned ad siden for hver hovedboks med billeder.
