/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
problem med "float: right"
Fra : Peter Loumann


Dato : 27-09-06 10:26

Hej eksperter

Jeg er ved at lave min forside om:

http://pedalo.dk/000a.html

Under fotoet, flugtende med det, vil jeg godt ha' en tekstboks. Jeg har
lavet en ny div med ramme og "float: right". I min normale browser Opera
virker det fdint i min sædvanlige vinduesstørrelse, men hvis jeg
makssimerer vinduet, hopper tekstboksen t.v., ind på midten af siden.
Problemet optræder ikke i mine 2 andre browsere, IE og Firefox. Siden
validerer.

Hvorfor opstår problemet og hvordan kan det løses? På forhånd tak!

--
hilsen pl (peloda hos tiscali her i landet)
http://huse-i-naestved.dk

 
 
Bertel Lund Hansen (27-09-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 27-09-06 11:29

Peter Loumann skrev:

> Under fotoet, flugtende med det, vil jeg godt ha' en tekstboks. Jeg har
> lavet en ny div med ramme og "float: right". I min normale browser Opera
> virker det fdint i min sædvanlige vinduesstørrelse, men hvis jeg
> makssimerer vinduet, hopper tekstboksen t.v., ind på midten af siden.
> Problemet optræder ikke i mine 2 andre browsere, IE og Firefox. Siden
> validerer.

> Hvorfor opstår problemet og hvordan kan det løses? På forhånd tak!

Det kan løses ved at du pakker fotoet og tekstboksen ind i en div
som du floater på samme måde som du nu floater fotoet. Hvis du
giver tekstboksen "clear:both;", smutter den ned under fotoet.

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

Peter Loumann (27-09-2006)
Kommentar
Fra : Peter Loumann


Dato : 27-09-06 11:53

On Wed, 27 Sep 2006 12:28:30 +0200, Bertel Lund Hansen wrote:

> Det kan løses ved at du pakker fotoet og tekstboksen ind i en div
> som du floater på samme måde som du nu floater fotoet.

Ja, det har jeg også tænkt på. Det er nok i virkeligheden det smarteste

> Hvis du giver tekstboksen "clear:both;", smutter den ned under fotoet.

Ja, det løser problemet, også med de nuværende to selvstændige div'er. Jeg
vist aldrig rigtig forstået pricippet i float og clear.

Tak!

--
hilsen pl (peloda hos tiscali her i landet)
http://huse-i-naestved.dk

Bertel Lund Hansen (27-09-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 27-09-06 11:58

Peter Loumann skrev:

> Ja, det løser problemet, også med de nuværende to selvstændige div'er. Jeg
> vist aldrig rigtig forstået pricippet i float og clear.

Float fortæller bare til hvilken side elementet sejler hvis der
er plads.

Clear bestemmer hvilke andre floatede elementer det pågældende
element smutter ned under - tænk på det som en slags ny linje.

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

Peter Loumann (27-09-2006)
Kommentar
Fra : Peter Loumann


Dato : 27-09-06 16:23

On Wed, 27 Sep 2006 12:57:57 +0200, Bertel Lund Hansen wrote:

> Clear bestemmer hvilke andre floatede elementer det pågældende
> element smutter ned under - tænk på det som en slags ny linje.

Tak!

Så er den oppe, se min signatur. Jeg har kun et enkelt lille problem
tilbage: Jeg har pøvet at få ul'er til at rykke ud til venste margen med
style="padding:5px". Det virker fint i Opera og Firefox, men ikke i IE. Er
der mon en løsning på det?

--
hilsen pl (peloda hos tiscali her i landet)
http://huse-i-naestved.dk

Bertel Lund Hansen (27-09-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 27-09-06 16:50

Peter Loumann skrev:

> Så er den oppe, se min signatur. Jeg har kun et enkelt lille problem
> tilbage: Jeg har pøvet at få ul'er til at rykke ud til venste margen med
> style="padding:5px". Det virker fint i Opera og Firefox, men ikke i IE. Er
> der mon en løsning på det?

Ja. Du har ikke sat margin specifikt, og den er forskellig i
browserne. Regn altid med at hvis du skal styre en placering, så
skal du selv sætte både margin og padding.

Det så for mig ud til at "ul { padding:5px; margin:15px; }"
kommer tæt på det du gerne vil have. Jeg ved ikke om det er mit
system, men da jeg satte margin til 0, forsvandt prikkerne i
IE 6.

Petitesser:

Du har:
   background: #CCCCCC;
   background-color: #eeeeee;

Brug små bogstaver til farver (eller vær i det mindste
konsekvent). De to angivelser kan skrives sådan:

   background: #ccc;
   background-color: #eee;

Hvis farven er på formen #xxyyzz, kan den lovligt skrives som
#xyz.

Nulværdier kan angives uden enhed: { margin: 0; }

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

Peter Loumann (27-09-2006)
Kommentar
Fra : Peter Loumann


Dato : 27-09-06 19:55

On Wed, 27 Sep 2006 17:50:24 +0200, Bertel Lund Hansen wrote:

> Ja. Du har ikke sat margin specifikt, og den er forskellig i
> browserne. Regn altid med at hvis du skal styre en placering, så
> skal du selv sætte både margin og padding.

Aha! Jeg har sat den på body og på den højre div, men ikke på den venstre.

> Det så for mig ud til at "ul { padding:5px; margin:15px; }"
> kommer tæt på det du gerne vil have.

Godt, tak, også til Jørn Andersen. Det prøver jeg.

> Jeg ved ikke om det er mit system, men da jeg satte margin til 0,
> forsvandt prikkerne i IE 6.

Også her.

> Petitesser:
>
> Du har:
>    background: #CCCCCC;
>    background-color: #eeeeee;
>
> Brug små bogstaver til farver (eller vær i det mindste
> konsekvent). De to angivelser kan skrives sådan:


Den kendte jeg ikke. Min faste reference, html.dk, har den så vidt jeg kan
se heller ikke. Er den rimeligt baguskompatibel?

>    background: #ccc;
>    background-color: #eee;

> Hvis farven er på formen #xxyyzz, kan den lovligt skrives som
> #xyz.

> Nulværdier kan angives uden enhed: { margin: 0; }

Jo, det er godtnok petitesser. Men jeg kan godt se din pointe - og retter.

--
hilsen pl (peloda hos tiscali her i landet)
http://huse-i-naestved.dk

Bertel Lund Hansen (27-09-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 27-09-06 20:15

Peter Loumann skrev:

>> konsekvent). De to angivelser kan skrives sådan:

> Den kendte jeg ikke. Min faste reference, html.dk, har den så vidt jeg kan
> se heller ikke. Er den rimeligt baguskompatibel?

Det må andre svare på. Jeg går ikke bagud ved Opera og Firefox
idet jeg formoder at deres brugere opdaterer jævnligt. Jeg
tjekker sider i IE 6.0 og ikke længere tilbage.

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

Jesper Brunholm (27-09-2006)
Kommentar
Fra : Jesper Brunholm


Dato : 27-09-06 21:46

Peter Loumann skrev:
>>    background: #ccc;
>>    background-color: #eee;

> Den kendte jeg ikke. Min faste reference, html.dk, har den så vidt jeg kan
> se heller ikke. Er den rimeligt baguskompatibel?>

[NB jeg har re-arrangeret ovenstående quote, men det er
3-tegns-forkortelsen du svarer at du ikke kendte ikke? I modsat fald vil
jeg undskylde min bevidste fejl-citering mange gange ]

Så vidt jeg ved er den ca lige så bagudkompatibel som CSS generelt, dvs.
meget.

Jeg ledte efter specifik info på det, på google, men uden held. Så
kiggede jeg i mine bogmærker, hvor jeg faldt over den her undervejs:
<http://www.webcredible.co.uk/user-friendly-resources/css/css-shorthand-properties.shtml>
- nu vi er ved emnet

Den store kompatibilitets-oversigt på w3schools har den heller ikke
<http://www.w3schools.com/css/css_reference.asp>

MEN WestCiv er der heldigvis for os. På kompatibilitetskortet har de
ikke væsentlige anmærkninger til color definition
<http://www.westciv.com/style_master/academy/browser_support/background.html>
(jo, der er en anmærkning på NN4 og background color, så vidt jeg husker
gik det ud på at man ikke kan definere den til none uden at det går
galt), og under values nævner de formen som fuldgyldig variant uden
anmærkninger
<http://www.westciv.com/style_master/academy/css_tutorial/properties/values.html#color>.
Det vil efter min bedste erfaring sige at selv NN4 tackler den her form
for farveangivelse uden at kny.

mvh

Jesper Brunholm

Peter Loumann (28-09-2006)
Kommentar
Fra : Peter Loumann


Dato : 28-09-06 08:29

On Wed, 27 Sep 2006 22:45:52 +0200, Jesper Brunholm wrote:

> Peter Loumann skrev:
>>>    background: #ccc;
>>>    background-color: #eee;
>
>> Den kendte jeg ikke. Min faste reference, html.dk, har den så vidt jeg kan
>> se heller ikke. Er den rimeligt baguskompatibel?>
>
> [NB jeg har re-arrangeret ovenstående quote, men det er
> 3-tegns-forkortelsen du svarer at du ikke kendte ikke?

Jo. Jeg gjorde mit bedste for at gøre netop det tydeligt, men det var
åbenbart ikke godt nok.

> I modsat fald vil
>> jeg undskylde min bevidste fejl-citering mange gange ]

Der er intet at unsdkylde.

> Så vidt jeg ved er den ca lige så bagudkompatibel som CSS generelt, dvs.
> meget.

Tak!

> Jeg ledte efter specifik info på det, på google, men uden held.

Jeg mindes ikke at have set den før. Besparelsen er heller ikke larmende.

> <http://www.webcredible.co.uk/user-friendly-resources/css/css-shorthand-properties.shtml>

> <http://www.w3schools.com/css/css_reference.asp>

> <http://www.westciv.com/style_master/academy/browser_support/background.html>

> <http://www.westciv.com/style_master/academy/css_tutorial/properties/values.html#color>.

Du har gode bogmærker

> Det vil efter min bedste erfaring sige at selv NN4 tackler den her form
> for farveangivelse uden at kny.

Så må alle browsere i nutidig brug vist være med

--
hilsen pl (peloda hos tiscali her i landet)
http://huse-i-naestved.dk

Jørn Andersen (27-09-2006)
Kommentar
Fra : Jørn Andersen


Dato : 27-09-06 16:49

On Wed, 27 Sep 2006 17:22:48 +0200, Peter Loumann <me@privacy.net>
wrote:

<snip>
<url: http://huse-i-naestved.dk>

>Så er den oppe, se min signatur. Jeg har kun et enkelt lille problem
>tilbage: Jeg har pøvet at få ul'er til at rykke ud til venste margen med
>style="padding:5px". Det virker fint i Opera og Firefox, men ikke i IE. Er
>der mon en løsning på det?

margin-left:0.8em;
Du kan muligvis gøre den en smule mindre, men hvis den bliver for
lille forsvinder "dot'erne".


Mvh. Jørn

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

Søg
Reklame
Statistik
Spørgsmål : 177501
Tips : 31968
Nyheder : 719565
Indlæg : 6408527
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste