Bedöm layout tack!

[upnorth]

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å

[Iceron]

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

[upnorth]

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

[Prometheus]

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)   

[Mekaniserad Apelsin]

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)

[upnorth]

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

[Prometheus]

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?

[PappaBj0rn]

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å.

[upnorth]

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

[upnorth]

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

[maths57]

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.

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.

[Prometheus]

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/

[maths57]

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.   

[upnorth]

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.

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

[maths57]

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å. 

[upnorth]

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

Kod: Markera allt

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="layout.css" type="text/css" />
<title></title>
<meta name="generator" content="Bluefish 1.0.7"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
</head>
<body>
<div id="header">
guestbook (logo as background)<br>entry:[______]<br>name:[______]<br>[submit]</div>

<div id="content">
<div id="headline">
snooze.nu: latest blog ------, latest news -------, latest</div>
<div id="menue">
home<br>
portfolio
	<ul>
	<li>Me</li>
	<li>Currirum Vitae</li>
	<li>Stuf I made</li>

	</ul>
blog
	<ul>
	<li>Latest</li>
	<li>Next</li>
	<li>...</li>
	</ul>
developement
	<ul>

	<li>Projects</li>
	<li>Filearchive</li>
	<li>Participate?</li>
	<li>The web</li>
	</ul>
about snooze.nu</div>
<div id="headers">

H<br>e<br>a<br>d<br>e<br>r<br>s</div>
<div id="pages">
Texttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttext
texttexttexttexttexttexttexttexttexttexttexttexttext</div>
<div id="banners">
<p>Friends and partners:</p>

http://www.ubuntu-se.org/smf<br />

http://www.hund-one.se</div>
<div id="contact">
Contact: biker.upnorth@gmail.com (also MSN), snooze@jabber.se, upnorth at ubuntu-se.org/smf, _upnorth at last.fm</div>
</div>
<div id="footer"></div>
</body>
</html>

layout.css

Kod: Markera allt

body {
margin: 0px; padding: 0px; background-color: #ffffff;
}

#header {
width: 100%; height: 100px;
background-color: #45464e; color: #333333;
}

#content {
float: left; width: auto; height: auto; padding: 2px; 
}

#headline {
width: 100%; height: 20px;
background-color: #6a6c7c; padding: 3px;
}
 
#menue {
float: left; width: 140px; height: 100%; 
background-color: #6a6c7c;  
}
 
#headers {
float: left; width: 30px; height: 100%; 
background-color: #6a6c7c; 
}

#pages {
float: left; width: 100%; height: 100%; 
background-color: #6a6c7c; 
}

#banners {
float: left; width: 170px; height: 100%; 
background-color: #6a6c7c;
}

#contact {
float: left; width: 100%; height: 20px;
background-color: #6a6c7c; padding: 3px;
}

#footer {
float: left; margin-bottom: 0px; height: 100px; width: 100%;
background-color: #45464e;
}

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

[Prometheus]

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.

[maths57]

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

Kod: Markera allt

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

[upnorth]

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...

[maths57]

För att anknyta till något jag skrev tidigare om wrappers (skal?), skulle du kunna göra så här.

Kod: Markera allt

<body>
<div id="yttreSkal" style="width:100%;margin:auto">
<div id="inreSkal">
Här kommer ditt innehåll
</div>
</div>
</body>

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.