[Solved]Horizontal Navigation *Not what you think!*

[taladude]

Hello Contao Community. I have recently set up my own website using the Contao CMS, and I ran into a little problem. I need to somehow make a horizontal navigation menu. The problem is that I just need good old fashioned links. I do not need a fancy javascript menu; just links will do. I have searched the forums and found nothing on this. The problem when I try to do it with custom css is that instead of this:

Link | Link | Link

I get this:

Link
|
Link
|
Link

My code is as follows:

Custom HTML (Note: The links are not set up yet):

<div class="headNav" >
Warenkorb <pre> | </pre>
ZahlungsundVersandbedingungen <pre> | </pre>
AGB <pre> | </pre>
Kontakt
</div>

CSS:

.headNav
{
	width:500px;
	float:right;
	margin:10px 0;
	text-align:right;
}

Can somebody help me with this issue? I really need to finish the site and this is pretty much my only obstacle.
Thank you very much

[imported_Nina]

Welcome taladude

Your problem is the usage of <pre> because this HTML-element forces a new line.

So just delete the <pre> and it will work. Though I wonder, why you use a "Custom HTML"-module instead of a navigation-module?

[taladude]

Nina, thank you very much for responding :D doing what you said did the trick . I now have the layout that I need. I didn't use the default menu because it is vertical. I understand that I could've edited the template, but I was short on time and I don't really know PHP . But my problem is solved now, so thank you again . Maybe later I will learn some PHP.

[Vera]

Just in case anybody finds this thread:

The original contao menu is not vertical; it is displayed vertical when not styled as it html default. :roll:

Solve it using css. One option looks like: li { display: inline; }

[thyon]

best option for horizontal is to use:

ul li,ul li,ul li a,ul li span.active { display:inline-block;}
ul li a,,ul li span.active { padding: 3px 5px;}

Then you just need a fix for IE7 (which doesn't support inline-block, but inline)
IE7 conditional stylesheet

ul li,ul li,ul li a,ul li span.active { display:inline;}