Avatar billede steen_hansen Forsker
20. juni 2005 - 22:08 Der er 21 kommentarer og
1 løsning

Grafik som baggrund i celle/display: block; width: 100%;

Jeg vil i menucellerne indsætte en pil, som skal stå XXpx fra menuens venstre kant, hvor efter tekstlinket skal stå XXpx fra pilens venstre kant.

Jeg har noget CSS, som fungerer ganske glimrende på tekst alene, men jeg skal så have pilen ind som beskrevet ovenfor:

a.menu, a.menu:link, a.menu:visited {
display: block;
width: 100%;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: bold;
font-size: 11px;
color: #949494;
text-decoration: none;
padding: 3px 10px;
}
a.menu:hover {
font-weight: bold;
color: #000;
}
.activeMenu {
display: block;
width: 100%;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: bold;
font-size: 11px;
color: #000;
text-decoration: none;
padding: 3px 10px;
}
a.menu, a.activeMenu, a.menu:hover, a.activeMenu:hover {
width: 100%;
text-decoration: none;
}


For at få pilen ind, kunne jeg forestille mig, at det måske kunne laves på denne måde:

a.menu, a.menu:link, a.menu:visited {
display: block;
width: 100%;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: bold;
font-size: 11px;
color: #949494;
text-decoration: none;
padding: 3px 10px;
background-repeat: no-repeat;
background-image: url("/images/menumain_inactive.gif");
}
a.menu:hover {
font-weight: bold;
color: #000;
}
.activeMenu {
display: block;
width: 100%;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: bold;
font-size: 11px;
color: #000;
text-decoration: none;
padding: 3px 10px;
background-repeat: no-repeat;
background-image: url("/images/menumain_active.gif");
}
a.menu, a.activeMenu, a.menu:hover, a.activeMenu:hover {
width: 100%;
text-decoration: none;
}


- men det er lidt svært at få rigtigt. Hvordan rykker jeg hhv. grafik og tekst XX antal pixels mod højre, så det står præcist hvor jeg vil have det? Og så pilen er ud for linket, naturligvis.
Avatar billede roenving Novice
21. juni 2005 - 10:30 #1
En tekst i linket vil reagere på padding, så du sætter bare padding-left til at være pilens bredde + pilens padding + ekstra padding efter pilen og placerer baggrunden med background-position: XXpx 0; !-)
Avatar billede roenving Novice
21. juni 2005 - 10:31 #2
-- måske skal du også lege med den lodrette position, men det er jo heller ikke svært !o]
Avatar billede steen_hansen Forsker
22. juni 2005 - 07:17 #3
Hvor er det dog dejligt logisk - når man først får det pointeret :o)

Læg et svar, roenving :)
Avatar billede roenving Novice
23. juni 2005 - 13:05 #4
Velbekomme '-)
Avatar billede roenving Novice
23. juni 2005 - 21:24 #5
-- og tak for point ;~}
Avatar billede steen_hansen Forsker
24. juli 2005 - 16:52 #6
Lille tillægsspørgsmål: Hvordan højrejusterer jeg pilen?

a.menu, a.menu:link, a.menu:visited {
display: block;
width: 166px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: normal;
font-size: 11px;
color: #000;
text-decoration: none;
padding: 4px 0px 4px 10px;
background-repeat: no-repeat;
background-position: 150px 0px;
background-image: url("/images/menu/arrow_nosub.gif");
}
Avatar billede roenving Novice
24. juli 2005 - 17:00 #7
background: url("/images/menu/arrow_nosub.gif") no-repeat right;
Avatar billede steen_hansen Forsker
24. juli 2005 - 17:04 #8
Fedest. Til aller-aller-aller sidst: 10px fra højre kant?
Avatar billede roenving Novice
24. juli 2005 - 17:06 #9
Lav dit billede 10px bredere !-)
Avatar billede steen_hansen Forsker
24. juli 2005 - 17:10 #10
Ok. jeg forøger canvas-bredden :)

Tak igen, roenving. Får lært en masse om CSS i denne omgang :)
Avatar billede steen_hansen Forsker
24. juli 2005 - 19:10 #11
Når man lægger baggrunden ind i CSS sammen med link-styles, så blinker baggrunden også ved hover. Jeg har forsøgt at lægge baggrunden ind i <td> istedet, men så forsvinder det helt (include.dk, håber ikke der er for mange der følger med). Er det ikke en måde at omgå det på?
Avatar billede steen_hansen Forsker
24. juli 2005 - 21:16 #12
Håber du ser det her. Det er godt kun i MSIE, men det er irriterende at se på.
Avatar billede roenving Novice
24. juli 2005 - 21:22 #13
-- IE vil altid forsøge at hente grafik-elementer, hvis de på noget tidspunkt skal skiftes, eller er en del af en type property, som skal ændres ...

