Hur begränsar man bredden på en websida vid kodning?
- Trådstartare erro.se
- Start datum
erro.se
Aktiv medlem
Nu har jag uppdaterat min hemsida och i det senaste inlägget har jag använt textrader med 40em längd precis som tidigare, men nu dessutom med en bild vars storlek anges i % vilket gör att den skalas om i relation till textstorleken.
http://erro.se/traces/Enkopings_tandsticksfabrik/
Eftersom bilden är 640*480 pixel så skalas den ner i storlek och blir lite taggig, men inte mer än att åtminstone jag kan leva med det. Den är ju bara till för att ge en snabb bild av vad det rör sig om, stora bilder finns ju i bildalbumet sedan.
Vad tycker ni andra?
En annan variant vore ju om man skulle kunna ha bilden i större storlek men utfallande till höger, alltså låta bilden fortsätta ut i textens högra marginal. Går det att göra?
Och så använder jag fortfarande en tabell för att centrera själva textblocket på sidan. Går det att göra med DIV/CSS på något sätt så man slipper tabellen med bara en cell? Jag vill ju alltså ha själva texten vänsterjusterad men hela textblocket ska ligga centrerat på sidan, precis som det ser ut nu.
http://erro.se/traces/Enkopings_tandsticksfabrik/
Eftersom bilden är 640*480 pixel så skalas den ner i storlek och blir lite taggig, men inte mer än att åtminstone jag kan leva med det. Den är ju bara till för att ge en snabb bild av vad det rör sig om, stora bilder finns ju i bildalbumet sedan.
Vad tycker ni andra?
En annan variant vore ju om man skulle kunna ha bilden i större storlek men utfallande till höger, alltså låta bilden fortsätta ut i textens högra marginal. Går det att göra?
Och så använder jag fortfarande en tabell för att centrera själva textblocket på sidan. Går det att göra med DIV/CSS på något sätt så man slipper tabellen med bara en cell? Jag vill ju alltså ha själva texten vänsterjusterad men hela textblocket ska ligga centrerat på sidan, precis som det ser ut nu.
erro.se
Aktiv medlem
För den som undrar: Ett snabbt sätt att ändra textstorlek i sin webläsare är för övrigt att hålla ner Ctrl samtidigt som man snurrar på musens scroll-hjul.
Med Firefox och IE 7 kan man göra detta i stort sett steglöst från mikroskopisk till gigantisk storlek. med IE 6 och tidigare finns bara 5 storlekar att välja på.
Ctrl-0 återgår till normal storlek.
Med Firefox och IE 7 kan man göra detta i stort sett steglöst från mikroskopisk till gigantisk storlek. med IE 6 och tidigare finns bara 5 storlekar att välja på.
Ctrl-0 återgår till normal storlek.
Matte_J
Aktiv medlem
Där har du nog tyvärr fel - enligt mycket av den statistik jag sett hänger fortfarande en rätt stor andel av webbsurfarna kvar vid 800x600px. Det varierar rätt kraftigt beroende på vilken målgrupp sajten vänder sig till, men i vissa fall är det mer än 15% av besökarna som har skärmupplösning lägre än 1024x768px (tex http://www.w3schools.com/browsers/browsers_stats.asp)
Statistiken för sajter med en högre snittålder/lägre "nördfaktor" torde ha en ännu högre andel besökare med låga skärmupplösningar.
rob
Aktiv medlem
Tittade på statistiken du hänvisar till. Troligtvis inget fel på den, men jag tror dock inte den är så rättvisande för Sverige, t.ex med tanke på alla HemPC som finns här. Folk byter dator ofta . . nya stora skärmar. Det har väl knappast ens funnits bärbara med 800 bredd dom senaste åren?
Den statistik jag har tillgång till på vår sida visar 3% 800x600. På vår gamla sida (~8000 träffar) hade vi också statistik, som tyvär inte är sparad, där jag minns det som att 800x600 var "försumbar". Den sidan var gjord för 800 bredd eller mer, men gick att rulla i om man hade lägre. Får väl ändra om det kommer klagomål. Eller när folk börjar surfa med telefonen.
//rob
arneri
Avslutat medlemskap
De flesta användarvänliga sajterna har styrning av maximal textbredd. Inte speciellt roligt att läsa en text över en sida som är 1600 px bred. Titta på vilken effektiv bredd DN, Expressen mfl använder. 500 px är vanligare än 800 för TEXT.
Enklast är att en "textbox" vars bredd minskar ifall browerns bredd minskas. De flesta sajter som beskriver CSS teknik brukar gå in på detta.
Med CSS kan man även ha olika mallar för skärm, utskrift och PDA.
<style type="text/css" media="screen">
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheldstyle.css" />
T.ex. vid utskrift går det att plocka bort reklamboxar, sidfot, sidhuvuden etc vilket kan göra användare glada.
Enklast är att en "textbox" vars bredd minskar ifall browerns bredd minskas. De flesta sajter som beskriver CSS teknik brukar gå in på detta.
Med CSS kan man även ha olika mallar för skärm, utskrift och PDA.
<style type="text/css" media="screen">
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheldstyle.css" />
T.ex. vid utskrift går det att plocka bort reklamboxar, sidfot, sidhuvuden etc vilket kan göra användare glada.
Matte_J
Aktiv medlem
Jo, du kan mycket väl ha rätt - sånt som skärmupplösning varierar naturligtvis mycket beroende på målgruppens utseende. Anledningen att använda sig av 800x600 behöver dock inte bara vara att man har en gammal dator - många upplever att "allt blir så litet" vid högre upplösningar. Jag har flera arbetskamrater som vägrar att köra högre upplösning än 800x600px.
P.R.
Aktiv medlem
Det är lätt hänt att överskatta betraktarnas intresse för det man själv producerat.
Din tillvaro kommer att bli lugn och bekväm för det kommer inte att komma några klagomål. De som ens förstår anledningen till sina svårigheter kommer att svära till över taskig design och sedan är din sida bortglömd.
joppis
Aktiv medlem
Har också lite tankar kring detta 
Man kan, om man vill vara lite kreativ, låta ett javascript vid renderingstillfället analysera vilken upplösning användaren kör och sedan ha olika mallar för några olika scenarion.
Fördelar:
- Användaren med 800px i bredd slipper scrolla i sidled.
- Användare med 1024 eller 1280 i bredd får en bredare version.
- Man behöver ej ge olika mallar för varje upplösningsalternativ utan kan skapa intervall (exempelvis: < 800, 1024 - 1280, och > 1280).
Nackdelar:
- Kräver javascript. Gäller att se till att sidan visas i en default-mall om javascript är avslaget.
- Alla webbläsare kanske inte ger ifrån sig den nödvändiga informationen om upplösning (defaultmall som lösning).
- Man kan ej vara säker på att användaren kör i maximerat läge. Men om upplösningen är låg och användaren väljer att göra på detta sätt så är denne nog van vid scroll på de flesta siter.
Man kan, om man vill vara lite kreativ, låta ett javascript vid renderingstillfället analysera vilken upplösning användaren kör och sedan ha olika mallar för några olika scenarion.
Fördelar:
- Användaren med 800px i bredd slipper scrolla i sidled.
- Användare med 1024 eller 1280 i bredd får en bredare version.
- Man behöver ej ge olika mallar för varje upplösningsalternativ utan kan skapa intervall (exempelvis: < 800, 1024 - 1280, och > 1280).
Nackdelar:
- Kräver javascript. Gäller att se till att sidan visas i en default-mall om javascript är avslaget.
- Alla webbläsare kanske inte ger ifrån sig den nödvändiga informationen om upplösning (defaultmall som lösning).
- Man kan ej vara säker på att användaren kör i maximerat läge. Men om upplösningen är låg och användaren väljer att göra på detta sätt så är denne nog van vid scroll på de flesta siter.
erro.se
Aktiv medlem
Kul att min tråd väckts till liv igen.
Jag tycker att det blev rätt bra när jag specade sidbredden i "em". Den blir då dessutom dynamiskt skalbar beroende på hur stort teckensnitt besökaren väljer att använda.
Sen beror det ju förstås på vilken målgrupp man vänder sig till. Jag behöver ju t.ex. inte bry mig om folk som surfar med telefoner och liknande. Inte ännu iallafall, tror inte det slagit igenom tillräckligt stort för att man ska vilja surfa runt på foto-sajter av mitt slag. Och om besökaren å andra sidan har extremt stor och bred skärm så vill man ju ändå inte fylla ut hela bredden.
Men en fråga fick jag aldrig svar på förut: går det att kombinera sidans bredd med utfallande bilder? Alltså att låta texten hålla sig inom givna ramar, men tillåta att en bild sticker ut åt höger eller vänster (utfallande).
Jag tycker att det blev rätt bra när jag specade sidbredden i "em". Den blir då dessutom dynamiskt skalbar beroende på hur stort teckensnitt besökaren väljer att använda.
Sen beror det ju förstås på vilken målgrupp man vänder sig till. Jag behöver ju t.ex. inte bry mig om folk som surfar med telefoner och liknande. Inte ännu iallafall, tror inte det slagit igenom tillräckligt stort för att man ska vilja surfa runt på foto-sajter av mitt slag. Och om besökaren å andra sidan har extremt stor och bred skärm så vill man ju ändå inte fylla ut hela bredden.
Men en fråga fick jag aldrig svar på förut: går det att kombinera sidans bredd med utfallande bilder? Alltså att låta texten hålla sig inom givna ramar, men tillåta att en bild sticker ut åt höger eller vänster (utfallande).
