HTML-KODER/DESIGN HJELP

Hei dere! Jeg vet det er mange som har et snt innlegg, men jeg tenkte at jeg bare kunne ha det jeg ogs for hjelpe litt flere.


Nyttig info :

Noen tips;
CTRL + A = Merk alt
CTRL + C =Kopier
CTRL + V = Lim inn
CTRL + F =Sk

Fargekart:
http://www.myspacedev.com/color-codes/< her finner du mange farger, g inn her !

ULIKE RAMMER TIL RAMMER RUNDT BLOGGEN DIN ELLER HEADEREN DIN !

solid
dashed
dotted
double
groove
ridge
inset
outset

______________________________________________________________________________________________

MELLOMROM MELLON HEADER OG BLOGGANDRESSE :

G inn p Design > Rediger > Stilsett.
Let s opp wrapper og sett inn denn koden inn under der :

margin: 0px, 0px, 0px;

Du kan f strre mellomrom, bare forandre p det frste tallet, eks: margin: 2px, 0px, 0px;

____________________________________________________________________________________________


SKIRFT UNDER MENYLINJENE, KATEGORIER.

Denne koden limer du inn nederst i stilsettet :

/** Entry headers **/
h3 {
font-family: Verdana, serif;
font-size: 20px;
color: #585858;
background-color:#;
border-bottom: 3px double #000000; < der skifter du farge p streken .

_____________________________________________________________________________________________

RAMME RUNDT BLOGG/ HEADER :

Frst gr du inn p Design > Rediger > Stilsett

Om du skal du ha det rundt bloggen din :

#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000; < her kan du fikse farge p rammen .
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;

Du kan ogs f den sjukkere eller smalere: ta da eks : border: 3px dotted #000000;
Du kan ogs f en annen ramme rundt den : solid istedet for dotted.
( eller s kan du g oppover p siden og finne en av de rammene der )

Om du vil ha ramme rundt header s lim inn den samme koden bare her :

#header {
background-color: #FFFFFF;
background-image: url('http://haawt.blogg.no/images/css/eac960022e9cfbb496ca58d05f9c1e66.jpg');
height: 380px;
( KODEN INN HER )
background-repeat: repeat;

___________________________________________________________________________________________

MIDSTILT BLOGG :

Om du vil ha midtstilt blogg s gr du inn p stilsett.

Limer da inn denne koden :
#header {
background-color: #FFFFFF;
height: 236px;
margin-left: auto;
margin-right: auto;

}
#wrapper {
background-color: #FFEFFC;
margin-left: auto;
margin-right: auto;

}
#footer {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;

______________________________________________________________________________________________

MENY FRA HYRE TIL VENSTRE:

Du gr inn p stilsttet og da skal det s snn ut :

#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
}


Hvis du vil ha menyen i en liten boks, s skal du legge inn denne koden:

border: 1px solid #000000;
background-color: #4D4D4D;

Hvor legger jeg den inn?
Hvis du ser under her s ser du hvor du skal lime den inn.

#wrapper {
background-color: #FFFFFF;
border: 2px dotted #000000;
}
#main {
float: right;
}
#side {
float: left;
border: 1px solid #000000;
background-color: #4D4D4D;
}

}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #FFFFFF;
border: 2px dotted #000000;

______________________________________________________________________________________________

BAGRUNNER:

10 987


43

Bilder tatt fra denne bloggen som fixmeta!

_____________________________________________________________________________________________

FŠ LITEN SKRIFT ISTEDT FOR STANDARSKIRFTEN :

Her inne skal du fye p denne koden:
font-size: 8pt;

den skal vre p plassene markert med fet skrift:

