Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

En hemsida som skalar korrekt

1
Skriv svar
Permalänk
Medlem ★
●

En hemsida som skalar korrekt

Hej.

Jag har i mål att börja webbutveckla och senare göra det till ett yrke. Jag har börjat med Asp.Net, SQL, Html, Php och Javascript, jag kommer senare söka utbildning för detta i höst.
Jag vill dock ha kött på benen så jag inte ser ut som att jag sett ett spöke när jag väl kommer dit.

Jag har stött på ett litet problem när jag försöker identifiera om det är en telefon eller inte och hur jag ska göra för att
absolut centrera det på skärmen om webbläsarens storlek förändras.
Vill säga: på en 1024 upplösning ska hemsidan se likadan ut som på en 1920 upplösning samt att jag vill kunna ge ett alternativt utseende på en "mobil"-version av hemsidan.

Koden jag använt hittills för centrering av t.ex. min wrapper hittills har varit:

#wrapper{
margin: 0 auto;
width: 800px;
height: 1200px;

Om jag av någon rolig anledning valt att positionera något med absolute så använder jag koden:

.absolute_center{
margin-left: -400px;
left: 50%;
top: 0;
}

Kombinationen skulle bli något i stil med:

<div id="wrapper" class="absolute_center">
<!-- innehåll -->
</div>

Jag förstår såklart att någon av dessa är fel eller implementerade med fel css, men jag är som sagt inte den grymmaste ninjan när det kommer till HTML, sen vet jag inte om det är fel men det får ni gärna säga om det är.
Problemet jag iaf just nu upplever är att en sida som ser skitbra ut på min hemmadator (27" skärm) ser oftast fel ut på en annorlunda skärm.

Vad jag kort och gott är ute efter är att kunna designa en sida som ser likadan ut på alla skärmar (exkluderat mobiler).

Visa signatur

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Det finns olika skolor för det här och det beror också vad man menar med att sidan ska se likadan ut. Tittar man på exempelvis denna (alltså swec-forumet) sida så har den ju en relativt fast bredd på själva innehållet och en bredare skärm ger bara mer whitespace utanför innehållet. Skulle man ha en skärm med lägre upplösning än idealt, i det här fallet runt 1024px i bredd, så får man scrolla horisontellt. Sen tillkommer förstås problematiken med att användarna kan zooma in (eller ut) på en sida. Innehållet här har dock inte helt fasta proportioner utan om man skalar om så ändras hur mycket text som får plats på en rad och så. Jämför med exempelvis Ars som är en helt fast sida så ser du skillnaden. Står ett ord sist i en rad så står det där oavsett upplösning eller hur mycket man zoomar. Åt andra hållet har vi exempelvis Anandtech som har en liknande layout men där sidebaren försvinner på en smal skärm, men man får inget extra innehåll på en skärm som är större än idealet (alltså 1024px typ).

Jag lutar åt att Anands modell är bättre, innehållet ser likadant ut men får det inte plats så får man ingen scrollbar utan istället så försvinner sekundärt innehåll. Hur du löser detta beror väldigt mycket på hur ditt innehåll ser ut osv. men använd de resurser som finns online, exempelvis på asp.net eller så, gå igenom så många relevanta tutorials du kan. Pluralsight är en sida med videokurser som många verkar uppskatta mycket, den kostar pengar men du får en månad gratis. Men framför allt: testa, gör om och testa igen.

Redigera
Citera flera Citera
1
Skriv svar