luft imellem menupunkter

Det kan du gøre ved at adskille dine links med transparente billeder:

<div class="menu">
    <a href=" class="menu">Menu 1</a><img src="ettransparentbilledederfylder1x1pixel.gif" width="10" height="1" alt="" />
    <a href=" class="menu">Menu 2</a><img src="ettransparentbilledederfylder1x1pixel.gif" width="10" height="1" alt="" />
    <a href=" class="menu">Menu 3</a>
</div>

Hvad med:

<br><br>

?

pesa, jeg prøver det lige :)
woowii >> det laver jo linieskift.

kan man ikke lave noget padding istedet for billedet?

WWC: Hvad så med nogle mellemrum ? Eller skrive noget med baggrundens farve ? :P

Ej, CSS ville vel være det bedste...

Men det transparente billede er nok den bedste idé... havde ikke læst dit spørgsmål ordentligt, så troede bare at du ville have linjeskiftet... DOH :P

Det var dog utroligt som jeg glemmer at skrive ting...

Jeg har faktisk en Top-Drop-Down-Menu (*lol*) programmeret i dHTML liggende klar til brug, hvis det var noget...

Tror at det var det sidste..

//WoWi

men HVORDAN woowii???

hvorfor ikke?
la' mig se på det

uups, den der med HVORDAN omhandler ikke din sidste kommentar :)

Første menu:

<HTML>

<head>
<title>Drop down menu</title>

<script>

if (document.layers) {
  visible = 'show';
  hidden = 'hide';
} else if (document.all) {
  visible = 'visible';
  hidden = 'hidden';
}

function reveal(menu, parent) {
  if (document.layers) {
    Menu = document.layers[menu];
  } else if (document.all) {
    Menu = document.all(menu).style;
  }
  if (Menu.visibility == visible) {
    Menu.visibility = hidden;
  } else {
    Menu.visibility = visible;
  }
  lastMenu = Menu;
}

var lastItem = 'aaron';

</script>

<style>
A {text-decoration: none}
#menuBar {position: absolute; left: 0; top: 0; width: 100%; height: 20px; border: 1px solid blue; background-color: blue; layer-background-color: blue}

.Menu1 {position: absolute; width: 100px; height: 20px; border: 1px solid blue; layer-background-color: blue; top: 0; left: 22px;}
.mereMenu1 {position: absolute; width: 100px; border: 1px solid red; background-color: red; layer-background-color: red; visibility: hidden; top: 20px; left: 22px;}
.Menu2 {position: absolute; width: 100px; height: 20px; border: 1px solid blue; layer-background-color: blue; top: 0; left: 500;}
.mereMenu2 {position: absolute; width: 100px; border: 1px solid red; background-color: red; layer-background-color: red; visibility: hidden; top: 20px; left: 500px;}
.itemAnchor {font-family: Verdana; font-size: 12px; color: black; text-decoration: none}
#menu1 {position: absolute; left: 22px;}
#menu2 {position: absolute; left: 500px;}

</style>

</head>

<body>

<span class="itemAnchor"></span>
<div id="menuBar">
</div>

<div id="drop1" class="Menu1"><a href="#" class="itemAnchor"onclick="java script: reveal('menu1'); return false;"><font color="white">WoWi</font></a></div>

<div id="menu1" class="mereMenu1">
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu1', 'drop1'); return false">Test</a><br>
</div>

<div id="drop2" class="Menu2"><a href="#" class="itemAnchor"onclick="java script: reveal('menu2'); return false;"><font color="white">Tjoo</font></a></div>

<div id="menu2" class="meremenu2">
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
  <a href="#" class="itemAnchor" onclick="reveal('menu2', 'drop2'); return false">Tests</a><br>
</div>
<br>


hghj

</body>

</HTML>




2. menu:


<HTML>
<head>
<STYLE>
p          {color: FF0000;}
.barItem    {cursor: hand; color: ff0000;}
.barItem:hover {cursor: hand; color: FF0000;}
a.          {cursor: hand; text-decoration: none; }
a:active    {cursor: hand; color; 000000;}
a:hover    {curser: hand; color: FFFFFF;}
a.cc:hover  {cursor: hand; color: FFFFFF; text-decoration: none; }
.box        {position: absolute ; background:rgb(100,100,100)}
</STYLE>
</head>

