HULP Gevraagd - Volgorde menu aanpassing

[isylvio]

Ik zou de volgorde van mijn menu graag doorlopend naast elkaar willen krijgen.

zoals:

Home Creative Portraits
Stills About Exhibitions
Contact ECT ECT

Kan iemand me hiermee helpen??


Ik zelf heb de volgende staan in mijn html:

<div id="menu">
      <ul>
          <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
      <li><span class="current">Home</span></li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
      <li><a href="creative.html" target="">Creative</a></li>
      <li><a href="portraits.html" target="">Portraits</a></li>
      <li><a href="stills.html" target="">Stills</a></li>
        <li>&nbsp;</li>
  `      <li>&nbsp;</li>
      <li><a href="about.html" target="">About</a></li>
      <li><a href="exhibitions.html" target="">Exhibitions</a></li>
      <li><a href="contact.html" target="">Contact</a></li>
        <li>&nbsp;</li>
      </ul>
   </div>

En in mijn css:

#menu {
   position:relative;
   left:20px;
   top:475px;
   float:left;
   display:inline;
   width:195px;
   height:250px;
   font-family: myFirstFont;
   font-size: 3px;
}

Alvast bedankt!

 

[Sjambal]

Ik ken dit menuutje van Brainjar.com ik denk dat je het best daar gewoon de tutorial doorleest als je wil begrijpen hoe HTML, JavaScript en CSS samenwerken in deze.
De informatie die je hier geeft is veels te weinig om te snappen wat er mis gaat, een paar screenshots van hoe het nu mis gaat zou helpen.

 

[csshunter]

Hoi isylvio,
De breedte van het blokje geef je op in de <div> waar het <ul>-lijstje in zit.
De list-items krijg je horizontaal met {display:inline;} voor de <li>'s zelf, en niet voor de menu-div of de <ul> (de display-eigenschappen worden niet geërfd maar gelden alleen voor het element van dienst).
De list-items mogen niet verder dan de breedte van de omvattende div, dus wat er niet op past gaat naar de volgende regel.
Klaar!

Uitgewerkt:

<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Creative</a></li>
		<li><a href="#">Portraits</a></li>
		<li><a href="#">Stills</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Exhibitions</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Contract</a></li>
	</ul>
</div>

Met als css bv.:

#menu {
	width: 200px;
	margin: 100px 0 0 100px;
	background: #EAEAEA;
	}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .85em;
	}
#menu li {
	margin: 0;
	padding: 0;
	display: inline;
	font-weight: bold;
	line-height: 160%;
	}
#menu a {
	padding: 0 5px;
	color: #808080;
	text-decoration: none;
	}
#menu a:hover,
#menu a:focus {
	text-decoration: underline;
	color: #404040;
	}

• Test: menu-hor-vert.htm

Met vriendelijke groet,
CSShunter
_______
PS: Ik zie bijzonder weinig (lees: totaal geen) gelijkenis met het brainjar-menu, want daar gaat het o.a. om dropdowns en toepassing van javascript. In dit geval komt er helemaal geen javascript aan te pas.
En voor mij was de info die je gaf duidelijk en voldoende. Als ik het mis had, hoor ik het wel.

 

[isylvio]

Ik ken dit menuutje van Brainjar.com ik denk dat je het best daar gewoon de tutorial doorleest als je wil begrijpen hoe HTML, JavaScript en CSS samenwerken in deze.
De informatie die je hier geeft is veels te weinig om te snappen wat er mis gaat, een paar screenshots van hoe het nu mis gaat zou helpen.

hoe kan ik een screenshot hier posten dan, want die heb ik wel?? maar ik zie dat je alleen een url kan plaatsen en geen image..

want ik bedoel dus geen brainjar.com menu, want dat is een uitklapmenu...

ik wil dus dat ieder woord clickable is en dat je dan naar een andere pagina gaat

 

[isylvio]

Hoi isylvio,
De breedte van het blokje geef je op in de <div> waar het <ul>-lijstje in zit.
De list-items krijg je horizontaal met {display:inline;} voor de <li>'s zelf, en niet voor de menu-div of de <ul> (de display-eigenschappen worden niet geërfd maar gelden alleen voor het element van dienst).
De list-items mogen niet verder dan de breedte van de omvattende div, dus wat er niet op past gaat naar de volgende regel.
Klaar!

Uitgewerkt:

<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Creative</a></li>
		<li><a href="#">Portraits</a></li>
		<li><a href="#">Stills</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Exhibitions</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Contract</a></li>
	</ul>
</div>

Met als css bv.:

#menu {
	width: 200px;
	margin: 100px 0 0 100px;
	background: #EAEAEA;
	}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .85em;
	}
#menu li {
	margin: 0;
	padding: 0;
	display: inline;
	font-weight: bold;
	line-height: 160%;
	}
#menu a {
	padding: 0 5px;
	color: #808080;
	text-decoration: none;
	}
#menu a:hover,
#menu a:focus {
	text-decoration: underline;
	color: #404040;
	}

• Test: menu-hor-vert.htm

Met vriendelijke groet,
CSShunter
_______
PS: Ik zie bijzonder weinig (lees: totaal geen) gelijkenis met het brainjar-menu, want daar gaat het o.a. om dropdowns en toepassing van javascript. In dit geval komt er helemaal geen javascript aan te pas.
En voor mij was de info die je gaf duidelijk en voldoende. Als ik het mis had, hoor ik het wel.

Jij hebt mij inderdaad goed begrepen dit is wel wat ik ongeveer bedoelde

Als ik jouw codes gebruik in een leeg html en css bestand, dan krijg ik de links toch gewoon onder elkaar

[EDIT] Het is me gelukt [/EDIT]