byt lankar med html-skolan
Google gbghtml.se
index bilder body länkar visited div-taggen class hover menyer dreamweaver dreamweaver extensions flash gratis html editorer gratis templates css3 responsiv design Böcker om stylesheets Design för din blogg

waybackmachine
är du nyfiken på hur din eller andra webbsidor såg ut förr? Prova waybackmachine>>>

 

 

 

 

ID, ännu ett användbart kommando för ditt stylesheet.

Ofta, när du använder tabeller, märker du att denna vill sträcka ut sig över mer än 100% av sidan vilket resulterar i scrollister i nederkanten. Det är något som skall undvikas då besökaren får svårt att se hela innehållet och tappar orienteringen. Det är vid dessa tillfällen en div-tagg kan vara nyttig för att bädda in bilder, tabeller eller annat på sidan. Samtidigt är div-taggen enklare att använda vid stylesheets som vid positionering, alignoch liknande.

Om du skriver, exempelvis, div {width: 80%} i din css och sedan lägger div-taggar precis innanför body-taggarna får du allt på sidan att hålla sig innanför fönsterbredden.

Innanför div taggen kan du använda flera olika css kommandon för att utforma just denna tagg. Om du, exempelvis, vill ha en spciell bakgrund på en viss del av dokumentet använder du id kommandot. Id kommandot skriver du som # och skriver sedan vad detta skall göra i css filen. För att då få en annorlunda bakgrund på en viss bit av sidan använder man alltså <div id="annorlunda"> precis innan avsnittet och slutat avsnittet med </div> i css filen skriver vi #annorlunda {background-color:#FF9900;}. Och får då en

sådan här färg i bakgrunden.
Man skulle även kunna ändra på färgen för bokstäver med samma kommando. Om man då gör bokstäverna vita
får man denna effekt

Vad vi har gjort här är att skriva ett nytt annorlunda kommando som vi kallar annorlunda2 och det ser ut så här.

#annorlunda2 {background-color:#FF9900; font:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:large;}

Som du ser har vi här lagt samma background-color men även sagt hur fonterna skall se ut och att vi vill ha lite större och vita bokstäver. Kommandot color:#FFFFFF säger att färgen på dina bokstäver skall vara vita och kommandot font-size:large säger att de skall vara stora. Med font-size har du 8 olika storlekar i large men även möjlighet att använda %, initial och inherit. Du ser en bra genomgång av dessa storlekar på w3c schools>>>

Vi var tvungna att använda ett annat namn på kommandot eftersom vi använder id eller # kommandot. Vill du använda samma effekt på flera ställen är du tvungen att använda class. Vilket vi tittar på här>>>>

bakgrundsbild i tabell

På sidan om selektorer i stylesheets hittar du ett färdigt exempel på hur du får bilder som bakgrund i din tabell. Kan även den vara något att börja med.

copyright © Björn Larsen citygbg.se