force 2 objects to sit side by side in top bar

  • What I want to do is simple; have an advertisement sit right next to my logo image on the bar at the top of my blog (rather than automatically break the line and sit below it, which is what it wants to do.)

    I was able to hack up the header.php file of my templete with some simple table tags and get it to work, but it looks terrible right now ..of course. Table tags are obviously defined in the temple’s CSS, but these definitions don’t look good when a table is inside the top bar. Take a look at how it looks now, with a border and unneeded space around table cells: https://www.socalsecrets.com/

    One route would be to make the table invisible just inside the top bar (get rid of the border and spaces between, around, and inside cells), but I have no idea how to do this. I think an easier and better option would be to dump my archaic table tags altogether and just add some sort of code that forces those 2 objects to stay on the same line, like some sort of “nowrap” command, but I don’t know how to do that easier. Is there an easy way to add some sort of “nowrap” command to the header.php file?

    If you have an idea, please also explain to me exactly what code needs to be added and where, as I am clearly new to all this and have no idea what I’m doing. Thanks.

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

  • Yeah, the “preferred” way to do something like what you want to do is to put the contents that are currently in a table cell into a DIV. You would put your logo into a DIV with an ID of logo-area, for example, and your ad code in another DIV with an ID of ad-header. You would set the display property of each DIV to inline-block in your CSS file, and float the logo-area DIV to the left. You would also set the width of one, or both, DIVs via CSS, either in pixels or as a percentage, and then add other styling properties, like padding, etc.

    <header class="header-wrap">
<div id="logo-area">Your logo code here.</div>
<div id="ad-header">Your ad code here</div>
<nav> ... </nav>
</header>

    CSS file:

    .logo-area, ad-header {
   padding: 0px;
   margin: 0px;
   display: inline-block;
}
.logo-area {
   float: left;
   width: 40%;
}

    I’ll have to check out the “Best Almond Cookie” next time I’m in Chinatown, which is pretty much just once a year nowadays for the Firecracker 5K/10K. If we want Chinese food, we usually travel to the SGV.

    Thread Starter johnsocalsecrets

    (@johnsocalsecrets)

    CB, thanks for the help, but I’m still not able to get it to put the logo and the ad on the same line, it continues to display the ad underneath the logo. Here is what I have in header.php and style.css (with a simple jpg file substituted in for my ad code to make it easier to test)..

    <body <?php body_class(); ?>>
    <div class=”container”>
    <header class=”header-wrap”>
    <div id=”logo-area”><?php mh_logo(); ?></div>
    <div id=”ad-header”><img src=”https://www.socalsecrets.com/ads/testbar.jpg&#8221; width=”468″ height=”60″></div>
    <nav class=”main-nav clearfix”>
    <?php wp_nav_menu(array(‘theme_location’ => ‘main_nav’)); ?>
    </nav>
    </header>

    /***** Header *****/

    .header-wrap { background: #fff; }
    .logo-area, ad-header {
    padding: 0px;
    margin: 0px;
    display: inline-block;
    }
    .logo-area {
    float: left;
    width: 40%;
    }
    .logo-wrap { padding: 1em; overflow: hidden; }
    .logo { display: inline-block; }
    .logo-name { font-size: 300%; text-transform: uppercase; text-shadow: 1px 2px 5px rgba(150, 150, 150, 1); border-bottom: 3px solid #000; display: inline-block; }
    .logo-desc { background: #e64946; color: #fff; font-size: 130%; padding: 0.1em 0.5em; }

    Sorry it took so long to get back to you.

    I had made a syntax error for your CSS selectors. ID selectors should start with a pound sign (#), while class selectors start with a period. So your selectors for logo-area and ad-header should look like this, instead:

    #logo-area, #ad-header {
padding: 0px;
margin: 0px;
display: inline-block;
}
#logo-area {
float: left;
width: 40%;
}

    Thread Starter johnsocalsecrets

    (@johnsocalsecrets)

    Thanks for all your help. The # worked and kept the logo and ad on the same line, but now the menu bar starts at the wrong place, right below the ad instead of below the logo, which bunches up the menu on the right half of the screen and doubles it up on two lines. I threw in a simple table as a quick fix.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘force 2 objects to sit side by side in top bar’ is closed to new replies.