-- når den så finder ud af, at serveren ikke har en nyere udgave, vil den alligevel nå at blinke, ligesom meddelelsen i status-baren om at den henter grafikstumpen også aktiveres !-)

-- hvis du kigger på store sites som f.eks. tv2 eller dr, vil du opleve det samme i IE, mens baggrunds-grafikken er klippefast i f.eks. Mozilla ...

-- altså er rådet: Brug ikke IE !o]
Avatar billede steen_hansen Forsker
24. juli 2005 - 21:28 #14
Hørt! Men der er desværre ikke udsigt til, at M$ opper sig, eller at brugerne vil skifte til andre browsere - selvom der nok er en mindre flugt fra den i disse dage. Så ignorere MSIE kan man nok ikke helt. Men man kan jo håbe ... :o)
Avatar billede roenving Novice
24. juli 2005 - 21:37 #15
Avatar billede steen_hansen Forsker
24. juli 2005 - 21:52 #16
hehe! Jeg mener MSIE havde 94-95-96% af markedsandelene på et tidspunkt. Det er da trods alt på retur. Selvom MSIE stadig er dominerende, så tror jeg M$ er pisket til at oppe sig. Den glider nok aldrig ud, men de vil tabe større markedsandele end de bryder sig om. Så jeg håber virkelig de enten opper sig, eller dropper den helt.

Hvordan går det egentlig med Windows LongHorn? Har du hørt om MSIE skulle udkomme i ligeså forbedret en udgave, eller ...?
Avatar billede roenving Novice
24. juli 2005 - 21:55 #17
Rent faktisk lyder den melding, jeg oprindeligt har hørt, at IE7 først ville komme sammen med Longhorn, men senere har jeg hørt antydninger af, at der skulle komme en ny IE før Longhorn !-)
Avatar billede steen_hansen Forsker
24. juli 2005 - 21:58 #18
Ok. Med Longhorn ville M$ jo slå et slag for sikkerheden. Har du hørt noget om intentionerne med IE7? Det KUNNE jo være, at de også havde satset lidt på at være omhyggelige denne gang :oD
Avatar billede roenving Novice
24. juli 2005 - 22:05 #19
Som jeg har forstået det, er intentionen at skrive en ny renderingsmaskine (den nuværende er jo den, som blev skrevet til IE4 !-), og det skulle også være meningen at konforme mere eller mindre til css3 (css2 er jo af M$ blevet betegnet som ikke en standard, men et arbejdspapir, hvilket alle rekommendationer vel er !-)
Avatar billede steen_hansen Forsker
24. juli 2005 - 22:14 #20
Ja. M$ indgik (som jeg har forstået det) selv i samarbejdet med W3C, men trådte så også ud af det igen? Jeg kan ikke huske det nøjagtige forløb, men det går jo nok stærkere, hvis man ikke er hæmmet af standarder/arbejdspapirer :)

Noget helt andet: Hvilke browsere plejer du at teste i? Jeg går ud fra, at den valide kode virker lige så godt i andre browsere på Mac også?

Normalt skeler jeg ikke til Mac, men vi har nogle på arbejdet, som benytter Mac til tryksager etc. Bl.a. chefen, og han er sq krævende! Jeg har sagt, at han skal droppe den Mac, for han har ikke Mac'en for funktionernes og grafikens skyld, men fordi den ser godt ud på hans skrivebord. :oD
Avatar billede roenving Novice
24. juli 2005 - 22:29 #21
Jeg bruger Stone's webwriter til at skrive kode i, og dens indbyggede renderings-maskine (som ikke er indbygget, men alligevel er anderledes end den IE6, som ellers er installeret !-) er en IE-klon af en slags, derfor kigger jeg først på tingene i IE, men min Mozilla er som regel åben for et hurtigt cross-browser-blik på tingen ...

-- skal det være mere krævende må jeg ud i byen og finde et sted at hoste og teste!-)

-- og den væsentligste spiller i w3c er uden tvivl M$, men det behøver jo ikke at betyde, at de forfølger rekommendationerne, for w3c udsteder ikke standarder, men anbefalinger, hvilket ikke usandsynligt er et af de krav M$ har for at deltage i arbejdet ...

-- men uden tvivl lægger M$ mange arbejdstimer i det !o]
Avatar billede steen_hansen Forsker
24. juli 2005 - 22:36 #22
Ok :)

På et tidspunkt opretter jeg et spørgsmål, hvor jeg gerne vil have gået mit CSS igennem, for godt nok ser det rigtigt ud, men jeg tror der er rigtig mange uhensigtsmæssigheder og meget dobbelt konfetti. Jeg har eksperimenteret frem og tilbage og ødelagt det hele masser af gange, så det kniber efterhånden med overblikket. Er det ok at gøre dig opmærksom på spørgsmålet i f.eks. denne tråd? Jeg vil meget gerne have en sagkyndig med :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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