Hur begränsar man bredden på en websida vid kodning?

[erro.se]

Hur ska man tänka när man gör en websida när det gäller hur bred den ska vara? Ska man ha fast eller variabel bredd? Och hur löser man det på bästa sätt?

På min hemsida har jag idag ingen styrning av bredden, vilket inte är bra eftersom textraderna blir långa och svårlästa. Men hur ska jag göra det bättre?

Ska man använda en tabell med fast bredd i pixlar? Isåfall hur bred? Å andra sidan får man då en horisontell scroll-list om besökaren har ett webläsarfönster som är mindre än sidbredden.

Eller ska man ha en tabell med bredd i procent? Då blir det å andra sidan väldigt korta textrader om man har ett litet webläsarfönster.

Eller kan man kombinera på något sätt? Ange en minsta och största sidbredd samtidigt på något sätt?

Man har väl två saker att ta hänsyn till gällande sidbredd på webben:

- Användarens bredd på webläsarfönstret. Kan man ens veta den?
- Lagom långa textrader

Hur ska man egentligen optimera detta eftersom man inte vet hur stora skärmar folk har, vilka upplösningar de använder eller hur stora webläsarfönster de har. Finns det några rekommendationer?

Jag har hört talas om saker som "liquid design", "grid design" och liknande. Är det något? Eller ska jag lära mig CSS bättre?

Hur gör och tänker ni som kan det här?

 

[erro.se]

Webdesign med fast bredd blir väl enklare att göra, men passar kanske inte alla skärmstorlekar.

Med "flytande" design för man förstås en mer flexibel lösning, men den blir väl mer komplex att göra?

Kan man kombinera på något bra sätt?

Eller ska man bara designa med fast bredd anpassad för den vanligaste skärmstorleken, centrera på sidan och inte bry sig?

Kan ju tillägga också att jag bara handkodar HTML och lite CSS för husbehov, jag har alltså inga proffskunskaper.

 

[rob]

Jag kör åxå handkodning i HTML och CSS, lade ut en ny variant av fotoklubbens hemsida häromdagen. Den är gjord för att passa i 1024x768 som minsta upplösning, tror och hoppas att det inte finns några med lägre upplösning längre.
Där har jag lagt in att det inte ska komma några rullningslister.
Har räknat med att många har en massa "skit" i sin nätbläddrare som t.ex yahoo, google, etc toolbars och liknande. Sidan ska rymmas i ett maximerat 1024x fönster iallafall är meningen.
Kolla sidan här Söderköpings Fotoförening
Om du tittar på kodningen så ser du hur jag gjort, finns säkert hur många andra sätt som helst.

//rob

 

[Pegaso_Gbg]

Du kan ju kika på
http://www.openwebdesign.org/
eller
http://oswd.org

där finns en hel del att hämta.

 

[magnus67]

Ja, för långa rader minskar läsabarheten på texten. Huvudet får ju fara fram och tillbaka över skärmen som vore man åskådare på en tennismatch.

Man kan göra en css-klass som används i p- och/eller div-taggar som omsluter text. Där sätter man egenskapen width till något lagom värde, t ex width:30 em;
Enheten em är proportionell mot textstorleken så om någon valt att ha större text i sin webbläsare så kommer även textblocken att bli bredare så att det ryms lika många tecken i bredd i dem, dvs fortfarande samma läsbarhet.

Å andra sidan får man då en horisontell scroll-list om besökaren har ett webläsarfönster som är mindre än sidbredden.

Jag tror ingen har så smala webbläsarfönster att en lagom lång tetxtrad inte ryms där. Det behöver du nog inte bekymra dig om.
Möjligen om du lägger in en massa annat till höger och vänster om texten kan sidan bli så bred att rullningslisterna dyker upp.

Eller kan man kombinera på något sätt? Ange en minsta och största sidbredd samtidigt på något sätt?

Jag tror det går att göra i css, men har för mig att de olika webbläsarna har ganska dåligt stöd för det.

