html - Fjern tekst og erstat med billede - Udvikleren.dk

Tags: html css

<< < 1 2 > >>

Bruger #15663 @ 27.02.12 23:13

Hejsa.

Det kan da godt være det er efter 8 timer, men jeg kan simpelthen ikke se hvordan jeg skal lave det.

Jeg vil gerne have ikoner til nogle brugerpunkter som på denne side: http://infinity.7loops.com/#dashboard
De ikoner jeg snakker om er dem oppe i højre hjørne, altså indstillinger logout osv.

Når jeg kigger i koden kan jeg se at der i a tagget som de har sat en class på er tre punktummer, hvordan få jeg dem væk? De er sat der for at man kan klikke på ikonet.

Indlæg senest redigeret d. 27.02.2012 23:14 af Bruger #15663

12 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 13 karma

Sorter efter stemmer Sorter efter dato

Bruger #15754 @ 28.02.12 11:54

989

For SEO'ens og de blinde ects skyld så gør følgende, er dog stadig i tvivl om hvad du faktisk vil..

CSS kode

 #knap1{
     background-image:url('images/beskeder.png');
     background-repeat: no-repeat;
     text-indent:-9999px;
  }

HTML kode

 <a id="knap1" href="index.php?p=beskeder">Beskeder</a>

Bruger #17081 @ 28.02.12 18:24

1.258

Image replacement via text-indent ER vejen frem.

Bruger #15754 @ 28.02.12 21:19

989

Tilføj display:block når det er et a tag

Bruger #16722 @ 28.02.12 09:45

Jeg er ikke helt med hvad det er du vil.
Er det ikonerne på i højre hjørne du vil have for så kan du jo bare kigge i css filen

Bruger #15663 @ 28.02.12 11:24

415

Jeg har ikoner.

Problemet er at jeg skal have dem tilføjet via css så jeg på en måde "fjerner" teksten.

Det skal være på de punkter jeg har på denne side:
http://mautone.dk/web.png

Jeg ved godt jeg kan løse det via at indsætte dem som billeder.

Jeg har allerede gjort det på min søgefunktion, men det er en copy paste, så jeg aner det ikke.

Bruger #16722 @ 28.02.12 11:38

Du kan erstatte teksten med et billede, eller med css som med som mit eksempel her under.

HTML kode

 <a id="knap1" href="index.php?p=beskeder"></a>

CSS kode

 #knap1{
    background-image:url('images/beskeder.png');
    background-repeat: no-repeat;
 }

Bruger #16722 @ 28.02.12 13:45

For SEO'ens og de blinde ects skyld så gør følgende, er dog stadig i tvivl om hvad du faktisk vil..

Måske for de blinde, men ikke for SEO, lad mig quote fra google

"Hvis du skjuler tekst eller link i dit indhold, kan dit websted blive betragtet som upålideligt, da det præsenterer oplysningerne forskelligt over for hhv. søgemaskinerne og de besøgende"

Indlæg senest redigeret d. 28.02.2012 18:56 af Bruger #16722

Bruger #15754 @ 28.02.12 13:57

989

Læs her. http://stackoverflow.com/questions/2561524/is-a-negative-text-indent-considered-cloaking

Det google mener med at skjule links eller indhold er hvis du prøver og snyde med søgeord og gemmer dem fra brugeren men ikke fra google. Hvilket ikke er det vi gør.

Bruger #15663 @ 28.02.12 17:06

415

Jeg kan godt nok ikke få det til at virke.

Min kode er som følger pt.

HTML kode

 <div id="head">
          <div class="left">
                     <div id="username">
                        Hej,
                       <a href="">Daniel Mautone</a>
                       <ul>
                              <li><a href="" class="messages">Beskeder</a></li>
                              <li><a href="" class="settings">Indstillinger</a></li>
                              <li><a href="" class="profile">Profil</a></li>
                              <li><a href="logout.php" class="logout">Logaf</a></li>
                         </ul>
                     </div>
          </div>
          <div class="right">
                      <form action="" id="search" class="search placeholder">
                                 <label>Søg efter kontakt...</label>
                                 <input type="text" value="" name="q" class="text" />
                                 <input type="submit" value="rechercher" class="submit" />
                     </form>
          </div>            
 </div>

CSS kode

 #head .left #username
 {
  float: left;
  margin-right: 20px;
  border: 1px solid #222222;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  display: block;
  height: 25px;
  margin-top: 6px;
  line-height: 25px;
  text-align: center;
  background-position: 0px -40px;
  padding-left: 10px;
  padding-right: 10px;
 }
 
 #head .left #username ul
 {
  float: right;
  margin-left: 20px;
 }
 
 #head .left #username ul li
 {
  float: left;
 }
 
 #head .left #username ul li a
 {
  width: 16px;
  height: 16px;
  padding: 4px;
  background-repeat: no-repeat;
  background-position: center center;
 }
 
 .messages { background: url("images/messages.png"); }
 .settings { background: url("images/settings.png"); }
 .profile    { background: url("images/profile.png"); }
 .logout        { background: url("images/logout.png"); }

Det er dog kun uddrag.

Men faktum er dog at teksten der står i de 4 a, stadig er at finde også efter jeg har prøvet de tidligere nævnte løsninger.

Bruger #15663 @ 28.02.12 19:56

415

Er prøvet Dan, virker bare ikke

EDIT:
Jeg har lagt det online så folk kan gå ind og kigge og se hvad det er jeg gør forkert.

http://www.mautone.dk/web

Indlæg senest redigeret d. 28.02.2012 20:03 af Bruger #15663

<< < 1 2 > >>

Fjern tekst og erstat med billede

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler