Problemer med float på bilde.

[_Paulsen_]

Jeg holder på med et prosjekt nå, og jeg klarer ikke finne ut av hvor feilen min ligger, det er i IE ting ikke vises som det skal.. Bildet blir floatet feil..

 

Link til eksempel

 

Noen som ser hva feilen kan være? Har prøvd å fikse dette nå i noen timer, men har ikke klart det...

[phax]

sjekket siden i IE og firefox her nå, så ingen merkbare feil egentlig?

 

skummet bare raskt gjennom da. hvor nøyaktig ligger feilen?

[_Paulsen_]

sjekket siden i IE og firefox her nå, så ingen merkbare feil egentlig?

 

skummet bare raskt gjennom da. hvor nøyaktig ligger feilen?

Det som er saken, er at det blir en liten "glippe" på høyre side av bildet og man ser mye mer av den grå bakgrunnsfargen, noe som ikke skal skje.. Hvis du sjekker i FF eller Opera, skjønner du hva jeg mener... der strekker nemlig bildet seg helt korrekt, slik at bildet fyller "hele" feltet...

 

Ble dette litt mer klarhet i problemet?

[Simon Zimmermann]

The poor guy width a slow connection

Oshea22, Jeg vil bare fortelle deg en liten ting om websiden din, eller kanskje en liten hypotetisk historie i hvert fall:

Hvis jeg for ca. 3mnd siden hadde besøkt din side(Halden Innebandyklubb) så ville jeg forlatt den før den var ferdig å laste. Grunnen til dette er ganske enkel og jeg tror fortsatt mange lider under den samme skjebne som jeg gjorde da, det vil si at mange forlater websiden din før den er ferdig å laste! Og det er noe man burde ta på alvor som webdesigner, er det ikke det?

 

Ignorante webdesignere vs. 56k

Selv om det er en kjedelig og muligens en irriterende sannhet, så er det en sannhet; ikke alle har nye computere og raske internett forbindelser. Det er det samme som at ikke alle har like godt syn, derfor tar vi hennsyn til dem som er svaksynte og derfor skal vi også ta hensyn til dem uten bredbånd. Du gjør ikke det, du gir dem med treg forbinndelse finger'n og sier: "Skaff dæ breebånn!". Du gir meg med treg computer finger'n og sier: "Skaff dæ en bedre data da!". Du gir faen i dem som ikke er like heldige som deg.

Æsj, jeg liker ikke ignorante webdesignere!

 

"The total size of your images is 627524 bytes"

Ok, du prøver å skrive god XHTML, men har ikke helt lykkes i det. Det er i hvert fall et forsøk og jeg respekterer det. Et header bilde med en total størrelse på 377898 bytes (og et til på 124030 bytes) ser for meg ut som et meget dårlig forsøk. Jeg kan i det minste bekrefte at det har gått i vasken. Så her er mitt råd: søk på internett etter informasjon om komprimering av bilder og deretter begynner du å komprimere bildene dine! Du vil da i hvert fall gjøre meg til en noe blidere besøkende som ikke irriterer ræva av seg fordi websiden hakker når han skroller ...

 

Lenker

How big is your website

 

reg. leif

Endret 29. oktober 2004 av Waldmeister

[_Paulsen_]

Jeg takker for fin kritikk, Waldmeister! Dette ser jeg på som en fin og konstruktiv kritikk, dog litt krass noen steder, men det gjør meg ingen ting. Tror dette hjelper meg på mange måter, dette er et skoleprosjekt, og egentlig mitt aller første hjemmesideprosjekt, både med CSS og bruk av Photoshop.

 

 

The poor guy width a slow connection

Oshea22, Jeg vil bare fortelle deg en liten ting om websiden din, eller kanskje en liten hypotetisk historie i hvert fall:

Hvis jeg for ca. 3mnd siden hadde besøkt din side(Halden Innebandyklubb) så ville jeg forlatt den før den var ferdig å laste. Grunnen til dette er ganske enkel og jeg tror fortsatt mange lider under den samme skjebne som jeg gjorde da, det vil si at mange forlater websiden din før den er ferdig å laste! Og det er noe man burde ta på alvor som webdesigner, er det ikke det?

 

