Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    5
    Member #
    19345
    Hi all

    hi all

    im having a problem with a new nav

    http://chocolategems.mybizads.com.au/in ... &Itemid=65

    i want to float that nav top right over the background image so it lines up with the coloured rectangles..

    i set the new nav in the user 3 area and its set as a top menu and moved the module to the top of the page but i cant seem to get it to float over the image

    here is the html bit where the background is set and the nav module is set

    Code:
    <!--
    body {
        background-image: url(/templates/beez/images/tile_backgroun.jpg);
    }
    -->
    </style></head>
    <body>
        <div id="all">
            <div id="header">
              <jdoc:include type="modules" name="user3" style="beezDivision" headerLevel="20" />
                <h1 id="logo"></h1>
                <ul>
                    <li><a href="#content" class="u2"><?php echo JText::_('Skip to Content'); ?></a></li>
                    <li><a href="#mainmenu" class="u2"><?php echo JText::_('Jump to Main Navigation and Login'); ?></a></li>
                    <li><a href="#additional" class="u2"><?php echo JText::_('Jump to additional Information'); ?></a></li>
                </ul>
    
              <h2 class="unseen"><?php echo JText::_('Search, View and Navigation'); ?></h2>
              <br />
    <p>
    this is the module tha holds that top nav

    Code:
              <jdoc:include type="modules" name="user3" style="beezDivision" headerLevel="20" />
    any help is appreciated

    cheers aron.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Try this first (the red part) and see where it ends up ...
    (note, it won't be in the correct place, but somewhere on the background?)

    <div class="moduletable" style="position:absolute; top:0px; left:0px;">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr ><td><a href="/index.php?option=com_content&amp;view=article&amp; id=25&amp;Itemid=28" class="mainlevel-nav" >Home</a></td></tr>
    <tr ><td><a href="/index.php?option=com_content&amp;view=article&amp; id=22&amp;Itemid=29" class="mainlevel-nav" >About Us</a></td></tr>
    <tr ><td><a href="/index.php?option=com_content&amp;view=article&amp; id=25&amp;Itemid=62" class="mainlevel-nav" >Order Online</a></td></tr>
    <tr ><td><a href="/index.php?option=com_content&amp;view=article&amp; id=22&amp;Itemid=63" class="mainlevel-nav" >Distributors</a></td></tr>
    </table> </div>


    If it ends up on the background, but not the correct position, then adjust the
    top:0px and left:0px; until it gets into the proper position. Check it on IE, FF and Safari.


  4. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    5
    Member #
    19345
    thanks for that.

    it floats but it seems to be going behind the header image

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">
    <!--
    body {
        background-image: url(/templates/beez/images/tile_backgroun.jpg);
    }
    -->
    </style></head>
    <body>
    
        <div id="all">
            <div id="header">
    <div class="moduletable" style="position:absolute; top:30px; left:100px;">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28" class="mainlevel-nav" >Home</a></td></tr>
    <tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29" class="mainlevel-nav" >About Us</a></td></tr>
    <tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=62" class="mainlevel-nav" >Order Online</a></td></tr>
    <tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=63" class="mainlevel-nav" >Distributors</a></td></tr>
    </table> </div>
                          <h1 id="logo"></h1>
                <ul>
                    <li><a href="#content" class="u2"><?php echo JText::_('Skip to Content'); ?></a></li>
                    <li><a href="#mainmenu" class="u2"><?php echo JText::_('Jump to Main Navigation and Login'); ?></a></li>
                    <li><a href="#additional" class="u2"><?php echo JText::_('Jump to additional Information'); ?></a></li>
                </ul>
    
              <h2 class="unseen"><?php echo JText::_('Search, View and Navigation'); ?></h2>
              <br />
    <p>

  5. #4
    Junior Member
    Join Date
    Jul 2009
    Posts
    5
    Member #
    19345
    i got it..

    how can i create a seperate css style just for this nav

    i want white text no underline and just a background change when rolling over it

    iv done it in dreamweaver but cant seem to get it working in joomla

    cheers aron.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Add something like this to your CSS file:

    a.nav_link:link,a.nav_link:active,a.nav_link:visit ed {
    background-color: transparent;
    font-family:verdana;
    font-size:13px;
    text-decoration:none;
    font-weight:normal;
    color:#fff;
    padding:5px;
    }
    a.nav_link:hover {
    font-family:verdana;
    font-size:13px;
    text-decoration:none;
    font-weight:normal;
    background-color:#c94c45;
    color:#fff;
    padding:5px;
    }
    .nav_selected {
    font-family:verdana;
    font-size:13px;
    text-decoration:none;
    font-weight:normal;
    background-color:#c94c45;
    color:#fff;
    padding:5px;
    }



    Now for each menu link, specify the class ... like this.

    <a href="contactus.html" class="nav_link">Contact Us</a>

    If you want to make the current page link (not a link, but highlighted) ...
    <span class="nav_selected">Contact Us</span>


  7. #6
    Junior Member
    Join Date
    Jul 2009
    Posts
    5
    Member #
    19345
    cool thanks that worked great.

    1 more thing how do i move the breadcrumb accross its aligned right but i need to move it towords the left about 30pix i think

    cheers aron

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    In your file "layout.css", you have this div:
    #breadcrumbs {

    But in your code, you have this:
    <div id="breadcrumb">

    Is it missing the "s" on purpose?
    Or do you have another ID called "#breadcrumb"?

    I wonder if you've made a typo.


  9. #8
    Junior Member
    Join Date
    Jul 2009
    Posts
    5
    Member #
    19345
    thanks.. it was the s...

    appreciate your help


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

float menu over header image

,

module rolling floating joomla

Click on a term to search for related topics.
All times are GMT -6. The time now is 08:47 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com