Displaying Banner Ad Next To My Header.

Discussion in 'HTML & Website Design' started by butler312, Feb 9, 2013.

  1. #1
    I'm wanting to display an ad next to my header, somewhat similar to what is done on this forum. I'm having problems with the alignment though. While it works perfectly on chrome, for some reason firefox and internet explorer both place the ad like it is on a new line either above or below the logo (still off to the right).

    Here is the table I set up in the header

    <table>
    <tr>
    <td align="center">
                            <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                            <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
     
    </td>
    <td align="center" style="padding: 22px 70px">
     
    My adsense code
     
    </td>
    </tr>
    </table>
    Code (markup):
    Any ideas on what I've done wrong, or what I could change?
     
    butler312, Feb 9, 2013 IP
  2. Hefaistos

    Hefaistos Active Member

    Messages:
    194
    Likes Received:
    14
    Best Answers:
    9
    Trophy Points:
    63
    Digital Goods:
    1
    #2
    Nowadays it's not a good ideea to use tables in page layouts .
    Instead , you can use divs with ids and classes and with some css you can get the same results.
    A url to your online page will be more helpful than that piece of code for me.
     
    Hefaistos, Feb 9, 2013 IP
  3. Litonice09

    Litonice09 Well-Known Member

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    111
    Digital Goods:
    1
    #3
    Use display:inline and another thing to remember. <table></table> always conflicts with <div></div>. Please try to use <div> instead of <table>. Hope you will get better result. For <header> alignment css class no need to work much in CSS. It will be responsive for all browsers also.
     
    Litonice09, Feb 10, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    In addition to the "tables for nothing" as already pointed out, what in blazes makes that H2 the start of a subsection of the page? Do people not get what a 'heading' means? Oh wait, look at HTML 5's 'header' and 'go ahead and use h1's anywhere' idiocy and of COURSE people don't understand what headings mean. (the start of a subsection -- lower order/higher numbered headings indicating the start of a subsection of the higher order/lower numbered heading preceeding it -- which is why HTML 5's "SECTION" is also idiotic bull.)

    Much less since you seem to be showing perfectly good text inside that anchor, what the devil does it need a title attribute for?!? Or that since there should only be one H1 on a page (unless you're working in that steaming pile of idiotic BS known as HTML 5) what does it need an ID for? Much less that span for christmas only knows what (you've got two containers, isn't that enough?!?)

    That's one giant mess of code for what I'd have as: (assumes you're already inside <?php ?> since well written code usually only does that ONCE per page... and if I had my way <?php ?> would be removed from PHP entirely.)
    echo '
    <h1>
    	<a href="',esc_url(home_url('/')),'">
    		',bloginfo('name'),'<br />
    	</a>
    	<small>',bloginfo('description'),'</small>
    </h1>
    
    <div id="topAdsense">
    // adsense code here
    </div>';
    Code (markup):
    The SMALL tag is used here for the common practice of a tagline being subtext... which is what I'm assuming 'description' is -- though I'm guessing wildly without seeing the actual page.

    You float the h1 left, you float #topAdsense right, you use semantic markup and one heading for the heading, that's what it's all about...
     
    deathshadow, Feb 10, 2013 IP
  5. Litonice09

    Litonice09 Well-Known Member

    Messages:
    152
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    111
    Digital Goods:
    1
    #5
    @butler312 didn't tell about the site is wordpress. He gave some raw codes. Obviously your code is right with addition of some css coding.
     
    Litonice09, Feb 10, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Well there's your problem -- explains the coding methodology (or lack therein) a whole bunch.
     
    deathshadow, Feb 10, 2013 IP