Fint at du opplyser meg om dette! Det visste jeg faktisk ikke, selvom jeg har testet på litt forskjellige sider!

 

b]Ignorante webdesignere vs. 56k[/b]

Selv om det er en kjedelig og muligens en irriterende sannhet, så er det en sannhet; ikke alle har nye computere og raske internett forbindelser. Det er det samme som at ikke alle har like godt syn, derfor tar vi hennsyn til dem som er svaksynte og derfor skal vi også ta hensyn til dem uten bredbånd. Du gjør ikke det, du gir dem med treg forbinndelse finger'n og sier: "Skaff dæ breebånn!". Du gir meg med treg computer finger'n og sier: "Skaff dæ en bedre data da!". Du gir faen i dem som ikke er like heldige som deg.

Æsj, jeg liker ikke ignorante webdesignere!

 

Nok en gang, dette her er ikke bevisst fra min side, da jeg ikke har funnet ut dette før deg! Dette er noe jeg selvfølgelig skal ta til etterettnig, og gjøre mitt beste på å få fikset!

 

"The total size of your images is 627524 bytes"

Ok, du prøver å skrive god XHTML, men har ikke helt lykkes i det. Det er i hvert fall et forsøk og jeg respekterer det. Et header bilde med en total størrelse på 377898 bytes (og et til på 124030 bytes) ser for meg ut som et meget dårlig forsøk. Jeg kan i det minste bekrefte at det har gått i vasken. Så her er mitt råd: søk på internett etter informasjon om komprimering av bilder og deretter begynner du å komprimere bildene dine! Du vil da i hvert fall gjøre meg til en noe blidere besøkende som ikke irriterer ræva av seg fordi websiden hakker når han skroller ...

 

Hvis du ser på siden, så har jeg bevisst latt være å skrive XHTML-kode, da det var vanvittig mye arbeid med å re-kode siden. Dette er kanskje noe jeg kommer til å endre på etterhvert, men det er ikke første pri, pga. innleveringsfrist.

Når det gjelder grafikken jeg har brukt, trodde jeg at jeg hadde fått komprimert bildene jeg bruker i CSS'en, så godt som mulig.. Her tar jeg tydeligvis feil.. Trodde at det var til .gif man burde komprimere, men der har du kanskje noen tips til meg? Har nemlig også merket at siden har hakket litt når jeg scrollet, men glemte å tenke noe mer på dette da jeg ikke merket noe mer til dette. Så om du hadde noen tips til meg om hvordan jeg skal komprimere riktig, tar jeg i mot dette med stor takk!

 

Nok en gang, takk for fin kritikk

Endret 29. oktober 2004 av OShea22

[Simon Zimmermann]

Først & fremst

Først og fremst vil jeg bare gjøre det klart at du må ta deg nær av det om jeg skulle virke krass. Det var absolutt ikke ment som et personlig angrep, men kritikk på hvordan man eksluderer brukere ved å ha en webside med bilder som krever rundt 2-minutters nedlastningstid for dem uten bredbånd.

 

XHTML doctype, HTML syntaks

Hvis du ser på siden, så har jeg bevisst latt være å skrive XHTML-kode, da det var vanvittig mye arbeid med å re-kode siden.

 

Denne siden har riktig syntaks i forhold til doctype(HTML sytaks og doctype).

Denne siden derimot har XHTML doktype og HTML syntaks, hvorfor?

 

Komprimering

Når det gjelder grafikken jeg har brukt, trodde jeg at jeg hadde fått komprimert bildene jeg bruker i CSS'en, så godt som mulig.. Her tar jeg tydeligvis feil.. Trodde at det var til .gif man burde komprimere, men der har du kanskje noen tips til meg?

 

I photoshop, som du selv benytter, er det lett å komprimere bilder til bruk for web.

Jeg ville benyttet meg av JPG formatet til header og bilder generelt, mens bilder med få farger gjerne blir mindre ved bruk av gif formatet. PNG har jeg selv ikke særlig erfaring med og vil ikke utale meg stort om den saken, men man ser jo at header bilde ditt ble meget stort når du lagret det som png ... For å komprimere bilder i Photoshop går du fra den orginale photoshop filen din(*.psd) til File -> Save for Web(Ctrl+Shift+Alt+S). Her kommer det opp et vindu hvor du velger format, quality etc. Bli kjent med vinduet og prøv deg frem.

 

