1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Positioning Links over a background image

Discussion in 'CSS' started by drew68, Mar 7, 2014.

  1. #1
    hi…can you look at this site? http://nidaholly.wp.hobbsherder.com

    i'm trying to position the Home | Blog | Contact that is currently over the logo to be over the slogan text to the right of it like this… http://nidaholly.wp.hobbsherder.com/about-holly-bill-nida/

    can someone give me any suggestions on this?

    here's my css which isn't working…
    #hh-lander-header
    {
    height:735px;
    width:2200px;
    position:relative;
    }

    #image
    {
    position:absolute;
    left:0;
    top:0;
    }
    #hh-lander-header-content
    {
    z-index:100;
    position:absolute;
    color:white;
    font-size:24px;
    font-weight:bold;
    left:0;
    top:0;
    }

    and here's my code in the header.php file which isn't working…
    <div class="hh-home-header">
    <div class="hh-lander-header">
    <div id="banner">
    <div class="active" style="background:url(/wp-content/themes/nida_holly/images/header-home1.png) no-repeat center center;"></div>
    <div style="background:url(/wp-content/themes/nida_holly/images/header-home1.png) no-repeat center center;"></div>
    <div style="background:url(/wp-content/themes/nida_holly/images/header-home2.png) no-repeat center center;"></div>
    <div style="background:url(/wp-content/themes/nida_holly/images/header-home3.png) no-repeat center center;"></div>
    <div style="background:url(/wp-content/themes/nida_holly/images/header-home4.png) no-repeat center center;"></div>
    <div style="background:url(/wp-content/themes/nida_holly/images/header-home5.png) no-repeat center center;"></div>
    <div style="background:url(/wp-content/themes/nida_holly/images/header-home6.png) no-repeat center center;"></div>
    <div style="background:url(/wp-content/themes/nida_holly/images/header-home7.png) no-repeat center center;"></div>
    <div style="background:url(/wp-content/themes/nida_holly/images/header-home8.png) no-repeat center center;"></div>

    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function cycleImages(){
    var $active = $('#banner .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#banner div:first');
    $next.css('z-index',2);//move the next div up the pile
    $active.fadeOut(1500,function(){//fade out the top div
    $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the div
    $next.css('z-index',3).addClass('active');//make the next div the top one
    });
    }

    $(document).ready(function(){
    // run every 7s
    setInterval('cycleImages()', 4000);
    })
    </script>
    <p id="hh-lander-header-content" style="margin:50px 0 0 799px; font-family:'Arial', Helvetica, serif; font-size:16px; color:#78746d; font-weight:normal; line-height:125%; font-style:normal; text-align:right;"><a href="/home/" style="font-family:'Arial', Helvetica, serif; font-size:18px; color:#03a0b3; font-weight:normal; line-height:125%; font-style:normal; text-align:right; text-decoration:none;">Home</a>&nbsp;&nbsp;<span style="font-family:'Arial', Helvetica, serif; font-size:12px; color:#c0c993; font-weight:normal;">|</span>&nbsp;&nbsp;<a href="/blog/" style="font-family:'Arial', Helvetica, serif; font-size:18px; color:#03a0b3; font-weight:normal; line-height:125%; font-style:normal; text-align:right; text-decoration:none;">Blog</a>&nbsp;&nbsp;<span style="font-family:'Arial', Helvetica, serif; font-size:12px; color:#c0c993; font-weight:normal;">|</span>&nbsp;&nbsp;<a href="/contact-the-nida-team/" style="font-family:'Arial', Helvetica, serif; font-size:18px; color:#03a0b3; font-weight:normal; line-height:125%; font-style:normal; text-align:right; text-decoration:none;">Contact</a></p>
    </div>
    </div>
     
    drew68, Mar 7, 2014 IP
  2. drew68

    drew68 Well-Known Member

    Messages:
    582
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #2
    never mind…went a different route.
     
    drew68, Mar 7, 2014 IP
  3. Usama Aziz

    Usama Aziz Well-Known Member

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    123
    #3
    It is easy.Can i have access to your code? I can add the menu.
     
    Usama Aziz, Mar 16, 2014 IP