9 svar · 1 335 visningar · startad av Gabbe
Hejsan!
Då man tydligen ska bygga dagens hemsidor i div och inte i tabeller så tänkte jag försöka få hum om hur man går tillväga för att bygga i div.
Så jag undrar om det är någon som har en länk till någon Svensk guide?
Eller du kanske kan lägga upp ett litet demo här, med en top, root och bottom?
Tack.
Kaxigt lärde mig en gång i tiden... Hon håller bra kvalité på sina tutorials och uppdaterar dem lite då och då... http://kaxigt.com/tutar/bygg.php
det finns drösvis med tutorials som halvbra webbdesigners skrivit när de tyckt de behärskat en teknik, och en del saker kanske inte är helt rätt...
fler tips... w3schools, webbdesignskolan och wF
annars? tja, google är ju också bra.
http://www.google.se/search?aq=t&oq=&hl=sv&q=guide+css+webbdesign&btnG=Sök&meta=lr%3Dlang_sv
Gabbe skrev:
Hejsan!
Då man tydligen ska bygga dagens hemsidor i div och inte i tabeller så tänkte jag försöka få hum om hur man går tillväga för att bygga i div.
Hej Gabbe
Jag vill börja med att korrigera ditt tänkande. Du skall inte bygga din sida med "divvar". Du skall bygga den med semantisk (X)HTML. "Divitis" är föga bättre än tabellbaserad layout.
Div är helt enkelt det element som avgränsar en del av en sida, en division.
Har du en rubrik skall man inte skriva <div class="heading1">foobar</div>. Det är att missbruka elementet div.
(X)HTML för anger vad sidan innehåller, CSS hur den skall se ut, DOM-skript hur den skall bete sig.
Googla på "semantic html". Läs Roger Johanssons introduktion till standarder: http://www.456bereastreet.com/dwws/sv/ eller om jag får vara så kaxig att jag rekommenderar några saker jag själv skrivit:
http://keryx.se/wasp/#r_djungelnslag
http://keryx.se/artikel-30
mvh
Lars Gunther
Jag tackar för tipsen ska börja läsa genast! :h
Just nu håller jag på med denna hemsidan http://www.gabrielsava.se/nhc/ och den är uppbyggt i tabeller just nu, men jag kanske ska försöka göra om den till DIV?
Sedan undrar jag lite vad är den vanligaste sidstruktur-uppbyggnaden?
Ska jag köra include på toppen, högerspalten och botten så att jag kan jobba med innehållet direkt eller ska jag köra index.php?visa=start dvs. att jag includerar innehållet?
Kanske var dålig förklaring på allt, men hoppas ni förstår lite iallf :stud
http://www.webdesignskolan.com -> CSS
Där lärde jag mig det mesta om att arbeta med div - från att ha varit helt nollad på det till att lyckas bygga upp en anständig sida och när man väl fått kläm på det, fan så mycket enklare än tabeller...
Gabbe skrev:
Sedan undrar jag lite vad är den vanligaste sidstruktur-uppbyggnaden?
Ska jag köra include på toppen, högerspalten och botten så att jag kan jobba med innehållet direkt eller ska jag köra index.php?visa=start dvs. att jag includerar innehållet?Kanske var dålig förklaring på allt, men hoppas ni förstår lite iallf :stud
Om du ska köra med include är det enligt min åsikt bättre att utgå från sidorna som har innehåll och sedan "includa" sidhuvud, meny, sidfot osv.
Om en sökmotor får träff på en sidas innehåll visas då sidan automatiskt med meny, sidfot, sidhuvud och allt - vilket inte blir fallet om du gör tvärtom...
Då går det också bra att länka till sidan med innehållet, vilket ju är det optimala.
Om det nu var så du menade.. :)
Kom igång med CSS-grids
När du börjar göra CSS-baserade layouter är det superviktigt att du har en DOCTYPE som sätter webbläsare i "CSS kompabilitetsläge", "Standards Compliance Mode" eller vad vi skall kalla det. Undvik "quirksmode" som pesten och strunta i MSIE < 6.
Du bör också ställa dig frågan om du vill ha fixerad bredd, flytande bredd eller liknande.
Det finns massor av exempel på färdiga CSS-layouter man kan studera.
http://developer.yahoo.com/yui/grids/
Den här är ganska cool!
http://developer.yahoo.com/yui/grids/builder/
MEN använd inte sådana här sidor i stället för att lära dig CSS. Använd dem som komplement.
Lars Gunther
P.S. "CSS Grids" är ett mycket bättre begrepp än "med divvar". Det leder dina tankar i rätt riktning - se mitt första inlägg.
Jag tackar för alla svaren och har nu pillat med en lätt uppbyggnad av en hemsida och tänkte höra med er om, ja om det ser bra ut i koden? :OO
Har gjort förljande....
Byggt en index.php sidan med CSS Grids och ska ha en struktur på sidan som gör att jag kör include på top-menyn och bottom som nipon sa.
Några fel som ni ser hittils?
Någon jag bör tänka på mer?
Tackar.... :stud
http://www.gabrielsava.se/nhc_css/
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nässjö Hockey Club</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="index">
<div id="top"><?php include 'innehall/top.php'; ?></div>
<div id="tom_top"></div>
<div id="main">Content for id "main" Goes Here</div>
<div id="tom_bottom"><?php include 'innehall/bottom.php'; ?></div>
</div>
</body>
</html>
index.css
/* CSS Document for Nässjö Hockey Club */
html, body {
background-image: url(../bilder/index/bg.jpg);
margin:0;
padding:0;
height:100%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
}
#top {
margin: 0px;
padding: 0px;
height: 289px;
width: 800px;
}
#main {
margin: 0px;
padding: 0px;
height: 300px;
width: 800px;
background-color:#FFFFFF;
}
#tom_top {
margin: 0px;
padding: 0px;
height: 22px;
width: 800px;
}
#tom_bottom {
margin: 0px;
padding: 0px;
height: 22px;
width: 800px;
}
#index {
margin: 0px;
padding: 0px;
height: 100%;
width: 800px;
background-image: url(../bilder/index/bg_table.jpg);
}
/* CSS Document for Nässjö Hockey Club */
* {
margin:0; padding:0;
}
body {
background:#fff url(../bilder/index/bg.jpg) top left repeat;
font:11px/17px Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#000;
}
#top, #main, #tom_top, #tom_bottom {
width: 800px;
}
#top {
height: 289px;
}
#main {
height: 300px;
background-color:#fff;
}
#tom_top, #tom_bottom {
height: 22px;
}
#index {
height: 100%;
background-image: url(../bilder/index/bg_table.jpg);
}
Ytterligare förbättringar
Antaganden
1. Du börjar med en fixerad bredd. Bra! Enklast för den som är ovan.
2. Bara en spalt med innehåll = navigationen i "top" då?
3. Div med id "tom_top" känns som en gammal whitespace-gif i funktionen. Ge nästa div en toppmarginal i stället. "tom_bottom" är i själva verket inte tom och borde kanske byta namn?
* Bra namn på id utgår från vad slags innehåll den har, inte ifrån var den är placerad. Tänk om du i framtiden vill ha innehållet i "top" till vänster i stället? Eftersom jag inte vet vad du skall ha längst upp, så gissar jag att det är ett ganska ordinärt innehåll med logotype och navigation. Jag kallar detta för "masthead", ett vedertaget begrepp från typografin.
* Den relativt stora yta som du täcker med detta element (298px på höjden) gör dock att jag tvekar. Har jag missförstått din intention?
4.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
ignoreras om sidan sänds som äktaXHTML, dvs. med en MIME typ av
application/xhtml+xml
Min lösning
Jag bygger vidare på Cayas lösning som jag förbättrar på några sätt.
1. Jag har ingen universell selektor för att göra en padding och margin reset. Den universella selektorn är gör sidan mer trögladdad och är lite väl trubbig i sin funktion.
* Detta förklaras i en tråd på CSS incutios CSS diskussionslista. http://archivist.incutio.com/viewlist/css-discuss/74447http://archivist.incutio.com/viewlist/css-discuss/74447
* Roger Johansson instämmer. http://www.456bereastreet.com/archive/200509/starting_with_css/
2. Jag tar bort din index-div och använder ett mer avancerat knep i stället. Jag hanterar ditt body-element som vore det ett vanligt block-element och utnyttjar att html-elementet funkar som viewport. En div mindre!
3. Jag ändrar din doctype till strikt. På det viset förbjuds du använda många element och attribut som endast har grafiskt syfte och tvingar dig själv att utnyttja funktionerna i CSS.
4. Jag sätter ingen fast höjd på ditt "main" element. På det viset kan dess innehåll svälla om man exempelvis förstorar texten. Jag sätter en min-height i stället.
5. Jag byter namn på din CSS fil. Den skall väl användas på alla sidor och inte bara på index-sidan? Det är ju själva vitsen med CSS att man kan styra all layout på alla sidor från en enda plats!
6. Pixlar är inget bra mått på typsnitt, eftersom - trots att W3C säger att de skall betraktas som ett relativt mått - inte kan förstoras eller förminskas i MSIE.
7. Under tiden jag provar mig fram så brukar jag ge varje större block på sidan en bakgrundsfärg för att snabbt se hur de hamnar.
8. Dina PHP filer som skall inkluderas bör absolut inte ligga i underkataloger till din webrot. Exempel: Om webroten är /var/www/html så bör de ligga i en parallell kataolog till denna, typ /var/www/innehall. Det är extremt viktigt av säkerhetsskäl. Du skulle också kunna inkludera själva div-taggarna i de PHP-filer som inkluderas, för än mindre upprepning.
<div id="footer"><?php include 'innehall/bottom.php'; ?></div>
blir alltså kort och gott:
<?php include '../innehall/footer.php'; ?>
9. För skojs skull har jag också roat mig med att centrera innehållet. Eftersom jag inte sett dina bakgrundsbilder, så vet jag ju inte om det är en bra idé. Jag tänker mig detta också som en demonstration av att man kan klara sig utan en s.k. "wrapper"-div.
Sidstrukturen blir mycket kort med min lösning:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nässjö Hockey Club</title>
<link href="css/nassjo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include '../innehall/masthead.php'; ?>
<div id="main"><?php include '../innehall/forklaring.php'; ?>
</div>
<?php include '../innehall/footer.php'; ?>
</body>
</html>
Lägg märke till att det inte behövs så många "divvar" och att de inkluderade PHP-filerna ligger parallellt med webbroten. Om du har din sida i en underkatalog till webbroten måste du gå längre tillbaka i din kataloghierarki.
Filen "forklaring.php" är bara ett exempel jag testade som innehåller just den här förklaringstexten.
CSS-filen ser ut så här:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html {
background:#fff url(../bilder/index/bg.jpg) top left repeat;
}
body {
background-image: url(../bilder/index/bg_table.jpg);
font:85%/1.29 Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 800px;
margin: auto;
color:#000;
background-color: pink;
}
#masthead {
height: 289px;
background-color: orange;
}
#main {
min-height: 300px;
margin-top: 22px;
background-color:#fff;
background-color: pink;
}
#footer {
height: 22px;
background-color: yellow;
}
/*
Nedanståemde CSS-regler är gjorda bara som exempel
och är inte tänkt att lösa vad som diskuterats i tråden
*/
strong {
font-size: larger;
text-transform: uppercase;
}
li {
margin-left: 2em;
margin-top: 1em;
}
h2,p {
margin-top: 1em;
}
#main {
margin-bottom: 1em;
}
code {
font-size: larger;
}
Lars Gunther