Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Berdia 45 posts 67 karma points
    Feb 15, 2011 @ 19:20
    Berdia
    0

    Breadcrumb macro styling.

    Hi,

    I have created a breadcrumb macro from XSLT which as I understand is a default breadcrumb. Has anyone use CSS style on it.

    It is frozen in one place and is not possible to move it to the edge of the screen to the left.

    Has anyone experience anything like that?

     

    Thank you.

  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Feb 15, 2011 @ 19:44
    Lee Kelleher
    1

    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.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Feb 15, 2011 @ 21:27
    Jan Skovgaard
    0

    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

  • Berdia 45 posts 67 karma points
    Feb 16, 2011 @ 00:07
    Berdia
    0

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

    <div id="bmain"><ul><li>Home</li></ul></div>
    It really gives me hard time to properly align it on the left.
    Thank you!
  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Feb 16, 2011 @ 00:18
    Jan Skovgaard
    0

    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Feb 16, 2011 @ 00:20
    Jan Skovgaard
    0

    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

  • Berdia 45 posts 67 karma points
    Feb 16, 2011 @ 00:38
    Berdia
    0

    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.

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Feb 16, 2011 @ 08:34
    Jan Skovgaard
    0

    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

  • Berdia 45 posts 67 karma points
    Feb 16, 2011 @ 10:49
    Berdia
    0

    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Feb 16, 2011 @ 10:52
    Jan Skovgaard
    0

    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

  • Berdia 45 posts 67 karma points
    Feb 16, 2011 @ 12:00
    Berdia
    0

    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

     

  • Berdia 45 posts 67 karma points
    Feb 17, 2011 @ 12:28
    Berdia
    0

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

     

Please Sign in or register to post replies

Write your reply to:

Draft