Søg
Avatar billede DonTorro Nybegynder
17. marts 2010 - 20:49 Der er 14 kommentarer og
1 løsning

Problemer med CSS

Hej. Prøver at lave en a:hover der er delt op i 3 baggrundsbilleder, dvs.
Venstre side af linket = skygge
Midten/ der hvor der er tekst = hvid
Højre = skygge..

men kan sgu ikke finde ud af det , har prøvet med span inde i linket..

#menu a:hover{
    text-decoration: none;
    color: #878787;
    background-image: url(centeronmenu.gif);
    background-position:top center;
    display: inline-block;
    width: auto;
    line-height: 36px;
    font-family: Tunga;
    font-size: 18px;
    z-index:0px;
    padding: 0px;
    border: 0px;
    }
#menu a:hover span{
    background-image: url(leftonmenu.gif);
    background-position:top left;
    background-repeat: no-repeat;
    text-decoration: none;
    color: #878787;
    display: inline-block;
    width: auto;
    line-height: 36px;
    font-family: Tunga;
    font-size: 18px;
    z-index:1px;
    border: 0px;

}
#menu a:hover span span{
    background-image: url(rightonmenu.gif);
    background-position:top left;
    background-repeat: no-repeat;
    text-decoration: none;
    color: #878787;
    display: inline-block;
    width: auto;
    line-height: 36px;
    font-family: Tunga;
    font-size: 18px;
    z-index:1px;
    border: 0px;
}


html
<a href="#"><span></span>Lejligheden<span></span></a>

Kan ses på www.kerteminde-ferielejlighed.dk/john
Avatar billede preppydude Nybegynder
17. marts 2010 - 21:20 #1
"span span" betyder at du sætter style for et SPAN element inde i et SPAN element. :)
Avatar billede DonTorro Nybegynder
17. marts 2010 - 21:24 #2
hov. ja det har jeg også gjort :) <span><span>Lejligheden</span></span>
Avatar billede DonTorro Nybegynder
17. marts 2010 - 21:44 #3
ingen forslag? :(
Avatar billede preppydude Nybegynder
17. marts 2010 - 22:02 #4
Jeg kan lige prøve at se på det om lidt. Kan kun garantere at eksemplet virker på Safari og Chrome :)
Avatar billede DonTorro Nybegynder
17. marts 2010 - 22:31 #5
det er super :) er helt lost.. mange tak
Avatar billede preppydude Nybegynder
17. marts 2010 - 23:19 #6
.. går i gang nu. :) Sad og så en film.
Avatar billede DonTorro Nybegynder
17. marts 2010 - 23:23 #7
ingen problem :)

så har jeg noget at stå op til imorgen :)
Avatar billede preppydude Nybegynder
17. marts 2010 - 23:26 #8
Den nemme metode:

<html><head><title></title>
    <style type="text/css">
    a.test:before {
        content: url('http://www.thcfashion.com/farver/Red.gif');
    }
    a.test:after {
        content: url('http://www.thcfashion.com/farver/Red.gif');
    }
    </style>
    
    <body>
        
        <a href="#" class="test">Link Tekst</a>
        
    </body>
</html>
Avatar billede preppydude Nybegynder
17. marts 2010 - 23:33 #9
.. og den anden:

<html><head><title></title>
    <style type="text/css">
    a.test div {
        overflow: hidden;
    }
    a.test div.left {
        display: inline-block;
        background: yellow;
        width: 10px;
    }
    a.test div.right {
        display: inline-block;
        background: red;
        width: 10px;
    }
    </style>
    
    <body>
        
        <a href="java script:void(0)" class="test"><div class="left">&nbsp;</div>Link Tekst<div class="right">&nbsp;</div></a>
        
    </body>
</html>


Håber det hjalp. Ellers må du skrive igen - det gik måske lidt for hurtigt. :)
Avatar billede DonTorro Nybegynder
18. marts 2010 - 11:11 #10
nr. 2 ser rigtigt godt ud..
nåede at lave en nødløsning som der åbenbart er lidt problemer med..

http://www.kerteminde-ferielejlighed.dk/john

burde jeg lave det om, så jeg gør lige som dig med div'er?

de der &nbsp; irreterer mig!
Avatar billede preppydude Nybegynder
18. marts 2010 - 13:04 #11
Ville nok foretrække min fremfor din, ja. :b
Avatar billede DonTorro Nybegynder
18. marts 2010 - 13:24 #12
den fylder lidt mindre ihvertfald =)

kigger på den senere
Avatar billede DonTorro Nybegynder
24. marts 2010 - 21:58 #13
så nu har jeg set lidt på det :)
i IE ser det godt ud , men i firefox mangler bunden af billedet :/

og så har jeg igen det problem at jeg gerne vil have mere padding på teksten så den ikke er så klemt , men synes den er lidt triky :p..
Avatar billede DonTorro Nybegynder
24. marts 2010 - 22:18 #14
<code>    <style type="text/css">

    a.test div {
        overflow: hidden;
    }
a{
    text-decoration: none;
    color: #878787;
    background-image: url('centermenu.gif');
    display: inline;
    line-height: 36px;
    font-family: Tunga;
    font-size: 18px;
    z-index:0px;
    }
    a.test div.left {
    display: inline;
    background-image: url('centermenu.gif');
    width: 9px;
    }
    a.test div.right {
    display: inline;
    background-image: url('centermenu.gif');
    width: 9px;
    }
    a:hover.test div.left {
    display: inline;
    width: 9px;
      background-image: url('leftonmenu.gif');
    }
    a:hover.test div.right {
    display: inline;
    background-image: url('rightonmenu.gif');
    width: 9px;
    }
    a:hover{
    text-decoration: none;
    color: #000000;
    background-image: url('centeronmenu.gif');
    display: inline;
    line-height: 36px;
    font-family: Tunga;
    font-size: 18px;
    z-index:0px;
    }
    </style></code>

det er min display: inline; der gør den mærkelig tror jeg.
har lige opdaget at den højre skygge når musen er over , ligger bagved?
Avatar billede DonTorro Nybegynder
05. juli 2010 - 18:50 #15
lukker

endte med at bruge en masse &nbsp ;p
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
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp til Api.asmx Af lurup i Andet programmering 1 17/03/202609:27 17/03/202614:12
burgermenu til hjemmeside - hjælp! Af SabrinaL i Andet programmering 2 12/11/202514:10 02/12/202520:42
Hjælp til programmering af website Af hamdenlange i Andet programmering 16 17/08/202522:26 19/08/202515:53
Kan man registrere hvis folk lukker en side ned Af KurtG i Andet programmering 8 24/07/202513:06 28/07/202517:03
hta - powershell eller lign. Af tjodense i Andet programmering 2 28/04/202515:22 29/04/202512:00
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 10:28 “Signe” Svindel omtalt i medier Af nu_igen i Mobiltelefoner
I går 20:59 RAID controller virker ikke ved tilslutning af alle 4 harddiske Af Strawberry i Andet hardware
I går 13:38 Opret Logo via bogmærke og placer en knap på et Dotx dokument Af per2edb i Word
20/0419:38 Netkort finder 5 forbindelser,bare ikke min, Af valby i Internetforbindelser
20/0412:52 Installation af Outlook Classic Af mort1 i E-mail programmer
White papers
Flere white papers »