Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Apr 2008
    Location
    New York
    Posts
    142
    Thanks
    1
    Thanked 0 Times in 0 Posts

    logo left, ad right

    I'm having trouble putting my logo and advertisement side by side each other at the header
    http://www.giantstalk.com

    that is not my logo, but a sample, how can I adjust it so that my logo is shown, then the ad is placed right after near the edge?

    heres the code:

    <!-- BEGIN header -->
    <div id="header">
    </div>

    average header file

    my logo is logo.gif and I have a long advertisement code from Chitika

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Your problem is the header is only 970px wide but your asking to put something that is 1046px wide. So you have 2 options

    1 ) Increase the width of your Headr to 1046px

    2 ) Shrink the width of the flash image or your logo.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Giants10,
    Your logo is 318px wide.
    The ad seems to be 728px wide.
    That's 1046px that your trying to squeeze into a 994px wide wrapper.

    See box model here.

    To put things side by side you would float one or both but they need to fit in their container.
    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

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    LOL Excavator you just pretty much repeated what i just said.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Location
    New York
    Posts
    142
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you so far, ive changed to a smaller sample logo, but it still appears to overlap and i dont know how to fix it.

    once again, http://www.giantstalk.com

    here is the code i have:

    <!-- BEGIN header -->
    <div id="header">
    <div align="left"><img src="http://www.paranormalknowledge.com/photos/logo.gif">
    </div>
    (Chitika Ad Code)
    </div>
    <!-- END header -->

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    giants10, add this to your CSS and you'll have a start -
    Code:
    #header img {
    width: 259px;
    float: left;
    }
    #ch_ad274 {
    margin: 0 0 0 259px;
    }
    You're still too wide though. Your image and ad together add up to 987px now. You're #header is only 970px wide.
    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

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Location
    New York
    Posts
    142
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok, i added the code you said to the css and it still comes up big and out of place, i also cut the logo in half just to test it out

    http://www.giantstalk.com

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Location
    New York
    Posts
    142
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok i took it down but if you were given this code

    <!-- BEGIN header -->
    <div id="header">
    </div>
    <!-- END header -->

    how would you code it to add your logo to the left and advertisement on the right

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello giants10,
    #header is empty in the online version. Can you update that so we can see what you've got?
    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

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by giants10 View Post
    ok i took it down but if you were given this code

    <!-- BEGIN header -->
    <div id="header">
    </div>
    <!-- END header -->

    how would you code it to add your logo to the left and advertisement on the right
    Have a look at the header on this site - http://nopeople.com/agua/
    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

  • #11
    Regular Coder
    Join Date
    Apr 2008
    Location
    New York
    Posts
    142
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the link, i used the code and placed this into the website

    <!-- BEGIN header -->
    <div id="header">
    <img src="http://www.paranormalknowledge.com/photos/logo.gif" alt="logo" width="124" height="44" id="logo" />
    <Chitika Ad Code>
    </div>
    <!-- END header -->

    http://www.giantstalk.com, however, how can i get the image to be on the left and teh ad on the right to finish it?

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    In that example I linked you to, the two images have id's (id="logo" and id="anim_gif" ). Those id's are styled in the linked CSS like this -
    Code:
    	#logo {
    		float: left;
    		margin: 20px 0 0 10px;
    	}
    	#anim_gif {
    		float: right;
    		margin: 20px 10px 0 0;
    	}
    It would have been easier for you if I'd pointed out where the CSS file was for you. You can see it at http://nopeople.com/agua/global_agua.css

    ====================

    If your using FireFox you should get firebug, it will really help you a LOT. You would have easily seen the CSS right away with it.

    ====================

    You have some things in your CSS that are not in your markup
    Code:
    #header h1 {
    		float: left;
    		font-size: 0;
    		padding: 36px 24px 0;
    	}
    	#header h1 a {
    		display: block;
    		outline: none;
    		text-indent: -9999px;
    		width: 286px; height: 32px;
    		background: url(images/logo.gif) no-repeat 0 0;
    	}
    	#header .ad468x60 {
    		float: right;
    		padding: 22px 20px 0;
    	}
    And some things in your markup that you are not styling in your CSS - #logo and #ch_ad534

    ---->Try making your CSS look like this -
    Code:
    /** BEGIN header **/
    #header {
    	height: 104px;
    }
    #logo {
    float: left;
    }
    #ch_ad534 {
    float: right;
    }/** END header **/
    
    /** BEGIN body **/
    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


  •  

    Tags for this Thread

    Posting Permissions

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