Vertikalt streck mellan länkar ?

Tråden skapades och har fått 4 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Alingsås
  • 2009-07-28 20:15

Hej
HELT ! ny på HTML så ni vet.
Men jag har en div som jag använder som header och en bakgrundsfärg.
I övre vänstra hörnet har jag en liten bild som även fungerar som länk.
Till höger om den bilden har jag 4 st länkar i form av text.

Dock skulle jag vilja få ett vertikalt streck mellan länkarna för utseendet skull.
Lägger jag in | som är tecknet för ett sånt streck ballar allt ur.

Skulle även vilja trycka ihop länkarna lite så det inte är så stort mellan rum.

div.header{
float: left;
left: 150px;
width: 100%;
height: 100px;
background-color: #9966CC;}

a.lank1 { color: black; font-family: tahoma; text-decoration: none; float: right; padding: 35px 55px 20px 60px; }
a.lank1:link { }
a.lank1:hover { color:#FF0000; text-decoration: underline;}
a.lank1:active { }
a.lank1:visited { }

<a href="http://www.google.com/">
<img src="logo.gif" alt="Forsta sidan"
style="border: none"></a>
<a class="lank1" href="http://www.telia.se">test4</a>|
<a class="lank1" href="http://www.telia.se">test3</a>
<a class="lank1" href="http://www.telia.se">test2</a>
<a class="lank1" href="http://www.telia.se">test1</a>
</div>

Här e lite av koden, så det finns annat i mellan ! !
Tacksam för hjälp

lägg in border-left: 1px solid #000; i a.lank1 om du ändrar padding:en så ändrar sig avståndet. padding ställs in som margin med: top höger ner vänster; en rekomendation är bara använda en liten padding, ca 2px och göra resten av avståndet med margin. Då blir inte så stor yta klickbar.

//Hoppas det hjälpte lite

  • Medlem
  • Alingsås
  • 2009-07-28 21:22

Nästan !
Det blir som på första bilden, vill dock att den skall se ut som andra bilden

okej. Tänk så här. Paddingen till höger säger hur långt det ska vara mellan länk och streck. marginal vänster säger hur långt det ska vara mellan länk och föregående streck till vänster.
För ditt exempel ser detta ut att passa:

padding: 2px 6px 2px 6px; eller padding: 2px 6px; //detta är samma sak bara lite mindre kod.
margin: 30px 6px 0 6px; eller margin: 30px 6px 0;

Prova på

läs mer här:
CSS Padding
CSS Margin

  • Medlem
  • Alingsås
  • 2009-07-29 17:16

ja jag har fått nått så när rätt på det
Skapade dock TVÅ a.link klasser, en MED strecket och en UTAN. Eftersom jag inte vill ha strecket efter sista länken

Tusen tack för hjälpen ! ! !

1
Bevaka tråden