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

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):

Code:

---

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

---

CSS:

Code:

---

.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 :)

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?

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.

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; }

best option for horizontal is to use:

Code:

---

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

Code:

---

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

---