Avatar billede djsteiner Nybegynder
20. november 2013 - 09:56 Der er 5 kommentarer og
1 løsning

css link fra ikoner

Hej jeg har brug for hjælp.

Jeg arbejder på denne side: http://menofunding.dk/
i bunden af siden er der nogle ikoner her vil jeg gerne kunne linke fra hver ikon. Ved ikke om man kan gøre det med javascrip eller der en mere simple løsning?

Her har HTLM koden:

<ul class="social">   
  <li class="mail"><?php the_field('mail'); ?><br /><a href="mailto:christian@menofunding.dk">christian@menofunding.dk</a></li>
    <li class="twitter"><?php the_field('twitter'); ?></li>
  <li class="linkedin"> <?php the_field('linkedin'); ?></li>
  <li class="phone"> <?php the_field('phone'); ?></li>
</ul>

Her har css koden:

.social {
    overflow: hidden;
    list-style: none;
}

.social li {
    float: left;
    width: 200px;
    padding: 0 0 0 60px;
    font-size: 12px;
    text-align: center;
    line-height: normal;
    margin: 0 21px;
    height: 50px;
}

li.mail {
    margin-left: 0px;
    background: url(images/mail.png) no-repeat;
}

li.twitter {
    background: url(images/twitter.png) no-repeat;
}

li.linkedin {
    background: url(images/linkedin.png) no-repeat;
   
}


li.phone {
    margin-right: 0px;
    background: url(images/phone.png) no-repeat;
}
Avatar billede SkarpC Nybegynder
20. november 2013 - 11:27 #1
Skal billedet sættes i CSS'en, kunne det ikke flyttes ind i li tagget? Således kan både billed og teksten pakkes ind i et a tag..
Avatar billede jokkejensen Novice
20. november 2013 - 11:53 #2
.social li {
    float: left;
    width: 260px; /* !!!! */
    /*padding: 0 0 0 60px;*/
    font-size: 12px;
    text-align: center;
    line-height: normal;
    margin: 0 21px;
    height: 50px;
}

.social li a
{
padding-left: 60px;
display:block;
width: 200px;
height: 100%;
}

<li class="twitter"><a href="twitter"><?php the_field('twitter'); ?></a></li>
Avatar billede djsteiner Nybegynder
20. november 2013 - 13:20 #3
Hej alle

Tak for jeres hjælp jeg fandt selv ud af det med java script:

<script>
$(document).ready(function() {
  $(".social li:has(a)").click(function() {
      window.location = $("a:first",this).attr("href");
  });
});
</script>

Jeg vil gerne kunne give point
Avatar billede djsteiner Nybegynder
06. december 2013 - 15:19 #4
Lukke tid ?

Hvem vil have point?
Avatar billede jokkejensen Novice
06. december 2013 - 15:38 #5
Det er dine, smid et svar og luk
Avatar billede djsteiner Nybegynder
08. december 2013 - 17:22 #6
Tak
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester