div w divie

[_mlody_]

@ixtab

Kod:

<a title="Facet" class="facet" href="http://facet.wp.pl">Facet</a>

co w tej regule odpowiada za ikone clipart? To wycinek kodu html z wp.pl za pomoca firebuga.

[ixtab]

Po prawej stronie masz przypisany CSS dla tej klasy...

[_mlody_]

udalo mi sie zrobic te obrazki przed lista za pomoca tego tutka:
http://www.youtube.com/watch?v=AKC5J_o-IGc

jest tylko jedno ale.. wszystkie ikony sa takie same.. a chcial bym zeby przy kazdym byla inna.. Pomozecie?

html:

Kod:

<div id="wrapper">
    <ul>
      <li><h2><a href="jeden.html">jeden</a></li></h2>
      <li><h2><a href="dwa.html">dwa</a></li></h2>
      <li><h2><a href="trzy.html">trzy</a></li></h2>
    </ul>
</div> <!-- end wrapper div -->

css:

Kod:

#wrapper ul {
        list-style: none;
}
#wrapper ul li {
        font-size: 14px;
          font-family: verdana, geneva, sans-serif;     
          background-image: url('gif/biznes1.gif');
          background-repeat: no-repeat;
          background-position: center left;
          padding-left: 40px;                
}

[ixtab]

Nie pofatygowałeś się, żeby pobawić się FIREBUGiem na WP - szkoda, bo tam jest wszystko jak na dłoni... Więc zrobię to za Ciebie ten jeden raz... Może przyda się jeszcze jakiemuś leniwemu "webmasterowi".
HTML:

Kod:

<div id="wrapper">
    <ul>
      <li><h2><a class="link1" href="jeden.html">jeden</a></h2></li>
      <li><h2><a class="link2" href="dwa.html">dwa</a></h2></li>
      <li><h2><a class="link3" href="trzy.html">trzy</a></h2></li>
    </ul>
</div> <!-- end wrapper div -->

CSS:

Kod:

#wrapper ul {
        list-style: none;
}
#wrapper ul li {
        font-size: 14px;
          font-family: verdana, geneva, sans-serif;    
          padding-left: 40px;                
}
#wrapper ul li a.link1 {
          background-image: url('gif/biznes1.gif');
          background-repeat: no-repeat;
          background-position: center left;              
}
#wrapper ul li a.link2 {
          background-image: url('gif/biznes2.gif');
          background-repeat: no-repeat;
          background-position: center left;              
}
#wrapper ul li a.link3 {
          background-image: url('gif/biznes3.gif');
          background-repeat: no-repeat;
          background-position: center left;              
}

Z paddingiem i innymi pierdołami pobaw się sam, a kod pisałem na szybko i nie sprawdzałem, bo nie jest mój i nie mam zamiaru robić wszystkiego za kogoś. However... powinien działać.

[_mlody_]

@ixtab wielkie dzieki koles

jest tylko jeden maly blad:

Kod:

#wrapper ul li {
        font-size: 14px;
          font-family: verdana, geneva, sans-serif;    
          padding-left: 40px;                
}

"padding-left: 40px;" musi z tad zniknac.

zamiast tego pojawic sie musi tu:

Kod:

#wrapper ul li a.link1 {
          background-image: url('gif/biznes1.gif');
          background-repeat: no-repeat;
          background-position: center left;    
          padding-left: 40px;          
}

wtedy kod jest w 100% dzialajacy i poprawny.

Mam teraz inne zmartwienie nad ktorym siedze juz z 2 godziny i lipa mianowicie:

html:

Kod:

<li><a class="jeden" href="jeden.html">jeden</a></li>

css:

Kod:

#wrapper ul li a.jeden {
        background-image: url('gif2/jeden.gif');
        background-repeat: no-repeat;
        background-position: center left;
          padding-left: 40px;  
          color: black;
                              
}

Chodzi o to ze gif ma rozmiar 40x40 pikseli i ucina go bo dopasowywuje sie do wielkosci tekstu ktory ma wartosc 14px.
Nie chce pomniejszac gifa, ani powiekszac czcionki, chcial bym tylko zeby bylo widac calego gifa przy takiej czcionce a nie ucinalo go do rozmiarow czcionki. Mozliwe to?

[ixtab]

dopisz do css, do klasy która Cię interesuje: line-height:40px;

[_mlody_]

dopisz do css, do klasy która Cię interesuje: line-height:40px;

probowalem tak i niestety nie dziala, nawet teraz dla pewnosci jeszcze raz sprawdzilem i nic

[Engine]

Jak nie line-height to daj padding górny i dolny.

[_mlody_]

Jak nie line-height to daj padding górny i dolny.

Dzieki! Działa! ufff..

zostal mi ostatni problem..

html

Kod:

<div id="lewaKolumna">
   <h1>Kategorie</h1>
<div id="wrapper">
    <ul>
      <li><h2><a class="jeden" href="jeden.html">jeden</h2></a></li>
    </ul>
</div>

css

Kod:

div {
        width: 800px;
          margin: auto;    
}
h1 {    font: bold 18px verdana, arial, sans-serif;
         padding: 1px;
         color: black;
         margin: 0;
         line-height: 40px;
          text-align: center;    
}
h2 {    font: normal 14px verdana, arial, sans-serif;
         padding: 0px;
         color: black;
         margin: 0;
         line-height: 30px;    

}
#lewaKolumna {
        border: 1px hidden #CCF;
          margin-top: 0px;    
          margin-bottom: 0px;    
          margin-right: 5px;    
          width: 240px;    
          float: left;
          background-image:    
          url('leftColumn.jpg');        
}
#wrapper ul {
        list-style: none;
}
#wrapper ul li {
        font-size: 16px;
        font-family: verdana, geneva, sans-serif;
                          
}
#wrapper ul li a.jeden {
        background-image: url('gif2/jeden.gif');
        background-repeat: no-repeat;
        background-position: center left;
          padding-left: 40px;  
          color: black;
          padding-top: 10px;
          padding-bottom: 10px;        
                              
}

Gif i link wyswietlaja sie w pewnej odleglosci od lewej krawedzi diva. Chcial bym zeby wyswietlaly sie zaraz obok lewej krawedzi diva (#lewaKolumna) czyli poprostu od poczatku a nie z akapitem..

[ixtab]

Kod:

#wrapper ul li {
        font-size: 16px;
        font-family: verdana, geneva, sans-serif;
        margin:0;
        padding:0;
}