Hur ska man egentligen optimera detta eftersom man inte vet hur stora skärmar folk har, vilka upplösningar de använder eller hur stora webläsarfönster de har. Finns det några rekommendationer?

w3.org har väl en del rekommendationer. (Jag har ingen länk just nu.)
Huvudtanken är väl något i stil med att eftersom det är så mycket man inte kan veta om användaren, så ska man inte utgå från såna egenskaper vid design.

Eller ska jag lära mig CSS bättre?

Ja, det borde alla göra. Även jag.

 

[erro.se]

Re: Re: Hur begränsar man bredden på en websida vid kodning?

magnus67 skrev:
Ja, för långa rader minskar läsabarheten på texten. Huvudet får ju fara fram och tillbaka över skärmen som vore man åskådare på en tennismatch.

Man kan göra en css-klass som används i p- och/eller div-taggar som omsluter text. Där sätter man egenskapen width till något lagom värde, t ex width:30 em;
Enheten em är proportionell mot textstorleken så om någon valt att ha större text i sin webbläsare så kommer även textblocken att bli bredare så att det ryms lika många tecken i bredd i dem, dvs fortfarande samma läsbarhet.

Nu är du inne på något. Width uttryckt i em blir alltså proportionellt? Det låter ju som en lösning, eftersom det egentligen bara är textradernas längd jag vill styra, inte sidbredden som sådan.

Men hur kodar man det? Jag har aldrig riktigt greppat det där med div... Omslutar man bara texten, typ så här:

<div width:30 em;>
Texten som ska styras......
</div>

Är det så enkelt?

Eller så skapar man en CSS-klass för <P> med width 30 em och så skriver man:

<P>
Texten som ska styras
</P>

Men då påverkar den klassen alla <P> taggar förstås...

 

[magnus67]

Re: Re: Re: Hur begränsar man bredden på en websida vid kodning?

erro.se skrev:
Men hur kodar man det? Jag har aldrig riktigt greppat det där med div... Omslutar man bara texten, typ så här:

<div width:30 em;>
Texten som ska styras......
</div>

Snarare

<div style="width:30 em;">
Texten som ska styras......
</div>

Fast hellre en class som du använder i de p eller div som är aktuella.

I stilmall-filen:

.txt {
width:30em;
}

Observera . framför klas-namnet. Och sedan i html:en

<p class="txt">

Så påverkas bara de p och div där du sätter klassen.

 

[erro.se]

Tack Magnus, det där ska jag ta och testa.

Och tack för förklaring till kodningen. Jag måste nog ta och låna/köpa en bok om CSS, eller ta mig tid att leta upp någon bra sida.

Du råkar inte ha någon bra länk? Gärna till en sida som inte bara tar upp själva syntaxen, utan hellre beskriver själva tänket och strukturen bakom allt man kan göra med CSS.

 

[fhe]

rob skrev:
Den är gjord för att passa i 1024x768 som minsta upplösning, tror och hoppas att det inte finns några med lägre upplösning längre.
Där har jag lagt in att det inte ska komma några rullningslister.
Har räknat med att många har en massa "skit" i sin nätbläddrare som t.ex yahoo, google, etc toolbars och liknande.

Intressant tanke att ta hänsyn till sådant men strunta blankt i att de flesta användare kör någon form av fönstersystem vilket gör det relativt ointressant vad man har för upplösning på skärmen.
Bara för att du alltid surfar med en maximerad browser är det ju inte säkert att alla gör det. Det blir dessutom vanligare och vanligare att folk surfar med en telefon, handdator eller motsvaranade som ytterst sällan har 1024x768 som skärmupplösning.

Att tvinga bort rullningslister innebär att enda sättet (för den som har ett smalare fönster) att nå det som ligger utanför fönstret är att bredda detsamma. Det är är nästan höjden av arrogans mot besökaren.
Standardinställningen är att rullningslister dyker upp om de behövs, vilket skulle gjort sajten användbar för alla.

Nu var det förvisso inte Söderköpings fotoklupp tråden gällde men ytterligare ett fel är följande:

