Image align, divs, tekst

[parallax313]

Hei,

 

Har et lite men irriterende problem. Sett at jeg har en stor div der jeg har bilder (statisk størrelse, 160x180) med varierende lengde på beskrivelser til hvert enkelt bilde. Dette er html-koden jeg bruker:

 

<img src="bilder/bilde1.jpg" align="left"><b>Overskrift</b><br>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Jeg vil stille opp bildene ved siden av teksten, så jeg bruker align="left" på bildene. Problemet er bare at siden lengden på hver enkelt tekst-stykke varierer, så kommer noen av bildene ikke på eget avsnitt, og forskyves derfor til høyre for bildet som er over (se illustrasjonene nedenfor for bedre eksempel).

 

Har prøvd å dele opp hvert enkelt bilde med beskrivelse inn i paragrafer og til og med divs, men det eneste som har gjort noen forskjell er å skifte skrift-størrelse fra 12px til 14px, men det blir ikke helt riktig. Uansett må jeg ha skrift-størrelse 12px, da de andre sidene bruker det.

 

Lurer på om det er noen annen, smartere måte å sette dette opp på, eller hva jeg gjør feil?

 

Illustrasjonsbilde #1 (blått felt = div, grønt = bilder):

Illustrasjonsbilde #2:

[Erik B.]

Vet ikke om jeg skjønner deg riktig...

men

float:right;

I divene din gjør nok susen

Endret 17. oktober 2006 av erixz

[parallax313]

EDIT: Ok, nå har jeg nesten fått det til. Her er koden jeg bruker nå:

 

