WordPress.org

1. cableghost
   Member
   Posted 3 years ago #

   I would like to place an image into my header, but I cannot seem to get it positioned properly.

   Below is a link to a screen capture and overlay image of how I would like the image positioned, and my header code. Also, rather than placing html into the header, how may I create php code and the respective css to handle this?

   http://www.9001sites.com/temp/9001V_capture.jpg

   Header:
   

   ...
   <div class="Main">
   <div class="Sheet">
       <div class="Sheet-body">
   <div class="Header">
       <div class="Header-jpeg"></div>
   <div class="headersearchbar"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div>
   <div class="logo">
       <h1 id="name-text" class="logo-name">
           <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
       <div id="slogan-text" class="logo-text">
           <?php bloginfo('description'); ?></div>
   </div>
   </div>
   
   <div class="nav">
   	<div class="l">	</div>
   	<div class="r">	</div>
   	<ul class="artmenu">
   		<?php art_menu_items(); ?>
   	</ul>
   </div>

   Thank you.

2. stvwlf
   Member
   Posted 3 years ago #

   Hi - Your code did not make clear in what div the Follow Me logo is placed.

   My suggestion is insert it as a background image on a Div.

   In the CSS, add position: relative to the CSS for the Div within which the FollowMe div will be placed. (container can be <div class="Header"> )

   Then set the FollowMe div CSS (assuming its ID is followme)
   

   #followme {
      position: absolute:
      left: 0px;
      top: 0px;
      background: url(images/followme.jpg) no-repeat;
      height: ...px;
      width: ...px;
   }

   Set url to actual image filename, height & width to the image dimensions. Adjust left and top to position the image exactly where you want it, relative to the location of the container div. You can use negative numbers if necessary.

   In your header.php the code to insert the image would be
   <div id="followme"></div>

3. cableghost
   Member
   Posted 3 years ago #

   Thank you; I will give this a try.

   The Follow Me image is NOT in the code...that's actually my problem; I did not know where to place it or how to call it other than placing HTML.

   Regarding positioning though...if my header was 100px height and 925px width and I wanted to place it at the bottom-right of the header in the respective div, could you provide possible css code?

   -Scott

4. stvwlf
   Member
   Posted 3 years ago #

   I already did

   When you put the code I provided in your CSS you will see the image appear in the left corner of the header. For starters set left to 800px and top to 50px and see where it appears there.

   put this <div id="followme"></div> within div class Header - that will add the image into your HTML after you make the CSS additions

   set
   div.header { position: relative }
   use the rest of the CSS code I listed earlier for the bew div

5. cableghost
   Member
   Posted 3 years ago #

   Thank you.

   -Scott

Topic Closed

This topic has been closed to new replies.