webForumDet fria alternativet

Behöver hjälp med att sidan "bryts sönder"

HTML & CSS

8 svar · 527 visningar · startad av rundberg

Medlem sedan mars 2007116 inlägg
Frågan#1

Ja som rubriken meddelar så bryts min layout sönder när man ändrar textstorlek i IE vilket jag stör mig ganska mycket på. Jag har googlat efter bulletproof web design, men då det finns en bok med samma namn så är det lite svårt att hitta någon guide som kan hjälpa mig på internet. Är det någon av er som är duktig på området och kan hjälpa mig?

Min sida

Min css-mall

Och ja just det ja, sidan är uppbuggd med CSS=)

Medlem sedan sep. 2006867 inlägg
#2

Enligt min uppfattning så är det ganska svårt att skapa en design som ser rätt ut oavsett hur användaren ändrar storlek på typsnittet. Många designdetaljer bygger ju på att man har något så när kontroll över storleken på ingående element. Jag tänker sällan på fontstorlek när jag designar trots att man kanske borde om man skall vara tillgänglig även för människor med nedsatt syn.

Din sida ser "ok" ut i FF2 och IE7 med större fonter :) dvs man kan fortfarande läsa och klicka på allt även om menyn visuellt går sönder.

Vad menar du mer specifikt med att din layout "bryts sönder"? Kan du bifoga screenshot på vad du menar samt vilken verision av IE du tycker bråkar?

MVH

Medlem sedan nov. 20051 596 inlägg
#3

Det händer med dina flaggor t.ex och då kommer vi tillbaka till det som jag pratade om i förra inlägget. Du "drar" du in flaggorna till sin plats över sin bakgrundsbild.
Långt upp i koden har du placerat flaggorna i en div. Långt ner så finns deras <div id="flagg"> Klipp bort flaggorna och flytta ner den till dit. Och sätt nya värden på "flagg" i stället, så flaggorna hamnar rätt där och då ska du inte behöva z-index. Då slipper du alla <br> där t.ex och <div id="box"> kan du ta bort helt eftersom den tar plats när du ändrar textstorleken.
Om du gör dina top-bakgrundsbilder med lite längre streck neråt så de överlappar varandra en del så kan det gå med repeat y.
Men det är som headbug säger att det kan vara svårt att få allt att fungera. Ett sätt är att man går över helt till att bara ange relativa storlekar, lättast med procent på allt så även bilder ändras relativt till både textstorlek och fönsterbredd men din design ser svår ut att ändra till det.
Ett sätt är att du gör dina kanter runt boxarna med css i stället för bakgrundsbilder.
ex css-play
Finns lite fler exempel där på hur man kan göra runda-hörn boxar på hans sida.
Mycket jobb, men är man envis så ska det gå... :)

Medlem sedan aug. 20068 090 inlägg
#4

Som både headbug och tanten, ungefär.

Varenda webbsida kommer förr eller senare att se ut som hundkräks om man ökar fontstorleken tillräckligt, oavsett om den byggts av Alla Gurus Överguru. Kolla in några kända om du vill jämföra...

Många är oroade i onödan över hur folk med nedsatt syn kommer att se sin sida. För det första så har användare med synproblem nästan alltid låg upplösning på själva skärmen eftersom dom ju använder andra program också. Man ser alltså allt stort från början. Det kan vara ibland dom behöver öka textstorleken ett snäpp eller två, men det är faktiskt inte så ofta.

Och folk med grava synproblem använder ju en tal-läsare, dvs en browser som läser upp innehållet. För dom spelar det ingen roll alls hur sajten ser ut.

Alltså: Bara slappna av. Du har inget att oroa dej för.

Medlem sedan nov. 20051 596 inlägg
#5

Håller helt med Danne V men eftersom flaggorna hoppar ur redan vid en textstorlek större i FF, så kan du ju försöka fixa den biten.

Medlem sedan sep. 2006867 inlägg
#6

Danne V skrev:

Och folk med grava synproblem använder ju en tal-läsare, dvs en browser som läser upp innehållet. För dom spelar det ingen roll alls hur sajten ser ut.

Men desto mer hur siten är kodad! Det är därför man använder <em> istället för <i> och <strong> istället för <b> och absolut inte använder tabeller för att positionera innehåll. Kan vara bra att provlyssna sina sidor ibland :) Och flashsidor går fetbort...

Medlem sedan mars 2007116 inlägg
#7

Okej. Skall fixa det med flaggboxen och lite sånt. Var mycket att läsa nu för detta inlägg men det verkar ju inte som jag skall oroa mig så mycket för att folk kan ändra textstorlek. Så jag skall sätta mig ner någon dag då jag inte har något annat över axlarna och se över hala min kod med att sätta <strong> istället för <b> o.s.v. och hör av mig om det är något som fortfarande krånglar eller likande.

Men tack för alla inläggen och svar, känns verkligen som jag börjar lära mig mer och mer hela tiden nu. Det finns fler saker att tänka än att sidan skall se bra ut i m ina ögon, hade inte en aning om allt det där med hur synskadade ser på sidan o.s.v.,

Tack en än gång allihopa

Medlem sedan nov. 20051 596 inlägg
#8

headbug skrev:

Men desto mer hur siten är kodad! Kan vara bra att provlyssna sina sidor ibland :) Och flashsidor går fetbort...

(y)
Men rundberg...
Du har av vad jag förstått gjort din första sida med css och jag tycker du gjort det bra. Men så småningom kommer du upptäcka att det finns fler apparater än PC och Mac, man vill koda för.
Mobilen, handdatorer, de webläsare som många handikappade sitter vid, ofta 640 skärmar, när de inte kan använda mus. Då blir det viktigt att man inte ska behöva scrolla sidledes... Eller de som sitter långt ifrån med sin rullstol, ju inte alltid de sitter vid egen utrustning, kan de se texten?
Sedan finns det mycket man kan/bör tänka på i sin kodning som inte syns på framsidan.
Hur kan t.ex den blinde hoppa fram till innehållet i stället för att höra menyn om igen. Hur vet de att du skickat i väg dem till ny sida med target... dåligt...
Jag kommer inte ihåg nu hur många gånger jag gjorde om sidor i början när jag upptäckte alla sådana saker. Men kul var det och riktigt roligt var det när jag lyckades göra en sida som fungerade i både mobilen och stor skärm utan att ha olika css för dem och en blind som tyckte det var helt ok att navigera och höra sidan dessutom.
Men ta en sak i taget... tycker du det är kul så jobbar du vidare med den sida du gjort nu för att förbättra för alla användare... :)

Medlem sedan mars 2007116 inlägg
#9

P.S.

headbug skrev:

Vad menar du mer specifikt med att din layout "bryts sönder"? Kan du bifoga screenshot på vad du menar samt vilken verision av IE du tycker bråkar?

MVH

Det jag menade var mest att det blev lite mellanrum mellan t ex menyn och bilden som rundar av hela "höger layouten". Men skall se närmare på de förslag jag fick om att avrunda boxarna med hjälp av css.

:birp Man kan ju i princip uträtta vad som hälst med hjälp av CS, och det känns som om det blvit roligare att koda css sidor än vanliga. haha :moose

665 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
516 ms — deklarationer (db)
0 ms — hämta statistik (cache)
146 ms — hämta tråd, inlägg och bilagor (db)
122 ms — ändringar (db)