Ellers finnes det masse informasjon om hvordan du komprimerer bilder, det er bare å søke.

[phax]

bare for å komme med litt tilleggsinfo, gif funker best til vektor grafikk, tekst, rene flater osv, men jpg er best egnet til foto og mer "avansert" grafikk med mye gradients skygger osv.

 

som sagt, prøv deg frem med "save for web" funksjonen.

[_Paulsen_]

Først & fremst

Først og fremst vil jeg bare gjøre det klart at du må ta deg nær av det om jeg skulle virke krass. Det var absolutt ikke ment som et personlig angrep, men kritikk på hvordan man eksluderer brukere ved å ha en webside med bilder som krever rundt 2-minutters nedlastningstid for dem uten bredbånd.

 

Hehe, jeg antar at du mener at jeg ikke skal ta meg nær av det, eller? I så fall gjorde jeg ikke det, bare så det er sagt. Har ikke noe i mot å motta slik kritikk

 

 

Denne siden har riktig syntaks i forhold til doctype(HTML sytaks og doctype).

Denne siden derimot har XHTML doktype og HTML syntaks, hvorfor?

 

Nei dæven, hehe, visste det var et sted jeg glemte å fjerne det.. Hehe. Jeg skulle nemlig bare teste ut hvor mange feil jeg fikk dersom jeg kjørte XHTML-doctype, ettersom jeg kun hadde brukt HTML-standarden. Derfor disse to forskjellige sidene. Fint at du minnte meg på det

 

I photoshop, som du selv benytter, er det lett å komprimere bilder til bruk for web.

Jeg ville benyttet meg av JPG formatet til header og bilder generelt, mens bilder med få farger gjerne blir mindre ved bruk av gif formatet. PNG har jeg selv ikke særlig erfaring med og vil ikke utale meg stort om den saken, men man ser jo at header bilde ditt ble meget stort når du lagret det som png ... For å komprimere bilder i Photoshop går du fra den orginale photoshop filen din(*.psd) til File -> Save for Web(Ctrl+Shift+Alt+S). Her kommer det opp et vindu hvor du velger format, quality etc. Bli kjent med vinduet og prøv deg frem.

 

Ja, jeg trodde jeg visste om denne funksjoen, altså save for web, men har tydelig glemt å gjøre det da, ettersom bildene ble så store som de ble.. Tror nok det blir vanskelig å bruke JPG i headeren, siden jeg må ha transparent bakgrunn, og det får jeg jo ikke med det.. Har nemlig den svarte gradienten som bakgrunn på siden, og headeren ligger oppå, hvis du skjønner hva jeg mener, derfor må den være transparent.. Forresten, hva er optimal størrelse for slike filer egentlig, for web mener jeg..?

Men som sagt, skal prøve meg frem

Endret 29. oktober 2004 av OShea22

[_Paulsen_]

bare for å komme med litt tilleggsinfo, gif funker best til vektor grafikk, tekst, rene flater osv, men jpg er best egnet til foto og mer "avansert" grafikk med mye gradients skygger osv.

 

som sagt, prøv deg frem med "save for web" funksjonen.

I know, men som jeg skrev over, er jeg avhengig av at bakgrunnen på headerbildet er transparent, og det får jeg jo bare med gif.. Vet jeg får det med PNG også, men som sikkert mange vet, takler ikke IE dette på riktig måte..

 

Og ja, skal prøve meg litt frem med save for web ja

[phax]

... Tror nok det blir vanskelig å bruke JPG i headeren, siden jeg må ha transparent bakgrunn, og det får jeg jo ikke med det.. Har nemlig den svarte gradienten som bakgrunn på siden, og headeren ligger oppå, hvis du skjønner hva jeg mener, derfor må den være transparent ...

hvorfor ikke bare lage to lag i photoshop, gradient underst og bilde oppå i den transparant graden du er ute etter også merge lagene og save for web i jpg?

 

 

