Notifikationer

Markér alle som læst Log ud

steen_hansen Forsker

22. maj 2005 - 22:43 Der er 29 kommentarer og
1 løsning

border-bottom og background-image

Normalt, når man vil benytte en sort linie i bunden af en celle i en tabel, kan man bruge

<td style="border-bottom: 1px solid black;">

Hvad så, hvis jeg vil adskille menupunkter fra hinanden v.hj.a. et delvist transparent GIF-billede (det er lavet som små prikker) 1px høj? Jeg har prøvet forskellige ting, og umiddelbart ville jeg tro, at det skal være noget i retning af:

<td style="border-bottom: 1px background-image: url('/images/dottedline.gif');"

... men den går selvsagt ikke. Jeg har indtil nu lavet det med en celle, der er 1px i højden:

<tr>
<td style="width: 100%;" class="dot"></td>
</tr>

CSS:
.dot {
height: 1px;
background-image: url('/images/dotted_line.gif');
}

Det virker jo fint, men det ville jo spare plads og være en del smartere, hvis jeg kan lægge den ind i bunden af den celle, hvor menupunktet er i.

Synes godt om

steen_hansen Forsker

22. maj 2005 - 22:50 #1

<tr>
<td style="width: 100%;" class="dot"></td>
</tr>
<tr>
<td align="left" style="width: 100%;" class="menu"><a href="#">Link</a></td>
</tr>
<tr>
<td style="width: 100%;" class="dot"></td>
</tr>

....................

Kan det ikke laves om?

<tr>
<td align="left" style="width: 100%; border-bottom.........;" class="menu"><a href="#">Link</a></td>
</tr>

- så jeg sparer 2 stk.

<tr>
<td style="width: 100%;" class="dot"></td>
</tr>

Synes godt om

wormsk8 Nybegynder

22. maj 2005 - 22:56 #2

<html>

<tr>
<td align="left" class="menu"><a href="#">Link</a></td>
</tr>

</html>

<css>
.menu {
background-image: url('/images/dotted_line.gif') bottom y-repeat;
}

</css>

Hvis jeg har forstået din spørgsmål rigtigt.

Synes godt om

steen_hansen Forsker

22. maj 2005 - 23:02 #3

Det virker ikke, wormsk8 :/ Hvad med den ene px i højden, den skal ikke amgives i CSS?

Synes godt om

steen_hansen Forsker

22. maj 2005 - 23:03 #4

Mit CSS:

a.menu, a.menu:link, a.menu:visited {
display: block;
width: 100%;
background-image: url('/images/dotted_line.gif') bottom y-repeat;
font-family: verdana, helvetica, tahoma, arial;
font-weight: bold;
font-size: 11px;
color: #949494;
text-decoration: none;
padding: 3px 10px;
}

Synes godt om

wormsk8 Nybegynder

22. maj 2005 - 23:12 #5

Er det på dine links du vil have det, eller den boks hvor link er i?

Du kan også bruge bottom-border: dotted 1px #000

Synes godt om

steen_hansen Forsker

22. maj 2005 - 23:15 #6

Det er cellen, hvori linket er.

Synes godt om

steen_hansen Forsker

22. maj 2005 - 23:17 #7

Lige den metode (border-bottom: dotted 1px #000;) bliver for voldsom. Jeg har lavet en fin, stiplet linie til formålet (GIF'en).

Synes godt om

wormsk8 Nybegynder

23. maj 2005 - 01:09 #8

Min css og table burde virke.. Tjekket at du har angivet den rigtige sti til dotte_line.gif?

Synes godt om

steen_hansen Forsker

23. maj 2005 - 07:02 #9

Den er helt korrekt, men det virker ikke. Har du efterprøvet det selv?

Synes godt om

wormsk8 Nybegynder

23. maj 2005 - 11:50 #10

Nej, men burde virke.

Synes godt om

steen_hansen Forsker

23. maj 2005 - 20:55 #11

Ok. Men jeg er så ked af at sige, at det ikke virker :/

Du har ikke andre forslag?

Synes godt om

olebole Juniormester

23. maj 2005 - 20:59 #12

<ole>

Mon det var mit stikord, Steen? :)
Umiddelbart kan jeg ikke se problemer i det, men jeg laver lige et eksempel til dig ... brb ;o)

/mvh
</bole>

Synes godt om

olebole Juniormester

23. maj 2005 - 21:20 #13

Jeg ved godt, minde dots er lidt store - men det ændrer ikke på det principielle i problemet:
http://tjenester.dk/x-codes.dk/eksperten/steen/

Synes godt om

steen_hansen Forsker

23. maj 2005 - 21:53 #14

olebole, det er jo perfekt :) Kan jeg ikke bare anvende mit eget billede på 1px i højden istedet, eller vil border-bottom altid være 3 px i højden?

Synes godt om

steen_hansen Forsker

23. maj 2005 - 21:58 #15

olebole, det virker jo?! Hvordan kunne jeg betvivle det? :)

Smid et svar, og du skal blive forgyldt :)

Synes godt om

olebole Juniormester

23. maj 2005 - 21:58 #16

Nej, du kan sagtens bruge et bille med en højde på 1px. Jeg lægger det som baggrundsbillede i cellen og lægger den ned i bunden med:
style="background:url(dot_line.gif) repeat-x bottom center;"