Den som är äldre eller ser lite dåligt (men det kanske man inte gör om man är med i en fotoklubb) och surfar med större text får inte heller använda sajten eftersom den är gjord så att menyn ramlar in under den stora bilden som utgör huvudyta när textstorleken blir för stor.
ex.
http://surl.se/aebb
Det är egentligen inte menyns fel (det är faktiskt en av få saker som inte är gjord med tabeller) utan beror på kombinationen av en dålig tabellbaserad design och antaganden om hur besökarens värld måste se ut. De två är fel var för sig och blir inte bättre när man kombinerar dem.

erro.se skrev:
Du råkar inte ha någon bra länk? Gärna till en sida som inte bara tar upp själva syntaxen, utan hellre beskriver själva tänket och strukturen bakom allt man kan göra med CSS.

http://www.w3schools.com/css/default.asp är väldigt heltäckande men inte nödvändigtvis en snabbguide. Möjligtvis kan den här vara en bra start, den är på svenska: http://www.webdesignskolan.com/css-layout/css_layout.htm

 

[erro.se]

Ha, det där funkade ju rätt smidigt...

Sidan http://erro.se/info.asp ser lite mera lättläst ut nu än den gjorde förut när texten flödade över hela sidan.

Jag har använt 40 em, 30 kändes lite väl lite.

Och så har jag lagt all text i en tabell för att kunna centrera textblocket. Eller finns det något annat/bättre sätt att göra det på?

 

[fhe]

erro.se skrev:
Och så har jag lagt all text i en tabell för att kunna centrera textblocket. Eller finns det något annat/bättre sätt att göra det på?

Du är på helt rätt väg, det ser ut att bli rätt snyggt.

Att lägga allt i en tabell är helt onödigt, du kan centrera vilket element som helst utan varesig <center></center> eller tabeller.
Jag är inte helt säker på vad du försöker centrera för det enda centrerade jag ser är menyn/rubriken men om man tittar på koden ser det ut som om du försöker centrera även din text-div.

Om det är en DIV du vill centrera gör du enklast så här:

<html>
<body style="text-align: center;">
<div style="width:10em;margin: 0 auto;">
  Text som ligger mitt på sidan.
</div>
</body>
</html>

Det som löser själva centreringen är "margin: 0 auto;" på div:en. Att det finns en "text-align:center;" i body-taggen beror på att gamla IE-versioner inte riktigt följde standarden och behövde en sådan för att centrera själva innehållet.
I ditt fall skulle style-attributen naturligtvis förpassas till din css-fil.

Edit: Upptäckte varför jag inte såg texten centrerad...
Du har ".radtext {width:40 em;}" i din css-fil. Den enda browser jag känner till som accepterar ett space mellan storleken och enheten är IE. Om du ändrar till ".radtext {width:40em;}" kommer det att se rätt ut i alla browsers.

 

[erro.se]

OK, nu är det 40em... kolla om det funkar.

Jag har kikat runt lite på webdesignskolans CSS-sida (tack för tipset tidigare) och det är ju ingen ände på allt man kan styra och kontrollera. Sätter man sig in i CSS lite mer så blir ju websidor så mycket mer än bara gammal vanlig HTML.

Men, varför alla dessa "hack" för att få IE att fungera ordentligt. Suck... varför håller sig inte folk till standarder om de nu finns.

 

[fhe]

erro.se skrev:
OK, nu är det 40em... kolla om det funkar.

Funkar fint.

Men, varför alla dessa "hack" för att få IE att fungera ordentligt. Suck... varför håller sig inte folk till standarder om de nu finns.

Inte mycket att göra, IE är för stor för att ignoreras och då den (tidigare) inte följde standards så var man tvungen att ta till specialhack för att det skulle se bra ut även där. Det tar nog inte speciellt lång tid innan IE6 och tidigare är glömda och då är problemet till stor del ur världen.

 

[erro.se]

Jo, så är det väl...

Nåja, jag ska mecka vidare med CSS. Jag kanske återkommer med frågor vad det lider

 

