Hi Berdia,

What CSS do you have so far?  If you are working from a pre-built HTML template, then it might be easier to tweak the XSLT to match it?

The default Breadcrumbs XSLT will give you a standard unordered-list (<ul>) - which you can style however you like.

Quick example...

ul {float: left;}
ul li {float: left; border-right: solid 1px red; padding: 0 5px; margin-right: 5px;}
ul li:last-child {border-right: 0;}

Difficult to suggest an exact solution without knowing more about your current CSS and HTML templates.

Cheers, Lee.

Hi Berdia

As Lee is saying please provide is with more of your HTML and CSS code.

You need to make sure that the CSS is in fact matching anything in your HTML and that the selector rule you write is specific enough otherwise it will not have any effect if there is something earlier in your CSS that is already defining the style.

/Jan

Hi,

Thank you for your quick reply. Here is my CSS for breadcrumb:

#bmain ul li
{
    padding: 0px;
    background-color: Gray;
    line-height: 1.35em;
    display: block;
    text-decoration: none;
    list-style: none;
    white-space: nowrap;
    float: left;
   
}

Hi Berdia

Is it possible for you to throw an URL for the site or are you working on it locally? It's a bit hard to figure out why exactly you can't align the menu to the left. Perhaps there's something else floating left into that space as well?

/Jan

Hi Berdia

I must be a little tired...

You mean you want to move the entire unordered list left, right? have you tried to float the containing div to the left?

Like this

#bmain{float:left}

I would stille be very happy if it's possible to see the site you're working on since it's like searching for a needle in a haystack like this :-)

/Jan

Jan,

All I want to do is align it to the left. I tried to float it but it did not work.

Please feel free to check URL http://www.centigen.co.uk/home.aspx

Currently it is just a test I am working on to become learn more about Umbraco.

I most appreciate your help.

Hi Berdia

Now it makes a bit more sense to me why you can manage to make you breadcrumb appear beneath you menu and place it on the left.

There are some issues you need to take care of.

Your menu looks like this at the moment

<div id="menu">
<ul id="menu"><li><a href="/home.aspx">Home</a></li></ul><ul id="menu"><li><a href="/about-us.aspx">About us</a></li></ul><ul id="menu"><li><a href="/product.aspx">Product</a></li></ul>
</div>

And id is supossed to be unique and must not be reused on other elements within the same HTML page. Therefore you should change the id name on your ul or consider using a class instead dependent on how you want to style your stuff. In this case I can't see why you would need to add an id or a class to your <ul> since you can always reference it by using the #menu id as the selector to style <ul> and <li>

Second thing I don't suppose you want to generate a list for each link in your menu? One list should be enough. I'm guessing you make use of a for-each loop in your XSLT to get the links out...in this file you need to place the <ul> and </ul> outside of the for-each statement. When you do this you'll have a menu that looks like this

<div id="menu">
<ul><li><a href="/home.aspx">Home</a></li><li><a href="/about-us.aspx">About us</a></li><li><a href="/product.aspx">Product</a></li></ul>
</div>

Now for the styling for your #menu should look like this:

#menu{
float:left;
padding:4px;
width:100%; /*this makes sure nothing can be placed in the space to to right of the menu*/
}

Your menu ul should look like this

#menu{float:left;margin:0;padding:0;list-style-type:none}

And your #bmain should look like this

#bmain{float:left}

Finally your #bmain ul should look something like this

#bmain ul{margin:0;padding0}

This should do the trick for you. I think you should perhaps consider learning a bit more about HTML and CSS and how you could benefit from a reset style-sheet etc.

I hope this helps you.

/Jan

Jan,

Thank you for your reply. I am well aware that class ID must be unique. I must have missed it when I was building menu as I changed it several times. I appreciate you noticing it!! :)

"Second thing I don't suppose you want to generate a list for each link in your menu? One list should be enough. I'm guessing you make use of a for-each loop in your XSLT to get the links out...in this file you need to place the <ul> and </ul> outside of the for-each statement."-excellent point and I will definitely consider it.

I am still very new to Umbraco, newer than HTML and CSS so I still need to learn a lot about it.

As always, appreciate your help.

Berdia

Hi Berdia

That's perfectly ok - and please don't hesitate to ask further questions. We're all here to help :-)

Happy that you can use my pointers.

/Jan

It is done. All is perfect. Thank you.

One more question based what you told me to do regarding ul:

"Second thing I don't suppose you want to generate a list for each link in your menu? One list should be enough. I'm guessing you make use of a for-each loop in your XSLT to get the links out...in this file you need to place the <ul> and </ul> outside of the for-each statement".

I did that and it is working ok but now I have created a child object under Product menu (Product-Coins) which is not showing as a drop-down in the menu. I presume that is happening because of <ul> outside for-each statement now.  

In this case how can I make sure that child object is included in the menu and shows up? If you know what I mean.

Thank you very much.

Berdia

I still need help on my last question regarding <ul> in breadcrumb XSLT. Could somebody help me please? Thank you.

is working on a reply...