<body class="closeIt" bgcolor="#000000" text="#FF0000" link="#FF0000" vlink="#FF0000" alink="#FF0000">

<!----------- Menu Start ----------->

<table border="1" cellpadding="0" cellspacing="0" width="882" bgcolor="#000000" height="20" align="center">
<tr>
<td align="left" nowrap valign="middle" width="126">&nbsp;&nbsp;<FONT SIZE="3" FACE="Arial Black" color="#FF0000">Menu:</FONT></td>

<td align="left" nowrap valign="top" width="126">
<font color="#FF0000"><a id="item1" class=barItem> Tekst</a></font> <br>
   
<table id="item1box" class=box style='display:none' bgcolor="#000000">     
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><NOBR><a href='side' target="mini" class="cc" >Tekst</a></NOBR></FONT></td></tr>
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><NOBR><a href='side' target="mini" class="cc" >Tekst</a></NOBR></FONT></td></tr>

    </table>
    </td>

    <!-- Menu Bar Item 2 -->

<td align="left" nowrap valign="top" width="126">
<FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><font color="#FF0000"><a id="item2" class=barItem >Tekst</a></font></FONT> <br>
   
<table id="item2box" class=box style='display:none' bgcolor="#000000" >     
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><NOBR><a href='side' target="mini" class="cc" >Tekst</a></NOBR></FONT></td></tr>
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><NOBR><a href='side' target="mini" class="cc" >Tekst</a></NOBR></FONT></td></tr>
  </table>
  </td>

<!-- Menu Bar Item 3 -->

<td align="left" nowrap valign="top" width="126">
<FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><font color="#FF0000"><a id="item3" class=barItem >Tekst</a></font></FONT> <br>
   
<table id="item3box" class=box style='display:none' bgcolor="#000000" >     
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><a href='side' target="mini" class="cc" >Tekst</a></FONT></td></tr>
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><a href='side' target="mini" class="cc" >Tekst</a></FONT></td></tr>
  </table>
  </td>


    <!-- Menu Bar Item 4 -->

<td align="left" nowrap valign="top" width="126">
<FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><font color="#FF0000"><a id="item4" class=barItem >Tekst</a></font></FONT> <br>
   
<table id="item4box" class=box style='display:none' bgcolor="#000000" >     
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><a href='side' target="mini" class="cc" >Tekst</a></FONT></td></tr>
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><a href='side' target="mini" class="cc" >Tekst</a></FONT></td></tr>
  </table>
  </td>

    <!-- Menu Bar Item 5 -->

<td align="left" nowrap valign="top" width="126">
<FONT SIZE="3" FACE="Westminster, Arial, Helvetica">T<font color="#FF0000"><a id="item5" class=barItem >ekst</a></font></FONT> <br>
   
<table id="item5box" class=box style='display:none' bgcolor="#000000" >     
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><a href='side' target="mini" class="cc" >Tekst</a></FONT></td></tr>
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><a href='side' target="mini" class="cc" >Tekst</a></FONT></td></tr>
  </table>
  </td>
   
    <!-- Menu Bar Item 6 -->

<td align="left" nowrap valign="top" width="126">
<FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><font color="#FF0000"><a id="item6" class=barItem >Tekst</a></font></FONT><br>
   
<table id="item6box" class=box style='display:none' bgcolor="#000000" >     
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><a href='info.htm' target="mini" class="cc" >Tekst</a></FONT></td></tr>
<tr><td bgcolor="#000000"><FONT SIZE="3" FACE="Westminster, Arial, Helvetica"><a href='side' target="mini" class="cc">Tekst</a></FONT></td></tr>
  </table>
  </td>

<!-- End of Menu Bar Items  -->


</tr>
</table>

<script language="JavaScript">

document.onmouseover = openIt
 
function openIt() {
var items = 6 ;
currEl = window.event.toElement
  if (currEl.className == "barItem") {
    newId = currEl.id + "box"
      showBox = document.all(newId)
      showBox.style.display = "block"
      }       
   
  for (i=1; i<=items; i++) {
    openItem="item" + i + "box"
      elOpen = document.all(openItem)
        if ((elOpen.style.display == "block")&&(elOpen != showBox))
          elOpen.style.display = "none"

    if (currEl.className == "closeIt") { elOpen.style.display = "none"  }
  }
}
</script>
<!------- Menu Slut ---------/> -->

