#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Ventura, CA
    Posts
    3
    Rep Power
    0

    Question Learning How to Place Two Logos in Header


    I am having a bit of difficulty in placing an additional logo within my header on www (dot) tntperformance805 (dot) com. I am trying to place the second logo (an image of a phone number) on the right side, adjacent to the TNT Performance logo. However, I am obviously not doing it right, as the second logo keeps overlapping on the first one.

    Would any of you be willing and able to assist me with getting the CSS/coding right on this one? It would be greatly appreciated.

    Please let me know if anything else is needed from me.

    Best,

    Matt
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    16
    Rep Power
    0
    could you supply the current code?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Ventura, CA
    Posts
    3
    Rep Power
    0
    Originally Posted by voidPirate
    could you supply the current code?
    Hi voidPirate,

    Thank you for the response!

    Below is a copy of the current CSS code. I included all surrounding code, should that also be relevant.

    #content-area { background: #fafcfc url(images/content-area-bg.png); border-bottom: 1px solid #ffffff; }

    #top-stitch { background: url(images/top-stich.png) repeat-x bottom left; height: 6px; }
    #content-area .container { padding-top: 15px; }
    #logo-area { text-align: left; position: relative; padding-bottom: 5px; }
    p#slogan { font-size: 15px; font-family: 'Kreon', Arial, sans-serif; color: #9aa4a4; text-transform: uppercase; text-shadow: 1px 1px 1px #ffffff; }
    #content { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #e2e5e5; }

    Also, the code on the website itself referencing the logo is below.

    <div id="content-area">
    <div id="content-top-light">
    <div id="top-stitch"></div>
    <div class="container">
    <div id="logo-area"><a href="link to site"><img src="link to logo" alt="" id="logo" /></a></div>
    Please let me know if anything else is needed. I truly appreciate the help.

    Best,

    Matt
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    306
    Rep Power
    6
    Your logo does not have a set width in the div container. You should change it to this.

    Code:
    #logo-area {
        float: left;
        padding-bottom: 5px;
        position: relative;
        text-align: left;
        width: 300px;
    }
    This will make the logo it's exact width allowing you to use the float left element so that your other image can be floated.

    Two thing here.

    1. Don't forget to float your new logo div. For example:

    Code:
    #logo-area2 {
        float: left;
        padding-bottom: 5px;
        position: relative;
        text-align: left;
        width: 300px;
    }
    You can float it either left or right and then just play with the css to get it where you need it.

    Make sure you have a clear div function in your css. For example:

    Code:
    .clear { clear: both; }
    and place
    Code:
    <div class="clear"></div>
    underneath your two logos once finished or otherwise the page will float up with it.

    Hope this helps
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Originally Posted by tech0925
    Make sure you have a clear div function in your css. For example:

    Code:
    .clear { clear: both; }
    and place
    Code:
    <div class="clear"></div>
    underneath your two logos once finished or otherwise the page will float up with it.
    There's no need to add an extra <div>. I recommend that you read Making Elements Contain Floated Children.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Ventura, CA
    Posts
    3
    Rep Power
    0
    Originally Posted by tech0925
    Your logo does not have a set width in the div container. You should change it to this.

    Code:
    #logo-area {
        float: left;
        padding-bottom: 5px;
        position: relative;
        text-align: left;
        width: 300px;
    }
    This will make the logo it's exact width allowing you to use the float left element so that your other image can be floated.

    Two thing here.

    1. Don't forget to float your new logo div. For example:

    Code:
    #logo-area2 {
        float: left;
        padding-bottom: 5px;
        position: relative;
        text-align: left;
        width: 300px;
    }
    You can float it either left or right and then just play with the css to get it where you need it.

    Make sure you have a clear div function in your css. For example:

    Code:
    .clear { clear: both; }
    and place
    Code:
    <div class="clear"></div>
    underneath your two logos once finished or otherwise the page will float up with it.

    Hope this helps

    Tech0925: thank you for your help! I was able to get the 2nd logo into position with ease. However, your suggestions have caused the nav menu to display abnormally. Do you know could be causing this?

    Below is the code as I have added it:

    Code:
    #logo-area { width: 300px; text-align: left; position: relative; padding-bottom: 5px; float: left; }
    			#phonenumber { width: 391px; text-align: right; position: relative; padding-bottom: 5px; float: right; }
    Code:
    <div id="content-area">
    		<div id="content-top-light">
    			<div id="top-stitch"></div>
    			<div class="container">
    				<div id="logo-area">
    					<a href="<?php echo home_url(); ?>">
    						<?php $logo = (get_option('aggregate_logo') <> '') ? esc_attr(get_option('aggregate_logo')) : get_template_directory_uri().'/images/logo.png'; ?>
    						<img src="<?php echo esc_url($logo); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" id="logo"/>
    					</a></div>
    				<div id="phonenumber">
    						<?php $logo = (get_option('aggregate_logo') <> '') ? esc_attr(get_option('aggregate_logo')) : get_template_directory_uri().'/images/phone-number.png'; ?>
    						<img src="http://www.tntperformance805.com/wp-content/uploads/2012/11/phone-number.png" alt="(805) 218-1520 - The TNT Performance phone number" id="phonenumber"/>
    					</a></div>
    					<p><?php echo esc_html(get_bloginfo('description')); ?></p>
    					<?php do_action('et_header'); ?><div class="clear"></div><!-- end #logo-area -->
    Thanks again for your help. I greatly appreciate it.

    Kravvitz: I checked out the page you referred me to, but I'm afraid it's a bit above my current CSS skill level. Thanks for trying to help though.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    306
    Rep Power
    6
    Your very welcome. Glad to help. In Firefox I do see the issue. While using the inspection tool it does not show the classes and etc for the navbar li. However, in chrome it does. This could be b/c you need to better define the classes.

    If you want too you can send me access to your website via PM and I will be happy to correct that for you. I am assuming it should look like it does in Chrome.

IMN logo majestic logo threadwatch logo seochat tools logo