på en slik header er vel 50-60kb en ok størrelse.

 

 

 

 

edit: forresten litt arti med han hodeløse spillern på den header'n!

Endret 29. oktober 2004 av phax

[_Paulsen_]

hvorfor ikke bare lage to lag i photoshop, gradient underst og bilde oppå i den transparant graden du er ute etter også merge lagene og save for web i jpg?

Hmm, ikke helt sikker på akkurat hva du mener her... Mulighet for litt ytdypning, om det er mulig?

[_Paulsen_]

Har dessverre ikke fått tid i dag til å se på grafikken, men jeg tar opp igjen det tråden egentlig handlet om

 

@Waldmeister: Du vet vel ikke hvorfor bildet floates feil i IE vel? Det som skjer, er at den lysegrå bakgrunnen synes på høyre side av bildet, noe som ikke skjer i FF og Opera... Og jeg vil ikke at den skal vises... Ser ikke hva problemet er, og har ikke klart å løse det..

[Simon Zimmermann]

Denne skal se sånn ut:

img {
 float: right;
 margin: 0;
 border: none;
}

[_Paulsen_]

Denne skal se sånn ut:

img {
 float: right;
 margin: 0;
 border: none;
}

Takker så meget, Waldmeister! Funkerer knirkefritt

 

Eneste problem jeg har igjen da, var det med grafikken.. Sliter litt med å få det til å virke slik jeg skal.. Bruker save for web, men det vil seg ikke slik jeg skal ha det.. Hva må jeg gjøre for å få komprimert det da? Selve headerbildet er jo 122kb, noe som sier seg selv at er for stort! What can I do?

[Haraldson]

Save for web - JPG - 50% kvalitet pleier å være like bra uten synlig tap. Vet ikke om det blir mindre da, men du kan jo rote mer med innstillingene

[_Paulsen_]

Save for web - JPG - 50% kvalitet pleier å være like bra uten synlig tap. Vet ikke om det blir mindre da, men du kan jo rote mer med innstillingene

Har prøvd dette skjønner du, Berg, men det som er saken, er at jeg trenger header-bildet til å ha transparent bakgrunn, siden jeg har en egen bakgrunn i body.. Og når jeg bruker JPG, skjer jo ikke dette, det som er problemet mitt..

[Haraldson]

Vel, som noen foreslo over her:

 

Åpne både bakgrunnsbildet i body og headerbildet -> legg de i samme dokument, regn ut hvor de skal være i forhold til hverandre, og eksporter. Har brukt den samme metoden på undeclined.net (header).

 

Edit: Selv om det kanskje ikke er så lett å se akkurat på denne siden, men jeg har uansett gjort det før, da

Endret 31. oktober 2004 av Mr.Berg

[_Paulsen_]

Åpne både bakgrunnsbildet i body og headerbildet -> legg de i samme dokument, regn ut hvor de skal være i forhold til hverandre, og eksporter.

Mulig det er meg det er noe g'æærn't med assa, men jeg skjønte ikke s mye av det du skrev der gitt...

[Haraldson]

OK... Du har to bilder, et som skal være header og ett som du bruker som bakgrunn på body, right?

 

1. Åpne begge disse bildene.

2. Kopier headerbildet over i bildet med body-bg, slik at header ligger som det øverste laget i det nye dokumentet.

3. Du vil nå ha ETT bilde som skal være header. Body-bg-bildet bruker du fortsatt som bakgrunn i body, men nå slipper du å tenke på gjennomsiktighet.

4. Det som gjenstår er å stille headerbildet slik at det går i ett med body-bg. Dette gjøres med padding og margin i CSS.

 

Håper det var forståelig...

[_Paulsen_]

Takk Berg Får vel nesten takke Jesper også, hehe Har endelig fått det til, og jeg tror nå at siden skal lastes endel kjappere enn det den gjorde i går, f.eks...

 

Header-bildet har fått redusert filstørrelse fra 122kb til drøye 48kb tror jeg, så det burde hjelpe endel!

 

Takker så meget for bra kritikk Waldmeister og fine tips, Mr.Berg!

 

Nærmer meg ferdig, det som står igjen nå er rapporten!

Endret 31. oktober 2004 av OShea22