<br>
<br>
<br>
<p>Farver osv. kan selvfølgelig ændres, tilføjes bokse (både ned og hen) :)</p>

</body>
</HTML>

Fandt lige ud af, at jeg havde to...
Så skal du bare redigere i den, så den passer til dig :P

nr 2 er fedest :)
men du kan ikke hjælpe mig med mit oprindelige spørgsmål?

Du finder svaret på det oprindelige spørgsmål i den første, der er der mellemrum :) Du skal bare rette lidt i værdierne, så det passer til din side :)

Du kan bruge line-height:

div.menu {
background-color: #F2840E;
position: absolute;
left: 0px;
top: 100px;
width: 100pc;
padding-left: 15px;
line-height: 20px;}

eller 1.2em i stedet for 20px

hvilket svar/kommentar snakker du om???

jeg skal jo ikke have højere menu, men bare have lavet et mellemrum imellem starten og slutningen af hvert link, så det stykke luft rundt om 'menu1' 'menu2' etc. oxo bliver medregnet som lnik :=

Bruger WWC's eksempel igen...

<HTML>
<head>
<style>
.link1 { left: så langt du nu vil have den ind }
.link2 { left: så langt du nu vil have den ind }

</head>
<body>
<!-- Menu -->
<div class="link1">Link her</div>
<div class="link2">Link her</div>
osv.
</body>
</HTML>



Må indrømme at jeg ikke har testet... men går ud fra at det vil virke...

virker ikke :(
er der ikke et tag for tvungne mellemrum???

Prøv at smid:

position; absolute;

ind foran begge dele

virker ikke :(
woowii, vil du give mig en forklaring af din dropdownmenu nr2??
har du evt. ICQ?

72099447 :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
    <TITLE>Harry.dk</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3">
<style>
body {
margin-top: 130px;
}

div.logo {
position: absolute;
top: 10px;
left: 10px;
}

div.menu1 {
background-color: #F2840E;
position: absolute;
left: 0px;
top: 100px;
width: 100pc;
padding-left: 15px;
}

div.menu2 {
background-color: #F2840E;
position: absolute;
left: 200px;
top: 100px;
width: 100pc;
padding-left: 15px;
}

div.menu3 {
background-color: #F2840E;
position: absolute;
left: 500px;
top: 100px;
width: 100pc;
padding-left: 15px;
}

a.menu:hover {

background-color: #FDA94F;
}
</style>
</HEAD>
<BODY>

<div class="logo">
    <img src="logo.jpg">
</div>

<div class="menu1">
    <a href=" class="menu">Menu 1</a>
</div>
<div class="menu2">
    <a href=" class="menu">Menu 2</a>
</div>
<div class="menu3">
    <a href=" class="menu">Menu 3</a>
</div>

</BODY>
</HTML>


Dit eksempel, alt i <style></style> skal ind i dit eksterne CSS dokument !

Hejsa
Hvis du skriver &nbsp; får du et mellemrum. Du kan skrive flere - og mellemrummet bliver større! Hvis du bare vil ha' mellemrum ml. Stop og Motion, men bibeholde link-stregen, kan du putte &nbsp; imellem. Hvis du også vil ha' mellemrum på link-stregen kan det løses sådan:
<div class="menu"> <a href="" id="item1" class="barItem">Stop  </a>&nbsp;<a href="" id="item2" class="barItem"> Motion</a> </div>

Er det mon løsningen?
vh
frida

Nåh ja, nu du får bare vist et mellemrum,  - men du skal altså skrive:
 
& n b s p ;   

- men uden mellemrum!

- og her skal du skrive & n b s p ;
(uden mellemrum) mellem første </a> og næste  <a href....
Sådan:

<div class="menu"> <a href="" id="item1" class="barItem">Stop  </a> & n b s p ; <a href="" id="item1" class="barItem"> Motion</a></div>

& n b s p betyder tvungent mellemrum?
hvis det gør så for du pointene når jeg kommer hjem fra skole ;)

Nåh - virker det?
vh frida