Flikar ovanför headern
Jag har fått frågan om hur man gör flikar ovanför headern. Så jag visar hur jag har gjort.
1. Gå in i din STILMALL och lägg till följande kod längst ner.
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc; /*Ändra färgen på menyflikarna här*/
color: #fff; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: verdana; /*Ändra typsnittet här*/
font-size: 10px; } /*Ändra storleken på texten här*/
#navbar li ul {
display: none;
width: 10em; /* Ändra bredden på undermenyn här */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #889988; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #ffffff; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/
2. Gå nu in i dina kodmallar, Framsidan, Inläggsidan, Kategorisidan, Arkivsidan, och lägg in följande kod där du vill ha din meny.
Jag har lagt min precis under <div id="wrapper">. Men man kan lägga den var man vill.
Ladda upp den flik du gjort och vill ha.
ex:
<ul id="navbar"> <li><a href="index.html"><img src="http://jennysmodemix.se/images/2010/flik2_109873784.png" border="0"></a></li><li><a href="#"><img src="http://jennysmodemix.se/images/2010/flik1_109873814.png"border="0"></a> <ul>
<li><a href="http://jennysmodemix.se/category/kopa-fardig-design.html"> Köpa BloggDesign</a></li>
<ul id="navbar">
<li><a href="#">HÄR LÄGGER DU DIN FLIK</a>
<ul>
<li><a href="ADRESSEN TILL DEN SIDAN DU VILL MAN SKA KOMMA TILL">NAMNET PÅ KATEGORIN</a></li>
<li><a href="#">Länk 2</a></li>
<li><a href="#">Länk 3</a></li>
</ul>
</li>
<li><a href="#">Kategori 2</a>
<ul>
<li><a href="#">Länk 4</a></li>
</ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="#">Länk 6</a></li>
<li><a href="#">Länk 7</a></li>
<li><a href="#">Länk 8</a></li>
<li><a href="#">Länk 9</a></li>
</ul>
</li>
</ul>
Börja med att lägga in adressen till de sidor som du länkar till, det gör du i denna kod:
<li><a href="#">Länk1</a></li>
Byt ut "#" mot adressen och byt ut "Länk 1" till det namn du vill att länken ska ha.
1. Gå in i din STILMALL och lägg till följande kod längst ner.
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc; /*Ändra färgen på menyflikarna här*/
color: #fff; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: verdana; /*Ändra typsnittet här*/
font-size: 10px; } /*Ändra storleken på texten här*/
#navbar li ul {
display: none;
width: 10em; /* Ändra bredden på undermenyn här */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #889988; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #ffffff; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/
2. Gå nu in i dina kodmallar, Framsidan, Inläggsidan, Kategorisidan, Arkivsidan, och lägg in följande kod där du vill ha din meny.
Jag har lagt min precis under <div id="wrapper">. Men man kan lägga den var man vill.
Ladda upp den flik du gjort och vill ha.
ex:
<ul id="navbar"> <li><a href="index.html"><img src="http://jennysmodemix.se/images/2010/flik2_109873784.png" border="0"></a></li><li><a href="#"><img src="http://jennysmodemix.se/images/2010/flik1_109873814.png"border="0"></a> <ul>
<li><a href="http://jennysmodemix.se/category/kopa-fardig-design.html"> Köpa BloggDesign</a></li>
<ul id="navbar">
<li><a href="#">HÄR LÄGGER DU DIN FLIK</a>
<ul>
<li><a href="ADRESSEN TILL DEN SIDAN DU VILL MAN SKA KOMMA TILL">NAMNET PÅ KATEGORIN</a></li>
<li><a href="#">Länk 2</a></li>
<li><a href="#">Länk 3</a></li>
</ul>
</li>
<li><a href="#">Kategori 2</a>
<ul>
<li><a href="#">Länk 4</a></li>
</ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="#">Länk 6</a></li>
<li><a href="#">Länk 7</a></li>
<li><a href="#">Länk 8</a></li>
<li><a href="#">Länk 9</a></li>
</ul>
</li>
</ul>
Börja med att lägga in adressen till de sidor som du länkar till, det gör du i denna kod:
<li><a href="#">Länk1</a></li>
Byt ut "#" mot adressen och byt ut "Länk 1" till det namn du vill att länken ska ha.
. . JÄTTE sköna
text-shadow:0 1px 2px #000000;
.
