---

Hej,

Alle tekster skal stå til højre for hver deres billede. Det ser forkert ud i
IE, og helt galt er det i FF.
Skal jeg benytte en anden metode? (Jeg tør ikke nævne ordet tabel...)
http://www.laerkebo.net/index0.shtml

Louise

---

Lou skrev:

> Alle tekster skal stå til højre for hver deres billede. Det ser forkert ud i
> IE, og helt galt er det i FF.
> Skal jeg benytte en anden metode? (Jeg tør ikke nævne ordet tabel...)
> http://www.laerkebo.net/index0.shtml

Du skal blot fortælle, at der skal startes på en ny linje
efter hvert billede med tilhørende tekst, det kan gøres ved
at indsætte koden <div class="cb"></div> passende steder i
html-filen og koden:
..cb { clear:both: }
i css-filen.

Eksempel: Find dette i koden:

til nedrivning.</p>

<p style="float:left; m

Og indsæt, så du får dette:

til nedrivning.</p>
<div class="cb"></div>
<p style="float:left; m

--
Mvh. Kim Ludvigsen
Få styr på irriterende hjemmesider ved at bruge aktive
bogmærker.
http://kimludvigsen.dk

---

Lou skrev:
> Hej,
>
> Alle tekster skal stå til højre for hver deres billede. Det ser forkert ud i
> IE, og helt galt er det i FF.
> Skal jeg benytte en anden metode? (Jeg tør ikke nævne ordet tabel...)
> http://www.laerkebo.net/index0.shtml
>
> Louise
>
>

Hvert billede plus tilhørende tekst i en
div:
<div class="pix">
<img src=".." height=".." width="XYZ" alt="..">
<div class="pixtekst">
[Billedteksten her]
</div>
<div class="clearfix"></div>
</div>

Følgende formdeklarartioner er tilstrækkeligt:
div.pix img {float:left;}
div.pixtekst {margin-left:XYZpx;}
..clearfix {clear:both;}
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

>> http://www.laerkebo.net/index0.shtml

> Hvert billede plus tilhørende tekst i en
> div:
> <div class="pix">
> <img src=".." height=".." width="XYZ" alt="..">
> <div class="pixtekst">
> [Billedteksten her]
> </div>
> <div class="clearfix"></div>
> </div>
>
> Følgende formdeklarartioner er tilstrækkeligt:
> div.pix img {float:left;}
> div.pixtekst {margin-left:XYZpx;}
> .clearfix {clear:both;}

Hm... ser stadig noget underligt ud. Anden tekstlinie vedr. 2. og 3. billede
smutter ned under billederne.

Louise

---

On Wed, 20 Aug 2008 16:39:57 +0200, "Lou" <lou@sofanet.dk> wrote:

>> Følgende formdeklarartioner er tilstrækkeligt:
>> div.pix img {float:left;}
>> div.pixtekst {margin-left:XYZpx;}
>> .clearfix {clear:both;}
>
>Hm... ser stadig noget underligt ud. Anden tekstlinie vedr. 2. og 3. billede
>smutter ned under billederne.

Hvilken browser?

Jeg kan godt provokere dette frem i IE6 ved at sætte tekststørrelse til
meget lille.
Det gør nemlig, at din sidebredde også bliver ret lille, da den er sat
til 43em - altså proportionalt med skriftstørrelsen.

Det kan på mange måder være meget frnuftigt, men det giver et problem,
når du samtidig har et billede, som pct.-vis fylder meget af
sidebredden.
I det øjeblik de 43em ikke er ret meget større end de 530px som der er
afsat til billedet, så er der meget lidt plads til tekst, og den vil
"finde sig et andet sted at være".

Så: Proprotionale angivelser (em) og absolutte angivelser kan godt køre
sammen, hvis den ene er meget større/mindre end dena anden, men ikke
hvis de er i samme størrelsesorden.

Good luck!

--
Jørn Andersen,
Brønshøj

---

