YARADESIGN' ♥ -

Designtutorial # 1

ljudet kommer lite efter, förlåt

Första koden:

#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: #cccccc; /*Ä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*/

#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: #cccccc; /*Ä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*/

Andra koden:

<ul id="navbar">
<li><a href="#">Startsida</a></li>
  <li><a href="#">Kategorier</a>
    <ul>
      <li><a href="#">Länk 1</a></li>
      <li><a href="#">Länk 2</a></li>
      <li><a href="#">Länk 3</a></li>
    </ul>
</li>
<li><a href="#">Senaste inläggen</a>
   <ul>
       <tag:recentlist limit="10">
         <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
       </tag:recentlist>
   </ul>
</li>
<li><a href="#">Arkiv</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>

Hoppas ni gillar guiden!

2010-12-31 @ 16:23:54 Designtutorial Permalink

Kommentarer

sofia hassan

jag tackar och bugar :) ska försöka fixa det!

2011-01-01 @ 15:29:57
URL: http://sofiahassan.blogg.se/

sofia hassan

förresten jag har en annan fråga! äntligen har jag hittat en kunnig inom bloggen haha :D

hur får man en bredare blogg? om du förstå haha ..

2011-01-01 @ 20:32:38
URL: http://sofiahassan.blogg.se/

sofia hassan

otroligt att du kan så mycket! :D

det har jag dock försökt med, men då blir själva "sidan" större. okej kanske förklarade riktigt dåligt. jag menar breddden på inläggen. :)

2011-01-02 @ 11:33:26
URL: http://sofiahassan.blogg.se/

mmautildah

Fin blogg :)

vad gör du?

kraam

2011-01-02 @ 14:07:04
URL: http://mmautildah.blogg.se/

Sophie

hur gör du såna rutor med koder i? Det skulle vara snällt om du kunde göra en video om det. Kram =)

2011-01-18 @ 09:33:28
URL: http://soobloggen.blogg.se/

Trackback