Kalle MMedlem sedan mars 20041 938 inlägg
Håller på försöka lära mig lite om csslayouter via en bok.
Enligt boken står det att en css-baserad layout är att skapa en övergripande <div>tagg som innehåller alla andra taggar och allt annat innehåll. Man ska skapa en så kallad wrapper där man lägger in regel för alla globala inställningar som är övergripande sidbredd och layoutjustering.
Koden ser ut följande i cssmallen jag gjort:
body {
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
text-align: left;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
margin-top: 12px;
margin-bottom: 12px;
}
#content {
margin-top: 0px;
padding-top: 0px;
}
#footer {
margin-top: 12px;
margin-bottom: 12px;
clear: both;
}
#logo {
height: 71px;
padding-bottom: 12px;
}
#nav {
height: 28px;
}
#banner {
height: 200px;
}
#leftcolumn {
float: left;
width: 365px;
}
#rightcoliumn {
float: right;
width: 365px;
}
{
Sidan ser ut som följande:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="mhtest.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img name="logo" src="" width="760" height="71" alt=""></div>
<div id="nav">Content for id "nav" Goes Here</div>
</div>
<div id="banner">Content for id "banner" Goes Here</div>
<div id="content">
<div id="leftcolumn">Content for id "leftcolumn" Goes Here</div>
<div id="rightcoliumn">Content for id "rightcoliumn" Goes Here</div>
Content for id "content" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
Fråga 1
Bör man skapa en så kallad wrapper? Jag fattar inte varför jag skapar en wrapper.
Fråga 2
Vilka är nästlade i vilka enligt koden? Har jag egentligen lagt alla innanför wrapper?
Underdivar till wrapper:?
Header
Content
Footer
logo
Nav
Banner
Fråga 3
Allt beror ju givetvis hur man vill att det ska se ut men jag tycker det verkar lite bökigt. Kan något förenklas eller förändras till det bättre i koden?
Försöker som sagt lära mig och är totalnybörjare på csslayouter.
Mvh
voigtann1Medlem sedan juni 20018 810 inlägg
Svar1:
Ja, jag tycker man skall skapa en "wrapper" runt sin kod. Ser bara fördelar med att ha en wrapper:
1. Du kan positionera ditt "totala" innehåll bättre och enklare än om du ska bara ha en bild på sidan (exemeplvis du kan centera innehåll + box med en bakgrund där du vill ha ditt innehåll).
2.
<div id="wrapper">
<div id="header">
<div id="logo"><img name="logo" src="" width="760" height="71" alt=""></div>
<div id="nav">Content for id "nav" Goes Here</div>
</div>
<div id="banner">Content for id "banner" Goes Here</div>
<div id="content">
<div id="leftcolumn">Content for id "leftcolumn" Goes Here</div>
<div id="rightcoliumn">Content for id "rightcoliumn" Goes Here</div>
Content for id "content" Goes Here
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
#footer är nästlad i #footer, #leftcolumn är nästlad i #leftcolumn osv. Fast jag är ingen expert men begreppet nästlad får jag i css filen:
#wrapper #footer {}
Om vi leker med tanken av att vi skulle kunna ha två IDn med samma namn "footer" så om vi har denna kod:
<div id="wrapper">
<div id="footer">Hej</div>
</div>
<div id="footer">hej!</div>
I CSSN så kommer vi bara påverka #footer som finns inne i din ID tag som har IDt wrapper.
3. Ja, Det går att göra bättre / sämre: Doctype, doctype och åter igen doctype: Detta är A och O om du ska börja med "riktig" html kodning.
- Du sparar en hel del tid att försöka anpassa sidan till olika läsare(även om du måste göra detta med alla doctypes ändå).
- Jag brukar ha en Div som du med namnet #logo och placera en länk eller bara ha diven som den är och låta CSSn rendera ut logotypen: Främst för att om folk skriver ut sidan att dom inte få "onödiga" bilder osv + lättare i slut ändan att anpassa för "print".
Kalle MMedlem sedan mars 20041 938 inlägg
Nu ska vi se här om jag inte snurrat till det fullständigt:
När jag tänker nästling så kollar jag på själva sidan hur divarna är infogade.
Jag har en wrapper.
I wrapper så ligger följande:
header
Content
Footer
I Header så ligger följande:
Logo
Nav
I content så ligger
Leftcolumn
Rightcolumn
Eller är jag fel ute?
Banner är väl inte nästlad ? Eller är den det? förutom att den ligger i wrapper?
voigtann1Medlem sedan juni 20018 810 inlägg
Om header,content och footer är inne i din wrapper så bör ju även Banner vara nästlad. #wrappern är ju också nästlad till <body>. Vad säger din bok dig?
Kalle MMedlem sedan mars 20041 938 inlägg
Nu har jag provat igen:
<div id="wrapper">
<div id="header">
<div id="logo">Content for id "logo" Goes Here</div>
<div id="nav">Content for id "nav" Goes Here</div>
</div>
<div id="banner">Content for id "banner" Goes Here</div>
<div id="content">
<div id="leftcolumn">Content for id "leftcolumn" Goes Here</div>
<div id="rightcolumn">Content for id "rightcolumn" Goes Here</div>
Content for id "content" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
Är det inte som nedan:?
Wrapper(Nivå1)
-header(Undernivå till wrapper) (Nivå2)
-logo (Undernivå till header)(Nivå3)
-nav (Undernivå till header)(Nivå3)
-Banner(Undernivå till wrapper) (Nivå2)
-Content(Undernivå till wrapper)(Nivå2)
-Leftcolumn(Undernivå till content) (Nivå3)
-RightColumn(Undernivå till content) (Nivå3)
-Footer (Nivå2) (Undernivå till wrapper)
Body e ju ovan wrapper förstås :)
Boken:
Mera sofistikerade layouter innehåller ytterligare innehållsområden som antingen placeras bredvid eller nästlas in i en <div>. Enligt min övning jobbar jag med både och.
Vad är fördelen med att lägga divar i andra divar?(Nästla). Lägger det sig annars bredvid eller vad? Eller mer med arv att göra?
voigtann1Medlem sedan juni 20018 810 inlägg
Om du har satt #wrapper till en width på 600px så kommer 100%(eller som alla divar är normalt) kommer dom automatiskt bli 600px. Det är betydligt enklare att designar med elementen. kör exemplen, byt bakgrund färger på elementen.
headbugMedlem sedan sep. 2006858 inlägg
Divar är en byggkloss som du kan göra precis vad du vill med. Därför är den en bra pusselbit när du vill bygga dina sidor.
Fördelen med att nästla är främst för att organisera ditt innehåll och för att skapa ett sammanhang mellan saker som du vill ska höra ihop. Om du till exempel skapar en sidebar som t.ex kommer att inehålla inloggning, senaste nyheterna och en kalender så har du full kontroll över alla dom tillsammans om du lägger dom i en div. Du kan flytta, byta färg och font, gömma eller vad du nu vill göra. Det blir alltså enklare att hantera det hela som en enhet eftersom du gjort det till en enhet genom att nästla dom i en och samma div.
Du kan narturligtvis välja att inte nästla dom men då får du mer pill den dagen du vill ändra något på samma sätt i samtliga saker i din sidebar.
Flera divar i följd lägger sig under varandra om du inte sätter float: left eller float right på dom.
Kalle MMedlem sedan mars 20041 938 inlägg
Japp!
Tror jag fattar något iallafall.
Tänkte jag ska fortsätta plita lite senare så återkommer jag med funderingar.
Tack för hjälpen!