Jørn Andersen skrev:
> On Wed, 20 Aug 2008 16:39:57 +0200, "Lou" <lou@sofanet.dk> wrote:
>
>>> Følgende formdeklarartioner er tilstrækkeligt:
>>> div.pix img {float:left;}
>>> div.pixtekst {margin-left:XYZpx;}
>>> .clearfix {clear:both;}
>> Hm... ser stadig noget underligt ud. Anden tekstlinie vedr. 2. og 3. billede
>> smutter ned under billederne.
>
> Hvilken browser?
>
> Jeg kan godt provokere dette frem i IE6 ved at sætte tekststørrelse til
> meget lille.
> Det gør nemlig, at din sidebredde også bliver ret lille, da den er sat
> til 43em - altså proportionalt med skriftstørrelsen.
>
> Det kan på mange måder være meget frnuftigt, men det giver et problem,
> når du samtidig har et billede, som pct.-vis fylder meget af
> sidebredden.
> I det øjeblik de 43em ikke er ret meget større end de 530px som der er
> afsat til billedet, så er der meget lidt plads til tekst, og den vil
> "finde sig et andet sted at være".
>
> Så: Proprotionale angivelser (em) og absolutte angivelser kan godt køre
> sammen, hvis den ene er meget større/mindre end dena anden, men ikke
> hvis de er i samme størrelsesorden.

Right - teksterne flyder ned under billledet fordi
der simpelt hen ikke er plads til ordet "ejendoms-
funktionærer". (Browservinduet 1024x768).

Ok billederne kan sagtens tåle at blive gjort en
del mindre.


--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

> Right - teksterne flyder ned under billledet fordi
> der simpelt hen ikke er plads til ordet "ejendoms-
> funktionærer". (Browservinduet 1024x768).

Måske skulle jeg kalde dem Dupont og Dupont i stedet for...

> Ok billederne kan sagtens tåle at blive gjort en
> del mindre.

Det har jeg gjort nu. Det ser jo fint ud i IE. Teksterne står under
billederne i FF.

Billderne er nu 400px brede.

Jeg har sat:

div.pix img {
float: left;
margin-bottom: 15px;
}
div.pixtekst {
margin-left:420px;
}
..clearfix {
clear:both;
}

SUK!

Hilsen
Louise

---

Lou wrote:

> Måske skulle jeg kalde dem Dupont og Dupont i stedet for...

De hedder Dupond og Dupont hvis det er politiagenterne fra Tintin, du
tænker på.

--
Venlig hilsen/Best regards
Erik Olsen DK
http://www.modelbaneteknik.dk/

---

>> Måske skulle jeg kalde dem Dupont og Dupont i stedet for...
>
> De hedder Dupond og Dupont hvis det er politiagenterne fra Tintin, du
> tænker på.

Indrømmet, jeg har læst alt for få tegneserier...

Louise

---

Lou skrev:

> Måske skulle jeg kalde dem Dupont og Dupont i stedet for...
>

Det er grundregel i websidekonstruktion,
"Content is King". Det vil sige at designet
skal tilpasses indholdet og ikke omvendt.
Det er uacceptabelt at skulle rette i en tekst
for at den "skal passe ind i designet".

>> Ok billederne kan sagtens tåle at blive gjort en
>> del mindre.
>
> Det har jeg gjort nu. Det ser jo fint ud i IE. Teksterne står under
> billederne i FF.

De kan godt tåle at blive endnu mindre, og
måske også komprimeres noget mere. En 100
procent verdana er også en temmelig stor
skrift, du kunne prøve at sætte størelsen
til 0.9em.

Teksterne står som de skal i min Firefox 3.

> Billderne er nu 400px brede.
>
> Jeg har sat:
>
> div.pix img {
> float: left;
> margin-bottom: 15px;
> }
> div.pixtekst {
> margin-left:420px;
> }
> .clearfix {
> clear:both;
> }
>
> SUK!

Hvorfor SUK? Det virker jo som
det skal, eller hvad?

--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

> De kan godt tåle at blive endnu mindre, og
> måske også komprimeres noget mere. En 100
> procent verdana er også en temmelig stor
> skrift, du kunne prøve at sætte størelsen
> til 0.9em.

Mange af beboerne har rundet de 40, og så begynder det som bekendt at knibe
med synet (jeg selv incl.). Derfor den store skrift.

