Ubuntu Sverige

Satt inatt kring halv 4 och spånade på en layout (med papper och penna, det bästa!) till min nya webbplats, snooze.nu
Jo, det är en preliminär lösning jag använder som startsida nu, tro inget annat!

Hursomhelst, här är planen:

http://snooze.nu/dev/layout.htm
Jag vill göra något åt det här hållet, fast med lager. Alltså logotyp kombinerad med gästbok i sidhuvudet, och motsvarande marginal i höjdled i botten.

Sidan ska alltså vara bygg höger till vänster istället för det mer vanliga uppifrån och scrolla (i all evighet...), lite okonventionellt, men jag tror att det kan bli bra!

Nå, det är ett litet problem inblandat också; jag har aldrig byggt layouten för en hel webbplats med lager, jag har ingen aning om hur man gör för att de ska se någorlunda lika ut i olika webbläsare och med olika upplösning.
style="visibility: visible; position: fixed;" är typ det jag kan

Så, låt prickskyttet börja! Jag vet att det är lite svårt att föreställa sig resultatet, men det är alltså dispositionen mellan delarna jag vill ha synpunkter på

den såg bra ut, men det är kanske en lite för tjock header. Lite svårt att få ett helhets intryck då du inte har någon bakgrund eller färg

Iceron skrev: den såg bra ut, men det är kanske en lite för tjock header. Lite svårt att få ett helhets intryck då du inte har någon bakgrund eller färg

Mjo, ska försöka lära mig GIMP framöver så kanske min "vision" framträder lite bättre
Eller åtminstone CSS

Ser intressant ut, men svårt att föreställa sig exakt hur du tänkt dig.

Jag skulle byggt med flytande lager.

Tips: För att placera flera bredvid varandra kan man sätta float åt samma håll och sedan marginal. Lite förenklat:

<br style="clear: both;" />
<div id="column1">Kolumn 1</div>
<div id="column2">Kolumn 2</div>
<div id="column3">Kolumn 3</div>

I CSSen:

#column1 {
  float: left;
  width: 200px;
  padding: 10px;
}
#column2 {
  float: left;
  width: 400px;
  margin-left: 220px;
  padding: 10px;
}
#column3 {/*osäker på om man behöver float: left eller right här*/
  float: left;
  width: 100px;
  margin-left: 680px;
  padding: 10px;
}

Med lite gardering för att jag inte testat utan skrivit ur huvudet och kan ha fel (även om det inte är troligt)   

Mattias skrev: Ser intressant ut, men svårt att föreställa sig exakt hur du tänkt dig.

Jag skulle byggt med flytande lager.

Tips: För att placera flera bredvid varandra kan man sätta float åt samma håll och sedan marginal. Lite förenklat:

<br style="clear: both;" />
<div id="column1">Kolumn 1</div>
<div id="column2">Kolumn 2</div>
<div id="column3">Kolumn 3</div>

I CSSen:

#column1 {
  float: left;
  width: 200px;
  padding: 10px;
}
#column2 {
  float: left;
  width: 400px;
  margin-left: 220px;
  padding: 10px;
}
#column3 {/*osäker på om man behöver float: left eller right här*/
  float: left;
  width: 100px;
  margin-left: 680px;
  padding: 10px;
}

Med lite gardering för att jag inte testat utan skrivit ur huvudet och kan ha fel (även om det inte är troligt)   

Om man har en föräldra div som har position: relative; så behöver man inte bestämma margin-left (eller nån kombination av att mixtra med position: relative)

Tack för tipsen!

Jag har färglagt sidan lite hastigt för att ni ska få en bättre uppfattning, samt justerat lite marginaler och kanter.
Har städdag idag och nu smet jag till datorn en stund, har dock inte tid att förbättra sidan mer nu

Trevligt. Ska det vara mycket textinnehåll skulle jag föredra en ljusare bakgrund på den största innehållsrutan. Har du funderat något på vilket typsnitt?

Vad har du tänkt lägga i rutan "headers"? Sidrubriken?

Jag tycker innehålls-kolumnerna behöver lite mer padding till texten

Logga, är den samma färger som sidan?

Hmm, ja det kan säkert blir bra men det känns lite svårt att säga bara av det man kan se nu :].
Ha inte hela textrader i mittenrutan bara, för det kommer bli allderles för lång isf.

Vi får väl se vad som händer när du lägger på lite css o grafik o så.

Mattias skrev: Trevligt. Ska det vara mycket textinnehåll skulle jag föredra en ljusare bakgrund på den största innehållsrutan. Har du funderat något på vilket typsnitt?

Vad har du tänkt lägga i rutan "headers"? Sidrubriken?

Jag tycker innehålls-kolumnerna behöver lite mer padding till texten

Logga, är den samma färger som sidan?

Jo, "Headers" ska vara för rubriker (lite crazy sådär!) och "Pages" för vanliga sidor. Har väl tänkt att menyn ska få vara mörkare, nära på svart (bakgrunden då) och att dessa två andra ska få vara mer anpassade för text.

Har inte kommit till typsnitt just, men jag tyckte ordet "snooze.nu" med typsnittet "DejaVu Serif Oblique Semi-Condensed Not-Rotated" (finns i GIMP) såg bra ut. Har egentligen inte funderat mer över tema/stil för sidan annat än att jag ville ha en lite ovanligare layout

Vad gäller paddingen och övriga marginaler är det mycket lekande kvar, som det är nu har jag gjort bara för att visa att jag vill ha ett sidhuvud och en sidfot som är lite skiljda från resten av sidan. Sen ska givetvis rubriker och text bli ännu lite tydligare