[Eeros]

Jag har ett närbesläktat problem; hur tar jag reda på vilka fonter som "normalt" finns i användarnas datorer? Jag kan ju inte bara lägga in vilka snygga fonter som helst och hoppas att användaren har det, det borde väl finnas en lista någonstans på fonter som exempelvis ligger som default i både win och osx.

 

[philip svensson]

fonterna ser du om du använder dreamweaver och skriver "font" utan "" och sedan trycker på enter...

dessa har nog alla

 

[Arctic]

Eeros skrev:
Jag har ett närbesläktat problem; hur tar jag reda på vilka fonter som "normalt" finns i användarnas datorer? Jag kan ju inte bara lägga in vilka snygga fonter som helst och hoppas att användaren har det, det borde väl finnas en lista någonstans på fonter som exempelvis ligger som default i både win och osx.

Enkelt. Det gör du inte.

Du anger helt enkelt vilket typsnitt du önskar och dessutom till vilken familj de önskade typsnitten tillhör och så använder läsarens system ett typsnitt från den angivna familjen om det existerande inte finns.

Jag riktigt ryser när jag läser hur en del webbsnickrare försöker tvinga på sina läsare saker som kanske inte passar dem. Varför joxa med skärmens upplösning, typsnit och fan och hans moster när man har noll koll på vad läsaren har för utrustning?

Även här, liksom i stavningstråden, så skriver och pulicerar man normalt för läsaren och inte för sig själv. Det finns så mycket på webben så en sida som upplevs som besvärlig eller svårläsbar kommer att ratas och det är ju synd, eller hur?

 

[erro.se]

Eeros skrev:
Jag har ett närbesläktat problem; hur tar jag reda på vilka fonter som "normalt" finns i användarnas datorer? Jag kan ju inte bara lägga in vilka snygga fonter som helst och hoppas att användaren har det, det borde väl finnas en lista någonstans på fonter som exempelvis ligger som default i både win och osx.

Jag har specificerat fonter i min CSS-mall på följande sätt:

body {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: small; line-height: 130%; color: #ffffff;}

På så sätt visas Arial, Verdana eller Helvetica om användaren har det, annars någon annan font av sans-serif-typ.

 

[Eeros]

Arctic skrev:
Jag riktigt ryser när jag läser hur en del webbsnickrare försöker tvinga på sina läsare saker som kanske inte passar dem. Varför joxa med skärmens upplösning, typsnit och fan och hans moster när man har noll koll på vad läsaren har för utrustning?

Därför att Times New Roman är apfult på en annars grafiskt välbyggd hemsida. Jag tror inte du upplever exempelvis Fotosidan.se som "besvärlig" när du surfar in på sidan? Ändå har de specifierat vilka fonter som ska användas. Det är inget som är "tvingande", fastän de är specade i CSS. Om de inte återfinns på datorn så använder webbläsaren en defaultfont.

En ful/opassande font är bland det värsta som kan förekomma på en hemsida, det förstör intrycket totalt och försvårar läsandet.

För att kunna speca fonter som är relevanta (som återfinns på de flesta användarnas datorer), lade jag in min förfrågan om en lista på de vanligast förekommande fonterna i operativsystemen för win och mac. Det är ju ingen idé att speca fonter som bara en på tusen har på sin dator.

 

[Eeros]

erro.se skrev:
Jag har specificerat fonter i min CSS-mall på följande sätt:

body {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: small; line-height: 130%; color: #ffffff;}

På så sätt visas Arial, Verdana eller Helvetica om användaren har det, annars någon annan font av sans-serif-typ.

Tack Robert, men själva koden är inget problem, det är listan på de fonter som ingår i närmast sett alla datorer jag är ute efter. Lämpligtvis de fonter som installeras med OSX och WinXP samt Vista. Då kan man gallra fram de fonter som ingår i alla de tre operativsystemen. Enklast vore det ju givetvis om någon redan hade en sådan lista, borde rimligtvis ligga ute på nätet.