/formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd/ html, body { height: 100%; }

Storlek: px

Starta visningen från sidan:

Download "/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }"

Alexander Håkansson
för 7 år sedan
Visningar:

1 /*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; /*formatering för sidans body element - bakgrundsfärg, bild som används som mönster och repeteras över hela sidan.*/ body { background-color: #EEF2F8; background-image:url('../img/washi.png'); background-repeat:repeat; /*formatering för textstycken - val av font och dess storlek och padding på undersidan av textstycket*/ p { padding-bottom: 10px; /*formatering för rubrik h1 - val av font och dess storlek och färg*/ h1 { font-family: Cambria, Calibri, Verdana, Arial, sans-serif; font-size: 24px; /*formatering för textlänkar - val av font och dess storlek och linje under länktexarna tas bort*/ a { text-decoration: none; /*ingen ramlinje för bildlänkar*/ a, img { border:none; /*formatering för textlänkar när användaren för pekaren över texten - text färg*/ a:hover{ /*formatering av textfärg*/.pink{ /*class för formatering av rubrik - val av font (länk till google font finns i html filens -1-

2 <head> märke), fontens storlek, färg, mellanrum mellan bokstäver. Klassen påverkar även elementets bakgrundsfärg samt anger padding i följande ordning: top-right-bottom-left*/.title{ font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 40px; letter-spacing: 1px; padding: 10px 0 10px 10px; /*formatering för box/behållare som innehåller alla sidans element Det anges bredd, min höjd, padding, margin (gör att innehållet centreras), bakgrundsfärg, textfärg och kantlinje på elementets vänster och högersida.*/.wrapper{ width: 1010px; min-height: 100%; padding: 0px; margin: auto; background-color: #F6F9F9; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; /*formatering för klassen 'header' = sidhuvud - anger bredd, padding, margin (*/ header{ width: 1010px; padding: 20px 0 20px 0; margin: auto; background-color: #4a5745; /*formatering för logotyp - anger padding för bildens vänster sida*/ header img { padding-left: 10px; /*formatering för huvudmenyn och textlänkarna*/ nav{ width: 990px; background-color: #768f6f; padding: 20px 20px 20px 0;.mainmenu ul{ list-style: none;/*ingen punkt i listan*/.mainmenu li{ display: inline;/*skapar horisontell menu*/.mainmenu a{ padding: 20px 30px 20px 30px; position: relative;/*elementet positioneras relativt till dess normala position, -2-

3 så att tex "left:20" ökar 20 pixlar till elementets vänstra sida*/ left: -40px; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 25px; letter-spacing: 1px;/*mellanrum mellan bokstäverna*/.mainmenu a:hover{ background-color: #bbd3a3; /* formatering för index sidan */ /*formatering för 2 kolumn layout*/ /*box där inuti finns vänstra och högra kolumn.*/.main{ width: 100%; min-height: 100%;/*min-height används för att sätta minsta möjliga höjd för ett element. Detta gör att elementets höjd kan inte bli mindre än dess min-height.*/ height: auto!important;/*!important regel kör över även om man senare försöker ge annat värde.*/ background-color: #f9f8f8; margin: 0 auto;/*centrerar innehållet i elementet - width ska ges*/ /*formatering för vänster kolumn*/.leftcol{ float: left;/*positionering till vänster*/ width:600px; padding: 20px;.leftcol p{ padding: px 10px; /*formatering för höger kolumn*/.rightcol{ float: right;/*positionering till höger*/ width:330px; padding: 20px; /*formatering av div för text och bild*/.textbild{ float: right; width:250px; text-align: left; /*formatering för bilden i höger kolumnen*/.rightcol img{ /*border:1px solid #cccccc; border-radius:10px;*/ /*formatering av bildtexten i höger kolumnen*/ -3-

4 .rightcol p{ font-style:italic; /*kursiv textstil*/ font-size:16px; padding-left: 10px; text-align: left; /*formatering för sidfot*/.footer{ width: 1000px; padding: 5px; margin: 0px; background-color: #4a5745; color: #e6e6e6; text-align: center; /*formatering för sidfot och klassen push som trycker ner sidfoten på sidan.*/.footer,.push{ height: 4em; clear: both;/*inga flytande element är tillåtna på vänster eller höger sida. Gör att 'footer' sitter fast i sidan nedre kant.*/ /*formatering för text i footer*/.footer p { font-size: 14px; color: #bbd3a3; padding-top: 10px; letter-spacing: 1px; /* formatering för om mig sidan */ /*formatering för 2 kolumn layout*/.ommig{ width: 980px; min-height: 100%; height: auto!important; padding: 20px px; background-color: #f9f8f8;.ommig h1{ padding-top: 10px; /*formatering av div för text och bild */.img{ padding: 5px; border:1px solid #bbd3a3; height:auto; width:auto; float:left; text-align:center;.img img{ display:inline; -4-

5 border:1px solid #ffffff;.img a:hover img{ border:1px solid #0000ff;.desc { font-size: 14px; text-align:center; font-weight:normal; width:200px; /* formatering för mina intressen sidan */ /*formatering för textlänkar*/.rightcol a { color: #4a5745; text-decoration: none; /*formatering för textlänkar när användaren för pekaren över texten*/.rightcol a:hover{ -5-

Relevanta dokument

ORDLISTA WEBBDESIGN 100P

ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.