WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I make Logo clickable? (3 posts)

  1. RipRapRob
    Member
    Posted 6 years ago #

    Look at http://www.rob.dk

    I would linke the logo in the top left corner to be clickable (linking to the front page, like the "Rob's W├Žbsait" text to the left of it).

    Here is the relevant part of my Header:

    <div id="header">
          <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
          <div class="description"><?php bloginfo('description'); ?></div>
          <?php include (TEMPLATEPATH . '/searchform.php'); ?>
        </div><!-- /header -->

    And here is the relevant part of my CSS:

    #header {
    	height: 125px;
    	background: url('images/rob_logo.jpg') no-repeat top left;
            display:block;
    	}

    I know part of the problem is, that the IMG is a background image, and I think the solution is SOMETHING like this:

    <div id="header">
          <h1><a href="<?php echo get_settings('home'); ?>">
    [>>>>MY LOGO GRAPHIC HERE - BUT HOW? <<<<]
    <?php bloginfo('name'); ?></a></h1>
          <div class="description"><?php bloginfo('description'); ?></div>
          <?php include (TEMPLATEPATH . '/searchform.php'); ?>
        </div><!-- /header -->

    but whenever I tries something, it messes the page up.

    Any help appreciated.

    Thanks :o)

  2. shadow
    Member
    Posted 6 years ago #

    Take the image back out of your header as a background and set it back in its own div next to the header. Float the image div - left.

    Link the image with <a href="<?php echo get_settings('home'); ?>">

    Margin your header from the left next to your image and reset your h1 and description back to left:10px

  3. RipRapRob
    Member
    Posted 6 years ago #

    Thank you SO much :o)

    I tried your solution, and it fixed the logo, but it messed up my design a bit.

    But then I added a "height: 125px" to my CSS, and now everything is 100% ok.

    Thanks again! :o)

    For others with similar problems, here are the things I've changed:

    I've changed the relevant part of the header to this:

    <div id="page">
      <div id="wrapper">
       <div id="logo">
         <img src="/wp-content/themes/i3theme-1-2/images/rob_logo.jpg" />
    </div>
        <div id="header">
          <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
          <div class="description"><?php bloginfo('description'); ?></div>
          <?php include (TEMPLATEPATH . '/searchform.php'); ?>
        </div><!-- /header -->

    And changed stylesheet to this:

    #header {
    	height: 125px;
    	}
    
    #logo {
    	height: 125px;
    	float: left;
    	}

    :o)

Topic Closed

This topic has been closed to new replies.

About this Topic