#wrapper {
width: 610px;
background-color: #FFFFFF;
font-size: 8pt;
}
#footer {
width: 610px;
background-color: #FFFFFF;
font-size: 8pt;
}
a { color: #000000}
a:link { color: #000000}
a:visited { color: #510300}
a:active { color: #000000}
h1, h2, h3, h4, h5 { font-family: Arial, Helvetica, sans-serif; }
#header h1, #header p { display:none }
#header { color: #000000;
font-size: 7pt;}
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #000000; }

_____________________________________________________________________________________________

SMAL BLOGG :


For f bloggen smalere m du fye til den koden:
width: 610px;

Den skal du sette rett under der det str
height: 165px;

Da ser det ut som dette:
#header { background-color: #FFFFFF;
background-image: url('LINKEN TIL HEADEREN DIN...');
height: 165px;
width: 610px;

Etter du har gjort dette gjr du akkurat det samme der det str #wrapper & #footer. da skal det se slik ut:

#wrapper {
width: 610px;
background-color: #FFFFFF;
}
#footer {
width: 610px;
background-color: #FFFFFF;
}



______________________________________________________________________________________________

BAGRUNNSOM STR FAST :


Koden:
BODY {
background-image: url("her skal URL'en til bildet st");
background-attachment: fixed;
background-position: right bottom;
background-repeat: repeat;
}

Om du ikke bruker et spessieltbildet som bagrunn behver du ikke og skrive inne noen URL kode, men om du har bildet, m du det !

____________________________________________________________________________________________

STRRELSE P OVERSKIRFTENE :

Tekst strrelsen p overskriftene:

h2 { font-size: 50% }

Denne skal limes inn nederst i stilsettet !

______________________________________________________________________________________________

BAKGRUNNSFARGE P OVERSKRIFT

Koden:
h2 {
cursor:default;
background-color: #BAD5EC; < hvilken farge du vil ha !
color: #000000;
font-size:9pt;
font-family:tahoma;
letter-spacing:1px;
line-height:13pt;
text-align: center;
padding: 1px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px;

Denne koden skal du legge inn nederst i stilsettet!

______________________________________________________________________________________________

MENY UNDER HEADER !
Her kommer den koden dere har spurt etter i flere uker. Den er litt mer komplisert enn de kodene jeg har her fra fr. For plassere denne m du frst:
G inn p Design -> Rediger -> Maler. Deretter trykker du Ctrl + F (samtidig) og skriver inn BlogDescription trykker p Enter.Rett underBlogDescription str det </div>, under </div> er hvor du skal plasserekoden:

<div class="mattblacktabs">
<ul>
<li><a href="URL-ADRESSE">NAVN P KNAPPEN</a></li>
<li><a href="ULR-ADRESSE">NAVN P KNAPPEN</a></li>
<li><a href="URL-ADRESSE">NAVN P KNAPPEN</a></li>
<li><a href="URL-ADRESSE">NAVN P KNAPPEN</a></li>
<li><a href="URL-ADRESSE">NAVN P KNAPPEN</a></li>
</ul>
</div>


Der det str "linken din" plasserer du linken til de forskjellige innleggene.

Skal du ha f.eks 1 til knapp s fyer du p denne:
<li><a href="URL-ADRESSE">NAVN P KNAPPEN</a></li>
Du skriver navnet du vil ha p "knappen" der det str Navn p knappen.
Nr du har plassert den koden m du ta og plassere denne NEDERST inne p Maler.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>


S til slutt lagrer du, s klart. har du gjort alt rett skal menyen vre OK.

Til dere som ikke fr noe resultat av dette: Om dere har gjort alt riktigt s SKAL det virke. Men jeg viser til at det kan hende det ikke virker i en annen nettleser enn Internet Explorer.


Endre hva som str nr du skal sende en kommentar: (drlig forklart av meg)

G innp Design-Rediger-Maler-Innlegg
Trykk Ctrl + F og sk p send kommentar. S endrer du snn at det ikke str "send kommentar", men at det f.eks str "Gjr meg glad!" eller noe snt.


Hper at dette hjalp da!

4 kommentarer

Anna

25.feb.2010 kl.18:37

Snillt av deg og hjelpe, det er mangen som trenger det : )
takkkkk :D

men jeg lurer p en ting det med meny, hvis man har fikset knapper osv, hvordan gjr man det da?

Sigrid- MELD DEG P TOPPLISTA MI

25.feb.2010 kl.18:49

det er jeg over som spr, men ikke svar p den bloggen :P svar heller p denne som skriver n!!

Navliiin <3

26.feb.2010 kl.13:33

Det var smart, jeg bare lurer p f.eks. over ditt komentarfelt str det ikke kommentar elns, men det str din ste lille komentar kan du skrive her, hvordan kan man fornadre p det?. Hper du skjnner hva jeg lurer p da, hvis ikke kan du bare spre og jeg kan forkalre bedre.

-Navlin

Gjr meg glad, og husk; du fr en tilbake!

Ida - Har Sprsmlsrunde

Ida - Har Sprsmlsrunde

11, Oslo

11, snart 12 r gammel jente. Add meg gjerne som venn ♥ Obs; ironi kan forekomme! Ogs var jeg s heldig f komme p den bermte topplisten, den 25. februar 2010 og jeg hper at jeg ikke kommer vekk der i fra!

Kategorier

Arkiv

hits