/ 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
img i div, størrelse og placering
Fra : Birger Sørensen


Dato : 17-10-11 11:42

Sidder lige og arbejder - og faldt over en pudsighed...

Jeg har en div, der er defineret som 30px bred, 15px høj, text-align
center, en ramme og er floated.
Deri sætter jeg et image: 15x15px png.
Og man skulle så syntes, at det ville blive placeret midt i div'en -
men sådan er det ikke.
Billedet bliver godt nok placeret 7px fra ventre med 8 til højre, så -
og det må være i orden.
Men lodret, bliver det placeret 1px inde i div'en. For at få 15px
placeret midt i 15px, er jeg nødt til at give billedet en
padding-bottom på 1px, så elementet faktisk er 15x16px, og går over
borderen på div'en. Så flyttes det den ene px opad, så tingene ser
rigtige ud (fordi det er et png, så det der overlapper faktisk er
gennemsigtigt..).

Jeg arbejder i FF - test i IE8 og IE8komaptibelitet (IE7) viser at den
opfører sig tilsvarende.
Til gengæld placerer Chrome, Opera og Safari billedet rigtigt, både med
og uden den ekstra 1px padding i bunden, så problemet er ikke større
end det kan løses.

Og det er ikke fordi jeg normalt går op i 1px eller to - lige her er
det så vigtigt, at billedet står midt i, og det undrede mig at 15px
indenfor 15px ikke bliver placeret rigtigt - i det mindste i FF. I IE
er det vel den slags småskævheder man mere eller mindre forventer...

[
Kan ses på
http://skippersevent.dk/index.php?men=musik&sub=moonlight
- har ikke lige tid til en demo..
Klik på et af billederne. Det bliver vist, med en navigation nederst -
det er knapperne i denne, der giver problemet. Lader det stå uden
padding lidt, så man se effekten, skulle man have lyst.
Der arbejdes desuden på siden, så det er lidt noget rod, og der kan
være problemer...
Af andre pudsigheder, kan man undre sig over, at Chrome/Google mener at
siden er på engelsk, og gerne vil oversætte den til dansk - og det er
noget af en oplevelse, at give den lov... lol - og den siger siden er
oversat fra engelsk til dansk. Vorherre bevare's...
Jeg har desuden konstateret, at Chrome kan ikke håndtere 2 HTML
kommentarer efter hinanden...
På siden kan man desuden se både FB- og twitter knapper der validerer,
hvis nogen skulle have den interesse.
]

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



 
 
Birger Sørensen (17-10-2011)
Kommentar
Fra : Birger Sørensen


Dato : 17-10-11 11:59

Birger Sørensen sendte dette med sin computer:
> Jeg arbejder i FF - test i IE8 og IE8komaptibelitet (IE7) viser at den
> opfører sig tilsvarende.

Er så nødt til at korrigere mig selv - det er faktisk *kun* FF der har
problemet... :/

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



scootergrisen (17-10-2011)
Kommentar
Fra : scootergrisen


Dato : 17-10-11 21:03

I stedet for 15x15 så prøv med ligetal som 16x16.

Prøv <html lang="da"> og se om chrome så forstår at siden ikke er engelsk.



Birger Sørensen (17-10-2011)
Kommentar
Fra : Birger Sørensen


Dato : 17-10-11 21:56

scootergrisen har bragt dette til os:
> I stedet for 15x15 så prøv med ligetal som 16x16.
>
> Prøv <html lang="da"> og se om chrome så forstår at siden ikke er engelsk.

^^
Lidt af pointen med ulige størrelser, er at der er een pixel i midten.
Med lige tal er der 4. Og ellers skal man tegne "skævt" - og man ender
i den samme surdej, med at tingene ikke passer sammen.
Jeg har ikke prøvet - men jeg tror ikke FF regner rigtigere med lige
tal med med ulige...

<html lang="da-DK">
er som det står i koden. Og som det skal være, så vidt jeg kan finde ud
af i W3C.
Tror det er ordet "Event", der trigger Googles oversætter. At resten er
på dansk er så åbenbart ligegyldigt. I hvert fald er det ganske
ubrugeligt.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Karl Erik Christense~ (17-10-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 17-10-11 22:18

On 17-10-2011 22:56, Birger Sørensen wrote:

> <html lang="da-DK">
> er som det står i koden. Og som det skal være, så vidt jeg kan finde ud
> af i W3C.
> Tror det er ordet "Event", der trigger Googles oversætter. At resten er
> på dansk er så åbenbart ligegyldigt. I hvert fald er det ganske ubrugeligt.
>
> Birger
>

Jeg har ikke nærstuderet om der er et problem på siden, men når man
bruger udenlandske ord, er muligheden at indsætte f.eks.:
<span lang=en>Event</span>

Jeg havde lidt "sjov" på DM i Webdesign, med de 2 amerikanske dommeres
biografier, som er citeret på engelsk. Når Google oversatte siden til
engelsk, blev biografierne oversat til en blanding af svensk/norsk.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://produceret-i.dk/ - Køb danske produkter
http://webdesign.ranunkelvej.com - Artikler om webdesign

scootergrisen (17-10-2011)
Kommentar
Fra : scootergrisen


Dato : 17-10-11 22:20

Prøv alligevel med 16x16 ellet andet lige tal og se om du ikke får det
du ønsker.

Men hvis du er ude efter pixelpræcision så tror jeg aldrig du får det
til at være ens i alle browserne. Så er det lettere bare at lave et
billede og hvor laver det som du vil have det skal se ud.

Er der nogen grund til du ikke bare laver knappen og baggrunden i samme
billede så det ser rigtigt ud ?

Birger Sørensen (17-10-2011)
Kommentar
Fra : Birger Sørensen


Dato : 17-10-11 23:19

Den 17-10-2011, skrev scootergrisen:
> Prøv alligevel med 16x16 ellet andet lige tal og se om du ikke får det du
> ønsker.
>
> Men hvis du er ude efter pixelpræcision så tror jeg aldrig du får det til at
> være ens i alle browserne. Så er det lettere bare at lave et billede og hvor
> laver det som du vil have det skal se ud.
>
> Er der nogen grund til du ikke bare laver knappen og baggrunden i samme
> billede så det ser rigtigt ud ?

Genbrug af CSS, er faktisk grunden til at gøre det på den måde.
Den ene af knapperne skal desuden skifte billede.
Klar, det kan gøres ved at give en speciifk CSS til knapperne, hvis
ellers FF regner rigtigt på baggrundsbilleder...

16x16 kan ikke give det jeg har brug for. Der skal være et ulige antal,
som forklaret før, med lige stor afstand i top og bund.

Jo, jeg får det som jeg vil have det - holder ikke op før. Og det løses
ved i FF at give billedet en 1px padding i bunden. Det flytter billedet
på plads i FF, og eftersom det er gennemsigtigt, generer det ikke
visuelt i de andre.

Lidt af pointen var at gøre opmærksom på problemet existerer i FF.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste