---

Hejsa

Jeg kæmper med et lille problem, og håber at nogen måske har løsningen.
Jeg har en side hvor der er et billede med noget beskrivende tekst ved siden
af, og umiddelbart tænkes der så "float:left".

Men hvis jeg ønsker følgende:
- Ingen angivelse af bredden (Det skal <img> styre, og tekst skal tage
resten)
- Ingen angivelse af højden (Det skal styres udfra max højden af <img>
eller tekst)
- Ingen tekst skal wrappe rundt om <img>

Det er frygtelig nemt at gøre med et <table>, som man kan se her:

http://smallvoid.com/test3/tweak/

Men hvordan gøres det i CSS ?

-Rolf

P.S. Jeg ville bliver glad hvis der er en IE6 bruger som kan fortælle mig,
om det "hvide" er breddere end den orange menu/footer.

---

Rolf Kristensen wrote:

> Jeg har en side hvor der er et billede med noget beskrivende tekst
> ved siden af, og umiddelbart tænkes der så "float:left".

Det er den eneste mulighed, hvis du ikke vil lave det i tables.
>
> Men hvis jeg ønsker følgende:
> - Ingen angivelse af bredden (Det skal <img> styre, og tekst skal
> tage resten)

Så sætter du bare en passende margin-right på billedet. Det virker på samme
måde.

> - Ingen angivelse af højden (Det skal styres udfra max højden af
> <img> eller tekst)

Efterfølgende elementer skal bare have defineret clear:both; - så lægger det
sig pænt nedenunder.

> - Ingen tekst skal wrappe rundt om <img>

Sæt en passende padding-left på teksten.

> P.S. Jeg ville bliver glad hvis der er en IE6 bruger som kan fortælle
> mig, om det "hvide" er breddere end den orange menu/footer.

Hvilken orange menu? På http://smallvoid.com/test3/tweak/ er der en mørkerød
menu. Den har samme bredde som det hvide felt - også i IE.

Men hvad hindrer dig i selv at undersøge det? Sidder du ikke ved en
Windows-maskine, kan du gå ind på www.browsercam.com og teste siden i næste
hvilken som helst browser på følgende platforme: Windows - diverse
versioner, Linux, Mac - diverse versioner.

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

---

Tak forslaget, prøvede at lave det du sagde og endte ud med dette:

div.left {
float:left;
clear:both;
margin-right:10px;
border-style:solid;
}

div.right {
float:left;
clear:both;
padding-left:120px;
border-style:solid;
}

Det første element bruger nu ovenstående CSS, og det ser ikke helt rigtig
ud:

http://smallvoid.com/test3/

Hvis jeg bruger <p> istedet for <div> for left og right så ser det noget
bedre ud, men så er siden invalid fordi <p> ikke må wrappe rundt om <h4>.
Stadig så kunne <p> ikke håndtere hvis teksten blev længere end billedet.
(Idet man så selv skulle øge margin-bottom for left så det passede med
teksten).

-Rolf

P.S. Tak fordi du ville teste siden i IE6 for mig, og udemærket forslag med
www.browsercam.com , men ved ikke om jeg har lyst til at betale 20$ for at
få testet om en side fungerer i de forskellige browsere.

---

"Rolf Kristensen" wrote in message

> Det første element bruger nu ovenstående CSS, og det ser ikke helt rigtig
> ud:
>
> http://smallvoid.com/test3/

Det er selvfølgelig på denne side:

http://smallvoid.com/test3/tweak/index.html

-Rolf

---

"Rolf Kristensen" wrote in message

> Det er selvfølgelig på denne side:
>
> http://smallvoid.com/test3/tweak/

Ok efter at have sovet nogle timer, så tænkte jeg lidt mere klart og lavede
et mere simpelt eksempel, som jeg fik til at virke, og derefter proppede jeg
det ind på siden, og dit forslag virker som det skal.

Mange tak for hjælpen, nu håber jeg bare at det virker i IE6

-Rolf

img.left {
padding:0px;
margin:5px;
float: left;
}

div.right {
margin:0px;
padding:0px;
padding-left:120px; /* Keeps text from wrapping */
}

p.clear { /* keeps items below from overlapping floating items */
clear:both;
padding:0px;
margin:0px;
}

<div>
<img class="left" src="myimage.jpg" alt="My Image"/>
<div class="right">
Hello
</div>
<p class="clear"></p>
</div>

---

Rolf Kristensen wrote:

> P.S. Tak fordi du ville teste siden i IE6 for mig, og udemærket
> forslag med www.browsercam.com , men ved ikke om jeg har lyst til at
> betale 20$ for at få testet om en side fungerer i de forskellige
> browsere.

Det er da ikke nødvendigt at betale 20$ for det. Du kan da helt gratis
oprette et 24-timers trail. Du skal bare bruge en emailadresse til at
modtage et login på.

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