.floatleft {
float: left;
width: 426px;
margin-right: 0px;
margin-bottom: 0px;
padding: 1px;
text-align: left;
border: 1px solid black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

<div class="floatleft"><img src="bilder/bilde1.jpg"><b>Overskrift</b>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>

Det er bare en ting som ikke fungerer som det skal. På de to første div'ene med bilder/beskrivelser starter ikke teksten øverst til høyre for bildet, men nederst.

 

Endret 17. oktober 2006 av parallax313

[parallax313]

Nevermind, jeg fant det ut. Glemte align="left" på bildene.

 

EDIT: Ok, jeg beklager mye editering på postene nå, men jeg la om litt på stilen sånn at teksten nå ikke wrapper rundt bildet. Dette funker fint i Internet Explorer, men teksten stiller seg under bildene i stedet for til høyre for dem i Opera.

 

Dette er koden jeg bruker nå:

 

.floatcomb {
width: 436px;
}
.floatleft {
float: left;
width: 160px;
height: 160px;
}
.floatright {
width: 270px;
float: right;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
}

 

<div class="floatcomb"><div class="floatleft"><img src="bilder/bilde1.jpg"></div><div class="floatright"><b>Overskrift</b>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</div></div>

 

Noen som vet hvorfor Opera ikke liker dette?

Endret 19. oktober 2006 av parallax313

[parallax313]

Noen som har peiling?

[Canute]

img.floatleft {
float: left;
width: 160px;
}
div.floatright {
width: 266px;
margin-left: 160px;
}

<img src="blabla" class="floatleft">
<div class="floatright">(...masse tekst....)</div>

Noe slikt du mener?

[parallax313]

Det funket ikke helt som det skulle. Men dette er hva jeg prøver å lage:

 

 

Litt lite bilde kanskje, men det er 3 divs der (brukte bare borders rundt for å tydeliggjøre det litt). En rundt hele greia, en rundt bildet, og en rundt teksten. Hvorfor en for teksten? For å unngå at teksten går under bildet når høyden på teksten er større enn bildet. Skal ha flere slike avsnitt nedover med tekst og bilde.

 

Problemet akkurat nå er at det ser rimelig fint ut i Internet Explorer, men i Opera kommer teksten rett under bildet i stedet for til høyre.

[Canute]

<html>
<head>
<style>
div.bilder {
float: left;
width: 160px;
}
div.tekst {
margin-left: 160px;
width: 266px;
}
</style>
</head>
<body>
<div class="bilder">
<img src="blabla">
<img src="blabla2">
</div>
<div class="tekst">
<p>Masse tekst</p>
</div>
</body>
</html>

 

Sånn? Dette fungerte iallfall ypperlig i firefox.

Endret 18. oktober 2006 av Canute

[parallax313]

Det funker, ja. Men teksten, som er av varierende lengde, stilles ikke opp mot hvert bilde. Det er det jeg prøver å få til.

Endret 19. oktober 2006 av parallax313

[parallax313]

Ok, jeg har oppdatert og prøvekjørt koden fra post #4 litt mer i de tre browserne:

 

Internet Explorer6/7: Alt fungerer som det skal, bortsett fra at det er dobbel linjeavstand mellom floatcomb div'ene.

 

Opera9: Avsnitt nummer to havner av en eller annen grunn på midten av siden og rett mot nedre høyre hjørne av det første bildet (se illustrasjonsbilde #1, første post), mens de resterende avsnittene er plassert som de skal. Det er ingen mellomrom mellom floatcomb div'ene.

 

FireFox1.5/2.0: Akkurat samme problemet som i Opera.

 

 

Jeg går gal.

[Kannutt]

Uten at jeg har lest veldig nøye gjennom dette ville jeg forsøkt:

clear: both;

i "floatcomb".

Og sett <p> </p> rundt teksten.

[parallax313]

Ja, det fikset problemene i Opera, nå er bildene og teksten stilt riktig opp

 

Eneste problemet nå er at det er ingen linjeskift mellom div'ene i Opera/Firefox, mens det er dobbelt i Internet Explorer.

 

Her er koden jeg bruker på de to første avsnittene nå:

 

<div class="floatcomb"><div class="floatleft"><img src="bilder/bilde1.jpg"></div><div class="floatright"><b>Overskrift</b>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div></div><br><br>

<div class="floatcomb"><div class="floatleft"><img src="bilder/bilde2.jpg"></div><div class="floatright"><b>Overskrift</b>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div></div><br><br>

[Kannutt]

Sett

margin-top: ??px;

i den samme diven, så tror jeg det ordner seg greit.

 

EDIT: Og ta bort <br> <br> etter avslutningen på divene.

Endret 19. oktober 2006 av Kannutt

[parallax313]

Det fikset problemet i Internet Explorer, men det er fremdeles ikke noen mellomrom i Opera/Firefox. Rart!

[Kannutt]

Du har satt margin-top til feks 10px i "floatcomb"? Rart hvis ikke det virker....?

[parallax313]

Jepp, testa både margin-top og margin-bottom i floatcomb. Ser nå fint ut i IE, men funker ikke i Opera/FF av en eller annen grunn.

[Kannutt]

Sett en fast høyde på tekst-diven, som for eks er lik høyden på bilde-diven. Da virker det nok antar jeg...

[parallax313]

Sett en fast høyde på tekst-diven, som for eks er lik høyden på bilde-diven. Da virker det nok antar jeg...

7104357[/snapback]

Men det er også litt av problemet. Lengden (og derav høyden) på teksten varierer stort.

[parallax313]

Ok, hvis jeg setter margin i alle 3 div'ene ser det ut til å ordnet seg.

 

Må bare takke så mye for hjelpen

Endret 19. oktober 2006 av parallax313

[834HF42F242]

Nå vet ikke jeg om du vil ha statisk eller dynamisk bredde på hele siden.

Antar at du bruker dynamisk.

 

Kanskje funker dette?

<img src="./#" alt="Bilde" class="bilde-høyre" />
<img src="./#" alt="Bilde" class="bilde-høyre" />
<img src="./#" alt="Bilde" class="bilde-høyre" />
<img src="./#" alt="Bilde" class="bilde-høyre" />
<img src="./#" alt="Bilde" class="bilde-høyre" />
<p class="avsnitt-venstre">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec accumsan. Quisque nulla ipsum, gravida ut, iaculis et, congue eu, dui. Mauris consectetuer, nisl a ultrices congue, velit nisl congue ante, ultricies commodo orci nunc id ligula. Etiam id magna in risus sollicitudin convallis. Nullam sollicitudin nunc in lectus. Duis mattis tortor sit amet libero. Vestibulum ultricies mattis pede. Duis fringilla volutpat orci. Mauris cursus, felis in rutrum lacinia, justo turpis tristique est, eget vehicula tellus est ut felis. In hac habitasse platea dictumst. Nulla facilisis. Phasellus augue quam, convallis a, interdum quis, ornare in, mi. Donec fringilla turpis laoreet quam. Suspendisse molestie enim non augue. Aliquam elit. Curabitur accumsan convallis urna.</p>

.bilde-høyre:{float:right;clear:right;margin-bottom:50px;}
.avsnitt-venstre:{float:leftpaddin-left:10px;}

Endret 23. november 2006 av neitakk