Placering af float element

Kig evt. på http://www.eksperten.dk/spm/728614#rid6401693

fixed er ikke understøttet i IE

Eksempel:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;height:100%;overflow:hidden;}

#bodyen{
  position:absolute;
  height:100%;
  width:100%;
  overflow-y:scroll;
}

#main{
  height:100%;
  background:url('http://www.eksperten.dk/img/flag_yellow.gif');
}

#main2{width:100%;position:relative;}

#bodyen>#main{
  height:auto;
  min-height:100%;
}

#wm {
  position:absolute;top:100px;left:100px;
  width:300px;
  height: 100px;
}
#wm2{
  margin-right:17px;
  height:100%;
  position:relative;
}
#wm3{
  background:url('http://www.eksperten.dk/img/elogo.png') repeat;
  position:absolute;
  top:0px;left:0px;
  width:100%;
  height:100%;
  z-index:2;
}
</style>
<!--[if IE]><style type="text/css">#wm{z-index:2;}</style><![endif]-->
</head><body>

<div id="wm"><div id="wm2"><div id="wm3">aaaaa</div></div></div>

<div id="bodyen">

<div id="main"><div id="main2">main...start<br>maiain...<br>main...<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..<br>main...<br>main..vv.<br>main...<br>main...slut</div></div>

</div>

</body></html>


(kaster lige et svar hvis det kunne bruges...)

Jeg har vist ikke udtrykt mig præcist nok.

Jeg har et side hvor jeg har en div. Den tekst der står i selve siden skal ligge op til div'en (altså div'en er float). Det virker meget fint.
Mit problem er bare at det gør det ikke når jeg begynder at flytte med min div.

Helt præcist er det jeg gerne ville at lave et design hvor jeg har nogle små kasser i venstre side. Den første er måske et logo, den anden måske en menu og den tredje måske nogle links. Men teksten skal køre helt op til disse 'kasser', - som ikke kan forventes at være lige brede.

Hvis det overhovedet er muligt vil jeg meget gerne have mulighed for at have hul imellem kasserne, - altså at teksten kører helt ud i venstre side nogle linjer indtil den næste kasse starter.

Der er nogle flotte eksempler på hvad man kan med floats her: http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm

Men det besvare desværre ikke rigtigt mit spørgsmål.

sådan noget?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>

<div style="border:1px solid #000;width:300px;">

<div style="float:left;width:200px;height:300px;background:red;"></div>tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst


<div style="float:left;width:200px;height:225px;background:red;"></div>tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst


<div style="float:left;width:220px;height:95px;background:red;"></div>tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst


</div>

</body></html>

Ja! Noget i den stil.

Men mit site vil jo indeholde forskellige sider, - så div'erne kan ikke skriver på de rigtige pladser i dokumentet, - men skal på en eller anden måde defineres i toppen eller  lign.

Nå er svaret nej... Browseren skal på den ene eller den anden måde vide hvor pladsen skal reserveres ... hvis det er fordi at du vil have noget op helt i toppen af dokumentet samtidig med at det står længere nede - kan du placere en float der sørger for at reservere pladsen det rigtige sted - og så placere det element der lægger i toppen via position:absolute; og top / left ... men du kan ikke gøre det med absolute alene - da absolute ikke reserverer pladsen så teksten wrapper omkring elementet ... det vil køre ind under selve elementet (medmindre der er den pladsreservation) ...

- alternativt kan du have teksten i toppen i en div og så flytte elementet ned til det andet når siden loades via. javascript ... men en sådan løsning ville ikke blive køn - og også begrænse sidens visning til at javascript var krævet (samt det ville se grimt ud at elementet hoppede onload)

Jeg ved godt hvor div'en skal være henne, - jeg ved bare ikke hvad det svarer til i tekst.

Eksempel, - jeg vil gerne have en content-div med alt indhold. Lad os sige den er 800x600 pixels.
I den vil jeg gerne have 3 div'er. En på position 0,0 med størrelse 150,150, en i position 0,250 med en størrelse på 100,200 og endeligt en i position 0,500 med en størrelse på 100,100
Derudover vil jeg gerne have en tekst i min content-div. Den skal så wrappe omkring disse 3 felter.

Så er svaret stadig nej ...

Hvis du ikke kender den præcise placering i forhold til teksten så kan du ikke placere en spacer div der reserverer pladsen på de nøjagtige steder det skal ske ... den eneste forskel i forhold til 15:09:48 er at du istedet for at placere dit element - placerede en div der reserverede pladsen og så placerede du den anden div med position:absolute;

... Og vide den præcise placering som et element skal have er uhm ... ret umuligt - hvis nu folk ejer en browser hvor man ikke kan låse font-size og line-height. Det vil gøre det umuligt at få den præcise placering som position:absolute; div'en skal have ... eftersom brugeren kan påvirke placeringen af den spacerdiv man har lagt manuelt(ved at undersøge hvad det svarer til i tekst) - ved at han/hun øger eller sænker skriftstørrelsen ...

- Og det fører så frem til et alternativ med javascript ... som jeg selv synes vil være ret elendigt da det a) ville kræve utrolige resourcer at parse textNode elementet rundt og skifte appending og flytte på andre elementer så det ramte de korrekte placeringer - for ikke at tale om at man skal sørge for at den genberegner hvis brugeren ændrer skriftstørrelsen (d.v.s. der skal være en konstant timeout der måler på det) ... og b) Jeg ikke lige kan gennemskue hvordan et sådan javascript skal opbygges ... og c) det vil aldrig se godt ud ligesom det jeg nævnte med javascriptet i 18:57:15.


... Så konklusionen jeg kommer til er:

a) Drop det indtil vi forhåbentlig får nogle bedre værktøjer til absolut placering med wrap-around (ved ikke om det kommer eller hvornår ... tvivler lidt da det jo hurtigt kan blive en resource sluger af rang)

b) Mål dig frem til hvad det svarer i tekst og indsæt en div som du appender elementet til onload

c) Mål dig frem til hvad det svarer i tekst og placer med position:absolute

... af ovenstående kan jeg dog næsten kun anbefale a ... og til nød b - ved dog ikke om flash har nogle evner indenfor dette som kan klare opgaven ...

Åh joh :D
[ Og kan jeg lade det være 'fixed', så en scroll ikke flytter disse elementer? ]
Den del vil så gøre både forslag a,b,c i ovenstående
umulig når teksten samtidig skal wrappe rundt om ...

Du kan evt. selv kaste et svar og prøve en ny i flash hvis det er ...

Hmm, tjah. Flash. Nej, det tror jeg ikke.
Må klare mig uden.
Men tak hjælpen

Lukker

Tak for point :)