> Teksterne står som de skal i min Firefox 3.
>
> Hvorfor SUK? Det virker jo som
> det skal, eller hvad?

Nej, ikke mere SUK. Da jeg testede i FF stod teksten under billederne. Måske
havde jeg glemt at opdatere (?). Nu ser det ud som det skal.

Jeg siger tak for hjælpen!

Louise

---

Lou skrev:

> Mange af beboerne har rundet de 40, og så begynder det som bekendt at knibe
> med synet (jeg selv incl.). Derfor den store skrift.

Det kan jeg bestemt sympatisere med, men
bem. at verdana /er/ den absolut største
skrift i hele galleriet, se for eksempel:
http://webdesign101.dk/design/eksempler/eksempel_13.php



--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

> Det kan jeg bestemt sympatisere med, men
> bem. at verdana /er/ den absolut største
> skrift i hele galleriet, se for eksempel:
> http://webdesign101.dk/design/eksempler/eksempel_13.php

God idé med siden, hvor man kan sammenligne forskellige teksttyper.

Jeg er sikker på, at jeg får mange klager, hvis jeg bruger en mindre tekst.
Dem der har svært ved at se, vil ofte også være dem, der ikke aner, at man
kan justere tekststørrelsen i browseren.

Jeg læste fornylig (kan ikke huske kilden), at 1/3 af befolkningen er ganske
godt kørende hvad angår brugen af PC, 1/3 klarer sig på brugerniveau, den
sidste 1/3 er enten meget svagt fungerende eller har intet kendskab til
PC'en. De ældre medborgere er ikke overraskende stærkt repræsenteret i den
sidste gruppe. Det skal vi huske, når vi koder og designer hjemmesider.

Louise

---

Lou skrev:

> Mange af beboerne har rundet de 40, og så begynder det som bekendt at knibe
> med synet (jeg selv incl.). Derfor den store skrift.

Skriftstørrelse justerer brugeren selv i browseren. Hvis du så
forøger den, tvinger du os bare til at justere ned.

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

---

Bertel Lund Hansen wrote:
> Lou skrev:
>
>> Mange af beboerne har rundet de 40, og så begynder det som bekendt
>> at knibe med synet (jeg selv incl.). Derfor den store skrift.
>
> Skriftstørrelse justerer brugeren selv i browseren. Hvis du så
> forøger den, tvinger du os bare til at justere ned.

Det bedste man kan gøre i den situation er vel at vælge den skrifttype
som er lettest at læse i en given størrelse.

--
Venlig hilsen/Best regards
Erik Olsen DK
http://www.modelbaneteknik.dk/

---

Erik Olsen DK skrev:

> Det bedste man kan gøre i den situation er vel at vælge den skrifttype
> som er lettest at læse i en given størrelse.

Det bedste man kan gøre, er slet ikke at vælge skrifttype. Det er
også noget brugeren selv bestemmer.

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

---

Bertel Lund Hansen wrote:
> Erik Olsen DK skrev:
>
>> Det bedste man kan gøre i den situation er vel at vælge den
>> skrifttype som er lettest at læse i en given størrelse.
>
> Det bedste man kan gøre, er slet ikke at vælge skrifttype. Det er
> også noget brugeren selv bestemmer.

Ja, hvis man ved hvordan man gør. Gør gennemsnitsbrugeren det?

Jeg er selv begyndt at komme i den alder hvor skærmbriller og det
rigtige skærmvalg er vigtige, og en begyndende grå stær gør det ikke
bedre.

På mine egne hjemmesider har jeg hidtil brugt Times New Roman (som også
er min standardskrifttype i IE7), men det var overraskende at se på
eksemplerne i http://webdesign101.dk:80/design/eksempler/eksempel_13.php
hvor stor forskel der er i læseligheden af de forskelige skrifttyper, og
hvor ringe Times New Roman i virkeligheden er.

For den erfarne bruger er det naturligvis en fordel selv at kunne vælge
skrifttype og -størrelse, men det er jo lidt i konflikt med hvis man
enten vil hjælpe mindre erfarne brugere med synsproblemer (som det blev
nævnt her), eller vil give sin hjemmesiden en bestemt grafisk stil (som
jeg selv har gjort).