- så ikke noget med 'border-bottom' ;o)

I virkeligheden behøvede jeg blot at skrive:
style="background:url(dot_line.gif) repeat-x bottom"

- jeg ved ikke, hvorfor jeg fik 'center' med. Den er ikke nødvendig :)

Synes godt om

wormsk8 Nybegynder

23. maj 2005 - 21:59 #17

Du kan sagtens bruge dit eget billede - intet problem . Han har brugt mit - bare på en anden måde.

style="_____"

i stedet for <style> { _____________ } </style>.

Så du må ha lavet en fejl, hvis mit ikke virkede. ;)

Synes godt om

olebole Juniormester

23. maj 2005 - 22:03 #18

wormsk8 >> Nej, den er ikke 'dit' - men mit, jeg har brugt.
- og ja, jeg har gjort det på en anden måde ... f.eks. ladet stregen være vandret, som efterspurgt. Fejlen er ikke Steens, men din ;o)

Steen >> *griiiiiib* ;o)

Synes godt om

steen_hansen Forsker

23. maj 2005 - 22:05 #19

Bedste ven, endnu en gang tak. Det er jo blevet en behagelig vane :oD

wormsk8, tak for indsatsen, men det var olebole, der leverede varen.

Synes godt om

wormsk8 Nybegynder

23. maj 2005 - 22:10 #20

Hm, lige fundet fejlen i mit eget. Skulle jeg mene.

a.menu, a.menu:link, a.menu:visited {
display: block;
width: 100%;
background-image: url('/images/dotted_line.gif') bottom repeat-x; /* ikke y-repeat */
font-family: verdana, helvetica, tahoma, arial;
font-weight: bold;
font-size: 11px;
color: #949494;
text-decoration: none;
padding: 3px 10px;

burde også virke.

Synes godt om

wormsk8 Nybegynder

23. maj 2005 - 22:10 #21

Men må nok indrømme, jeg ikke leverede varen - ja. ;)

Synes godt om

olebole Juniormester

23. maj 2005 - 22:10 #22

Selvtak, min bedsteste ven ;D

wormsk8 >> For lige at få det på det rene er fejlene i din kode følgende:
1. Vil du bruge en shothand for baggrunden, kan du ikke bruge 'background-image' - men skal bruge 'background'.
2. Der er ikke noget, der hedder 'y-repeat' - det hedder 'repeat-y' ... og så var det i øvrigt 'repeat-x', der skulle bruges

Synes godt om

olebole Juniormester

23. maj 2005 - 22:14 #23

PS: Når vi engang får glæde af CSS3, kan man i øvrigt sætte billeder på borders ... det bliver dejligt :)

Synes godt om

wormsk8 Nybegynder

23. maj 2005 - 22:19 #24

olebole, før du jorde mig for meget. ;)

Havde fundet ud af fejl nummer 2.

Vidste ærlig talt ikke det med fejl 1, men når det så er rettet, burde det da virke!? :d

Synes godt om

steen_hansen Forsker

23. maj 2005 - 22:31 #25

Lige et tillægsspørgsmål:

Jeg kan næsten regne ud, repeat-x bare fortsætter ud ad x-aksen, og repeat-y op ad y-aksen? Uanset hvad, så er der blevet kortet betydeligt ned i mit HTML, og det er j oogså noget af det, som CSS bør bruges til. Det er altid fedt, når der bliver skåret noget unødvendigt væk :)

Synes godt om

wormsk8 Nybegynder

23. maj 2005 - 22:38 #26

Hvad er spørgsmålet så? :D

Du har ret i at repaet-x kun forsætter af x-aksen og y af y-aksen. :D

Synes godt om

olebole Juniormester

23. maj 2005 - 22:50 #27

- og 'repeat' gør det begge veje ... 'no-repeat' må du selv gætte ;D

Når HTML og CSS bruges fornuftigt, er det en rigtig god kombination, der giver slankere kode og langt bedre overblik.

Når det bruges forkert og/eller uhensigtsmæssigt, kan det gå lige modsat - og det synes desværre at være en trend for tiden.
Gode eksempler på det er den omsiggribende tabel-o-fobi, der savner substantiel begrundelse i den virkelige verden ... eller det faktum, at et site som www.csszengarden.com har opnået kultstatus - på trods af, at folkene bag ikke har forstået meningen med CSS :)

Synes godt om

steen_hansen Forsker

23. maj 2005 - 23:13 #28

Fedest, ole. Det er utroligt lærerigt at læse dine indlæg, du skriver godt nok, så man kan forstå det :)

Jeg har et andet, irriterende problem, og jeg har ikke engang har lagt mærke til hvornår det er opstået: Når jeg holder musen over det øverste link i menuen (og kun det øverste), får jeg pludselig en underline på, og det burde det da ikke med dette CSS?

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

Jeg skal nok oprette nogle point :)

Synes godt om

steen_hansen Forsker

23. maj 2005 - 23:18 #29

Ah, det er ved activeMenu denne underline kommer. Hvordan sætter man 2 text-decoration ind?

Synes godt om

steen_hansen Forsker

23. maj 2005 - 23:21 #30

Sorry, jeg satte bare text-decoration til none. Ingen problemer alligevel :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS