Need help with Code for my Header

  • Hello People, please help me with this.

    I’ve designed my own header and already managed to place it where it’s supposted to be. I have created images which i want to place on the right and the left side of the header. I even managed to place the img on the left side. However it wount work for the right side. Who knows what code i have to write???

    Have a look at the situation on this image: myheader

    This is the code that made me change the left corner successfuly in my style-section-colors.css:

    div#title { background: transparent url(‘images/header-links.jpg’) left top no-repeat; }
    div#title-wrapper { background: transparent url(‘images/background-title.jpg’) left top no-repeat; }
    div#sitename h1 { background: transparent url(‘images/background-sitename.jpg’) left top no-repeat; }

    How can I fill corner B (as taged on my linked image for you) with the second image i’ve prepared????

    It should be pritty easy – but ive tried everything my mind could make up.

    Thanks for the help alraddy.

    alex

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi
    I don’t know how is the structure of your html in the header.php file, but you can create three divs (one for the left image, one for the middle one, and other for the right image) and then change de css file to float every one where it should be.
    For example:

    <div id=”header-block”>
    <div id=”left-img”></div>
    <div id=”middle-img”></div>
    <div id=”right-img”></div>
    </div>

    and in the css file something like that:
    div#left-img{
    background: transparent url(‘…’); //here de left img
    float: left;
    }
    div#middle-img{
    background: transparent url(‘…’); //here de middle img
    float: left;
    }
    div#right-img{
    background: transparent url(‘…’); //here de right img
    float: right;
    }

    Make sure you set the width property for every div.

    Thread Starter alexfriesen

    (@alexfriesen)

    Thank you nerdanita,

    i managed to create the nessesary div and the image apeared on my website. Unfortunetly I cant place it where its supposed to be.

    There is some code about the sitename which has an image (for a logo) floating ontop of the header. Somehow this creates a huge problem to place the right-corner image.

    where can i insert the code to have it right????

    here is the portion in the header.php:

    <body>
    <div id=”container”>

    <div id=”title-left”>
    <div id=”title-wrapper”>
    <div id=”sitename”>
    <h1>“><?php bloginfo(‘name’); ?></h1>
    <p><?php bloginfo(‘description’); ?></p>
    </div>
    </div>
    </div>
    <div id=”navmensearch”>
    <div id=”navmensearch-wrapper”>
    <div id=”navmenu”>

      <li<?php echo (is_home() ? ‘ class=”current_page_item”‘: ”)?>>/”><span>Home</span>
      <?php themefunction_list_pages_flat(‘title_li=’); ?>

    </div>
    <div id=”search”>
    <form method=”get” id=”searchform” action=”<?php bloginfo(‘url’); ?>”>
    <p><span class=”nodisplay”>Search </span><input type=”text” value=”Search” name=”s” id=”s” /></p>
    </form>
    </div>
    </div>
    </div>

    this is the code in the layout-css:

    div#title-left { margin: 0; padding: 0; width: 100%; height: 150px; border-bottom: 1px solid; }
    div#title-wrapper { margin: 0 auto; padding: 0 0 0 0; width: 959px; height: 150px; }
    div#sitename { margin: 0; padding: 0; float: left; width: 290px; height: 150px; }
    div#sitename h1 { display: block; margin: 0; padding: 0; height: 150px; }
    div#sitename h1 a, div#sitename h1 a:visited { display: block; margin: 0; padding: 0; height: 150px; text-indent: -9999px; }
    div#sitename p { display: none; }
    div#navmensearch { }
    div#navmensearch-wrapper { margin: 0 auto; width: 905px; height: 44px; }
    div#search { float: right; width: 270px; height: 44px; }
    div#search form { width: 270px; height: 44px; }
    div#search form p { display: block; margin: 0; padding: 15px 0 0 34px; }
    div#search form p input { width: 226px; border: 0; }

    where should I implement the <div id=”title-right”></div> in the header.php

    where should I implement the div#title-left { margin: 0; padding: 0; width: 100%; height: 150px; border-bottom: 1px solid; } …is this code ok does it need some change?

    thank you for your help

    Well, now I can’t see where do you want to set the images.
    Try this in a new html file to see if it’s what you need. 

    <style type="text/css">
div#header-container{width: 959px;}
div#title-left { background-color: red;margin: 0; padding: 0; width: 100px; height: 150px; border-bottom: 1px solid; float:left;}
div#title-right{ background-color: blue;margin: 0; padding: 0; width: 100px; height: 150px; border-bottom: 1px solid; float:right}
div#title-middle { background-color: green;margin: 0 auto; padding: 0 0 0 0; width: 759px; height: 150px; float:left;}
div#sitename { margin: 0; padding: 0; float: left; width: 290px; height: 150px; }
div#sitename h1 { display: block; margin: 0; padding: 0; height: 150px; }
div#sitename h1 a, div#sitename h1 a:visited { display: block; margin: 0; padding: 0; height: 150px; text-indent: -9999px; }
div#sitename p { display: none; }
div#navmensearch { }
div#navmensearch-wrapper { margin: 0 auto; width: 905px; height: 44px; }
div#search { float: right; width: 270px; height: 44px; }
div#search form { width: 270px; height: 44px; }
div#search form p { display: block; margin: 0; padding: 15px 0 0 34px; }
div#search form p input { width: 226px; border: 0; }
</style>

<div id="header-container">
    <div id="title-left"></div>
    <div id="title-middle">
        <div id="title-wrapper">
        <div id="sitename">
        <h1>NOMBRE</h1>
        <p>DESCRIPCION</p>
        </div>
        </div>
    </div>
    <div id="title-right"></div>
</div>

    If it’s what you need, you can set the background images and change the width of every block to make it looks like you want.
    Let me know if it works!

    (Sorry about my english… :$)

    Thread Starter alexfriesen

    (@alexfriesen)

    Stil does not work ??
    im going nuts! What is wrong with this template!!!!!!

    Hey is it possible if I send you my Theme folder with the nessesary Images that have to be implantet and you take a look at my code yourself???

    This would be so great!!!! what do you think nerdanita?

    Send me your code and the images to analia (at) eraxia (dot) com
    and if a I have some free time this weekend I’ll check it out.

    Have a nice weekend =)

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Need help with Code for my Header’ is closed to new replies.