--
Venlig hilsen/Best regards
Erik Olsen DK
http://www.modelbaneteknik.dk/

---

Erik Olsen DK skrev:

> er min standardskrifttype i IE7), men det var overraskende at se på
> eksemplerne i http://webdesign101.dk:80/design/eksempler/eksempel_13.php
> hvor stor forskel der er i læseligheden af de forskelige skrifttyper, og
> hvor ringe Times New Roman i virkeligheden er.

1. Der står ikke "Times New Roman" i menuen.
2. Det er ikke samme skrifttype som Times New Roman på mit
XP-system.

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

---

Bertel Lund Hansen wrote:
> Erik Olsen DK skrev:
>
>> er min standardskrifttype i IE7), men det var overraskende at se på
>> eksemplerne i
>> http://webdesign101.dk:80/design/eksempler/eksempel_13.php hvor stor
>> forskel der er i læseligheden af de forskelige skrifttyper, og hvor
>> ringe Times New Roman i virkeligheden er.
>
> 1. Der står ikke "Times New Roman" i menuen.
> 2. Det er ikke samme skrifttype som Times New Roman på mit
> XP-system.

Næh, i http://webdesign101.dk:80/design/eksempler/eksempel_13.php er
vist Times, men jeg sammenlignede med Times New Roman på en en af mine
egne sider (som ligner den viste Times en del). Beklager hvis jeg
udtrykte mig en smule upræcist.

Pointen var også kun at der er meget stor forskel på skrifttypernes
læselighed.

--
Venlig hilsen/Best regards
Erik Olsen DK
http://www.modelbaneteknik.dk/

---

Erik Olsen DK skrev:
> Bertel Lund Hansen wrote:
>> Lou skrev:
>>
>>> Mange af beboerne har rundet de 40, og så begynder det som bekendt
>>> at knibe med synet (jeg selv incl.). Derfor den store skrift.
>>
>> Skriftstørrelse justerer brugeren selv i browseren. Hvis du så
>> forøger den, tvinger du os bare til at justere ned.
>
> Det bedste man kan gøre i den situation er vel at vælge den skrifttype
> som er lettest at læse i en given størrelse.
>

Det er ikke skrift/typen/, er er i spil her,
men skrift/størrelsen/. Men typen har betydning
for den synlige størrelse, verdana fylder sin-
em-boks meget mere ud end times.

--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

Jørgen Farum Jensen wrote:

> Hvert billede plus tilhørende tekst i en div:

> <div class="pix">
> <img src=".." height=".." width="XYZ" alt="..">
> <div class="pixtekst">
> [Billedteksten her]
> </div>
> <div class="clearfix"></div>
> </div>

Det kan forenkles yderligere:

<div class="pix clearfix">
<img src=".." height=".." width="XYZ" alt="..">
<div class="pixtekst">
[Billedteksten her]
</div>
</div>

Man kan så eventuelt spare clearfix-definitionen på første div.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk

---

Erik Ginnerskov skrev:

> <div class="pix clearfix">
> <img src=".." height=".." width="XYZ" alt="..">
> <div class="pixtekst">
> [Billedteksten her]
> </div>
> </div>
>
> Man kan så eventuelt spare clearfix-definitionen på første div.
>
Eller zoom eller overflow. Men jeg holder nu
på at den mindre erfarne konstruktør bedst kan
indse "mekanikken" ved at bruge det særlige
element.

Problemet med clearing er særlig udtalt
ved div'er, der indeholder float'ede elementer.
Hvis man bruger IE, opdages det muligvis slet
ikke.

--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

Jørgen Farum Jensen wrote:

> Men jeg holder nu
> på at den mindre erfarne konstruktør bedst kan
> indse "mekanikken" ved at bruge det særlige
> element.

Der mener jeg nu, at den enklest mulige kode letter forståelsen

> Problemet med clearing er særlig udtalt
> ved div'er, der indeholder float'ede elementer.
> Hvis man bruger IE, opdages det muligvis slet
> ikke.

Jeg bruger altid primært FF og tester så efterfølgende i bl.a. IE

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk