Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Thanked 0 Times in 0 Posts

    Installing a Header on my Site

    Hello guys,

    I'm not that experienced in HTML and I just got started setting up my site and I have problems installing a header on my website here: http://talksocialtome.com/

    I placed the code <a href="http://carriebashamyoung.wordpress.com/" title="Talk Social To Me" rel="home"><img src="http://talksocialtome.com/wp-content/uploads/2013/04/Header.gif" alt="Talk Social To Me"></a> in various places of the header, however the left side bar (the black one with the menu buttons on) keeps overlapping my header image. I want to put the top header up on the page, before the left black bar and the body.

    Btw, is that the proper way to add a header to my site. I've looked over some tutorials on how to install headers on various themes, but those tutorials were specific to those themes not to mine. They were using CSS and I can't find the css sheet on my WordPress. I want to do everything from the wp-admin.

    I would really appreciate your help with this,

    Thank you

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,827 Times in 1,811 Posts
    Hello CristianLuca,
    In your markup, .header is the left column. Look in your CSS for .header to see how it's styled (it's in one of the ones named style.css). In the markup, it also has the class .left and it shouldn't.

    To put a conventional header on your page you'll need to put it in before any content in .wrapper Like this -
    <div id="container">
        <div class="wrapper wrap-full">
    <a href="http://carriebashamyoung.wordpress.com/" title="Talk Social To Me" rel="home" id="tlkScl"><img src="http://talksocialtome.com/wp-content/uploads/2013/04/Header.gif" alt="Talk Social To Me"></a>	
            <!-- HEADER -->
            <div class="header left">
                <div class="scrollhider">
                     <div style="max-height:926px" class="scroll">
                            <div class="logo left"><a href="http://talksocialtome.com"><img
    See I added an id, highlighted in red, so you can style your new anchor from your CSS.

    At 1018px width though, it's going to take up a lot of screen space. Especially sitting next to your 295px wide fixed left column.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


    Posting Permissions

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