Correction footer navigation - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Correction footer navigation

  • Correction footer navigation
  • 255583_baxkgroundFooter.jpg
    hello guys,

    I have another problem with my footer, look at the attached print, he has a dark blue background. For this background to cover the entire width of the page, cut out a picture with the same height and repeat from point to point (background: repeat-x; the body of the page). But the big problem is that when you add new pages to the site navigation that would grow tall. How could I make this more dynamic, with no need for me cut a new fund every time the navigation increases in height. Is there any way of navigation to be 100% width? or something?

    Looking forward,
    Bruno
    XP Investimentos
    Brazil
  • Hi Bruno,

    There are few ways to achieve this without resizing the image manually. If its a plain (solid) color you can use "background-color". But in that case the better approach is to wrap the navigation in some div that is 100% and to position the navigation in its center. Example:

    <div id="navigation-wrapper">
        <div id="RadSiteMap">
         </div>
    </div>

    And this should be the CSS:

    #navigation-wrapper
    position: relative;
    float: left;
    widht: 100%;
    background-color: #000000; /*Place here your background color */
     
    #RadSiteMap
    position: relative;
    margin: 0 auto; /*This will center the navigation*/
    width: 900px; /*Change on your wish*/
    /*or*/
     
    #RadSiteMap
    position: relative;
    margin-left: -450px;
    left: 50%; /*This will center the navigation*/
    width: 900px; /*Change on your wish*/



    All the best,
    Jordan
    the Telerik team
  • I would like to play this div "navigation-wrapper" out of navigation (RadSiteMap)??
  • Hi,

    Yes, you should wrap the sitemap with some div. Here is an example code for the master page:

    <div id="wrapper">
        <asp:contentplaceholder id="wrapper" runat="server" />           
    </div>
    <div id="footer-navigation">
        <asp:contentplaceholder id="ContentPlaceHolderForTheSiteMap" runat="server" />
    </div>
     
    <div id="footer">
        <asp:contentplaceholder id="NoticesAndContacts" runat="server" />
    </div>

    And you should put your sitemap in the ContentPlaceHolderForTheSiteMap.

    All the best,
    Jordan
    the Telerik team