Logga har jag ingen än, men jag tänkte att ett stort "snooze.nu" i ovan nämnt typsnitt storlek...typ 30, som bakgrund till gästboken skulle passa. Tänkte förresten lägga lite genomskinlighet på gästboken för att den inte ska sticka ut så mycket (sidhuvud och sidfot ska ju ge samma avgränsande känsla).

Tack för fin kritik!
Ska försöka städa klart snabbt så att jag kan bita tag i det här

PappaBj0rn skrev: Hmm, ja det kan säkert blir bra men det känns lite svårt att säga bara av det man kan se nu :].
Ha inte hela textrader i mittenrutan bara, för det kommer bli allderles för lång isf.

Vi får väl se vad som händer när du lägger på lite css o grafik o så.

Jag ska försöka få till 2-spalt i "Pages", hur nu det ska gå till, för att få en lite redaktionell känsla

Själva layouten ser vettig och sammanhållen ut. Jag skulle nog hitta fram direkt till det jag skulle vilja veta. Vet inte hur myket du kan om CSS, men titta in på W3Schools för en grundkurs. Och vill du samla lite tips om hur man kan hantera CSS kan du kika in på csszengarden. Där hittar du också hur man lägger en bild, t ex en logo, som bakgrundsbild. De flesta bilderna på den sidan är bakgrundsbilder.

Mekaniserad Apelsin skrev: Om man har en föräldra div som har position: relative; så behöver man inte bestämma margin-left (eller nån kombination av att mixtra med position: relative)

Tricket är att man använder sig av wrappers. Man lägger hela sidan i en Div-tagg och inne i den ytterligare en. Då kan man få en väldig flexibilitet. I den inre wrappern lägger man sedan Div-taggar för sidhuvudet, kroppen och foten. För Body kan man först ange allmänt om font-family och font-size, marginaler och stoppningar.

maths57 skrev: Tricket är att man använder sig av wrappers. Man lägger hela sidan i en Div-tagg och inne i den ytterligare en. Då kan man få en väldig flexibilitet. I den inre wrappern lägger man sedan Div-taggar för sidhuvudet, kroppen och foten. För Body kan man först ange allmänt om font-family och font-size, marginaler och stoppningar.

735 exempel: http://www.opendesigns.org/

Mattias skrev: 735 exempel: http://www.opendesigns.org/

Verkligen härligt! Tänk att det finns människor som jobbar hårt och gör sitt arbete fritt tillgängligt för andra. Jag tror att man på csszengarden är mer restriktiv med licensen, så man får bara "knycka" tekniken, inte layouten. Å andra sidan tror jag upnorth helst meckar fram en egen grej. Så han får väl läsa "handboken" får CSS.   

maths57 skrev: Själva layouten ser vettig och sammanhållen ut. Jag skulle nog hitta fram direkt till det jag skulle vilja veta. Vet inte hur myket du kan om CSS, men titta in på W3Schools för en grundkurs. Och vill du samla lite tips om hur man kan hantera CSS kan du kika in på csszengarden. Där hittar du också hur man lägger en bild, t ex en logo, som bakgrundsbild. De flesta bilderna på den sidan är bakgrundsbilder.

Mekaniserad Apelsin skrev: Om man har en föräldra div som har position: relative; så behöver man inte bestämma margin-left (eller nån kombination av att mixtra med position: relative)

Tricket är att man använder sig av wrappers. Man lägger hela sidan i en Div-tagg och inne i den ytterligare en. Då kan man få en väldig flexibilitet. I den inre wrappern lägger man sedan Div-taggar för sidhuvudet, kroppen och foten. För Body kan man först ange allmänt om font-family och font-size, marginaler och stoppningar.

Tack för berömmet

Jo, jag har pysslat med webdesign sporadiskt i runt 10 år och är bekant med (X)HTML, CSS och JavaScript. Det jag inte gjort hittills och det jag ska göra nu dock - bygga en hel layout av lagertaggen <div>, har mest slappat runt med tabeller förut

Det andra problemet är att jag är nästan uteslutande tekniskt lagd, och sämre på det estetiska. Så jag har en vag bild av hemsidan "klar", men jag har inte klart för mig hur jag ska göra för att ta den dit... så jag ska nöta både CSS och GIMP ett tag har jag tänkt

Visst, tabeller är enklare. Men använder man div-taggar har man en större flexibilitet om man vill möblera om på sidan, flytta innehåll, ändra utseende. Ser man på csszengarden är det nästa lite skrämmande hur kreativ man kan vara. Du ska se att när din sida väl är uppe har det nog blivit en liten estet av dig också. 

Gamla sidan med tabell och blandad formatering: http://snooze.nu/dev/layout.htm
Ny sida med lager: http://snooze.nu/dev/divdev.htm

Den nya sidan ska alltså se ut som den gamla, fast med lager och extern CSS för formatering
Som ni ser så fattas det en del, här har ni koden, nu är det open source som gäller

divdev.htm
layout.css
Har använt den här guiden på webdesignskolan.com för att komma igång.

En tanke utan att ha testat:
prova att sätta lila bakgrundsfärg på #content, och sedan göra vit border på de andra rutorna istället.

Vill du inte ha punkter i listorna kan du få bort dom så här.

maths57 skrev: Vill du inte ha punkter i listorna kan du få bort dom så här.

Kod: Markera allt

<ul style="list-style:none">

Tack, får se om jag behåller textformatet eller om jag kör på grafik.
Rent spontant känns dock text renare och snyggare...

För att anknyta till något jag skrev tidigare om wrappers (skal?), skulle du kunna göra så här. Det du får är ökat flexibilitet. Du kan också lägga loggan som en bakgrundsbild i "inreSkal" och använda "header" för texten. Bakgrundsbilden måste då positioneras uppe till vänster med CSS.