Notifikationer

Markér alle som læst Log ud

dadane Novice

31. august 2006 - 13:48 Der er 13 kommentarer og
1 løsning

Placering af float element

Kan jeg placere et float element på en bestemt position?
Og kan jeg lade det være 'fixed', så en scroll ikke flytter disse elementer?

Synes godt om

mclemens Nybegynder

31. august 2006 - 14:16 #1

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

Synes godt om

mclemens Nybegynder

31. august 2006 - 14:16 #2

fixed er ikke understøttet i IE

Synes godt om

mclemens Nybegynder

31. august 2006 - 14:18 #3

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>

</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...)

Synes godt om

dadane Novice

31. august 2006 - 14:42 #4

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.

Synes godt om

dadane Novice

31. august 2006 - 14:44 #5

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.

Synes godt om

mclemens Nybegynder

31. august 2006 - 15:09 #6

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>

Synes godt om

dadane Novice

31. august 2006 - 18:01 #7

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.

Synes godt om

mclemens Nybegynder

31. august 2006 - 18:57 #8

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)

Synes godt om

dadane Novice

01. september 2006 - 00:08 #9

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.

Synes godt om

mclemens Nybegynder

01. september 2006 - 00:47 #10

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 ...

Synes godt om

mclemens Nybegynder

01. september 2006 - 00:58 #11

Å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 ...

Synes godt om

dadane Novice

06. september 2006 - 10:13 #12

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

Synes godt om

dadane Novice

06. september 2006 - 10:14 #13

Lukker

Synes godt om

mclemens Nybegynder

07. september 2006 - 20:19 #14

Tak for point :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS