Exempel på enkel box-layout

Imorgon ska jag lära en kille grunderna i webb-design och html-programmering. Tänkte även att detta kan vara något att skriva om i bloggen, så andra läsare kan få nytta av detta.

Ett enkelt exempel i XHTML

Nu ikväll har jag förberett en enkel stuktur för en webbplats för att ha något att börja med. Denna kan ni se på följande länk:

Simple box-layout

Exempel-sajten är kodad i XHTML 1.0. Funderade ett tag på om det var bättre att använda HTML som första exempel, men vi kör med XHMTL till en en början så får vi se.

Layout utan tabeller

Sajten i exemplet är kodad utan tabeller använder istället <div>-taggar som positioneras med hjälp av CSS.

Validerad

Ofta stöter man på konstigheter med att olika webbläsare visar layouten olika. Det första man bör göra är att se till att korrekt CSS och HTML (länkarna går till valideringsverktygen hos W3C). Det är en förutsättning för att de olika webbläsarna ska få en chans att visa ditt innehåll som det var tänkt.

Övrigt

Till sajten har jag använt lite externa resurser. "Lorem Ipsum"-texterna har jag fått genererade här och bakgrundbilden lånade jag från Kaliber 10000.

CSS, HTML, XHTML

Comments

Martin S. Wrote:

15:e Augusti 2007

Jag ser fortfarande att väldigt många använder en clear-div av typen
eller dylikt. Vad många inte vet är att man faktiskt kan undvika detta som semantiskt sett inte är något att föredra. På den omgärdande diven kan man i stället sätta overflow-egenskapen. Tex så här: #wrap { overflow: hidden }

Jesper Wrote:

15:e Augusti 2007

Tack för infon, jag har funderat på hur man ska kunna undervika att använda extra uppmärkning för att avsluta flytande element. Har sett en del artiklar på detta ämne men jag har inte fördjupat mig i det än. I mitt exempel vilken div menar du att jag ska sätta overflow:hidden på? Jag har två flytande element, #sidebar och #content. Sen vill jag att #footer alltid ska ligga nedanför. Runt om allt har jag en #wrapper som begränsar inehållet på sidan till 710px. Ska göra en test med detta senare ikväll.

Jesper Wrote:

15:e Augusti 2007

Wow! Testade just ditt overflow-tips och det fungerade väldigt bra. Fick även önskvärd effekt med värdena auto och scroll. Ska göra en ny bloggpost och demonstrera detta framöver. Förstår bara inte varför detta får den omgivande diven att sträcka sig ända ner. Tack igen för ett suveränt tips.

Martin S. Wrote:

17:e Augusti 2007

Kul att delge tips som fungerar bra! ;) Jag håller faktiskt på med en grundlayout själv just nu, dock lite mer avancerad än din såg jag nu.. Har inte kodat upp den än utan har bara en psd-fil. Jag insåg precis att min layout troligtvis är lite för avancerad för ändamålet, tror jag tar lite inspiration från din box-layout och fortsätter med mitt jobbande. :)

Jesper Wrote:

17:e Augusti 2007

Ja det ska du verkligen ha tack för. Har alltid tyckt att det känns onödigt att lägga till ett extra element som inte fyller någon funktion. Jag uppdaterade mitt exempel, med din teknik och det ser bra ut. Har dock inte testat i alla webbläsare ännu. För er som läser detta i efterhand så innehöll exemplet en div precis ovanför #footer som såg ut så här: <div class="clearer">&nbsp;</div> I stilmallen: .clearer {clear:both;} Nu tog jag bort denna och la istället till overflow:hidden på #wrapper-elementet. Kul att du kunde få lite inspiration från exemplet. Jag gillar uttrycket "box-layout", så jag ändrade detta inläggets titel lite. Säg gärna till när din layout när den är klar, vore kul att se.

Jesper Wrote:

17:e Augusti 2007

Testar XSS <INPUT TYPE="IMAGE" SRC="javascript:alert('XSS');">

Jani Sjölund Wrote:

19:e Augusti 2007

Har ni några bra förslag på hur man skall döpa div'ar. Första strukturen har jag klart för mig (som jag alltid använder) wrapper header content footer Men när det kommer flera lager till så brukar det leda till att jag får inte samma namngivning.. Som ni kanske märker så försöker jag komma till någon bra standard.. Ibland kan det se ut så här ex: wrapper header logo nav wrappper_content content content_left content_right osv.. Så jag undrar om ni har några bra tips, eller hur gör ni?

Jesper Wrote:

19:e Augusti 2007

Jag har också haft dessa funderingar och håller med att det skulle vara bra att ha en bra standard för detta. Namngivningen i våra projekts CSS-filer brukar se ut ungefär som dina klasser. Ett bra tips kan väl vara att ange kallserna i CSSen i samma ordning som på sidan, men det gör du säkert redan. Nyligen har jag börjat gå ifrån "left" och "right" i namnen eftersom det kan bli svårigheter ifall man skulle vilja byta plats på dessa. Istället brukar jag kalla kolumnerna "content", "sidebar" eller "menu". Svårigheten tycker jag är själva "innehållsdelen". Ibland har man två kolumner i layouten och ibland tre. Ibland ligger menyn till vänster och ibland på högra sidan. Så det är oneklingen svårt att hitta bra klassnamn som fungerar på alla projekt. Kan rekommendera ett besök på Googles webbstatistik över mest användbara klassnamn (från 2005). http://code.google.com/webstats/2005-12/classes.html Där ser vi även en jämnförelse på hur vanligaste klassnamnen matchar de nya standardelement som kommer i (X)HTML5. Det som folk oftast döper till text, content, main, body kommer representeras av en tagg som kallas "Article" i HTML5. Som en parantes kan man även se på den sidan är också att "msonormal" kommer på en överraskande plats 13. Det visar hur vanligt det är att innehåll från Word klistras in i CMS-system och i HTML-editorer. Detta påminner mig i att jag måste komma på ett sätt att göra så att TinyMCE automatiskt rensar bort all Word-formatering. För det är ett problem när kunder ofta skriver sina texter i Word och klistrar in i editorn. Avvikande fonter, olika storlekar, färger etc.

Jani Sjölund Wrote:

19:e Augusti 2007

Jo tack, att döpa om blir inte alltid det lättaste.. Jag använder förresten ditt tips om CSS clean-up för att hittade oanvända CSS-element (kanske den klarar även dubbletter?, Dreameweaver är dock bra på det här..) Tack, skall kolla igenom länken, jag kollade tidigare också på Yahoo's projektf för detta, där de döper sina div'ar på lite annordlunda sätt (nu behöver man bara komma ihåg alla dessa, se på verktyget online för att producera div'ar med flera kolumner.. http://developer.yahoo.com/yui/grids/builder/ PS. "Som en parantes kan man även se på den sidan är också att "msonormal" kommer på en överraskande plats 13. Det visar hur vanligt det är att innehåll från Word klistras in i CMS-system och i HTML-editorer. Detta påminner mig i att jag måste komma på ett sätt att göra så att TinyMCE automatiskt rensar bort all Word-formatering. För det är ett problem när kunder ofta skriver sina texter i Word och klistrar in i editorn. Avvikande fonter, olika storlekar, färger etc." Vi har för våra kunder lärt hur de använder TinyMCE (ingår i Joomla!) för att rensa dessa, det finns en liten knapp i editorn som rensar bort formateringar, har fungerat för oss..

Jesper Wrote:

19:e Augusti 2007

Tack för länken, Yahoo är en väldigt underskattad resurs, jag ska kolla vidare på den där online-editorn. Kul att du använder "Dust-Me Selectors"-tillägget. Jag har själv inte hunnit städa några CSSer nyligen så vet inte hur bra det fungerar när det gäller att hitta dubletter. Jag använder DW rätt mccyket men har inte sett den funktionen, tack för tipset, om att det finns där. Även Visual Studio har lagt till en sån funktion i senaste beta-versionen. "Vi har för våra kunder lärt hur de använder TinyMCE (ingår i Joomla!) för att rensa dessa" Ni kan vara lyckliga för ni verkar ha mer noggranna kunder än oss ;) Jag har också förklarat om den lilla "rensa formaterings"-knappen, men det är inte många som ser någon mening med att använda den. De förstår helt enkelt inte våra argument att "Word-formateringen förstör XHTML-valideringen" eller att "det blir massa onödig kod bakom". Så nu blir det till att fixa auto-rensning så fort nån klistrar in text. Drupal ska ha en sån funktion har jag läst tror jag, har du hunnit jobba något på den plattformen? Jag hade tänkt att ladda hem det bara för att se hur de fixat rensningen, borde vara en javascript-funktion.