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