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 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Posts
    192
    Thanks
    26
    Thanked 0 Times in 0 Posts

    want to insert a place for google ads

    on my site turkishstone.com

    i like to insert a column to display either my own banner ads or google ads. i prefer it to be somewhere near the main text, a vertical column of may be 200 pixel in width. how can i do it?

    i know html and css but it has been a long time since i never written code

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ketanco,
    Your #content is wide enough for a column to go on the left of #inner-content.

    Remove that left margin on #inner-content, add a left column in the markup and float it from the CSS.

    Does that help? I can work up a demo if you need.
    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This might get you started. See the bits highlighted in red -
    Code:
    #content {
        background: url("2content_top.gif") no-repeat scroll center top rgba(0, 0, 0, 0); /*missing image*/
    }
    #content {
        height: auto !important;
        margin: 0 auto;
        min-height: 128px;
        overflow: auto; /*to clear the floats*/
        width: 960px;
    }
    
    #inner-content {
        background-image: url("../images/transparent.png");
        background-repeat: repeat;
        /*margin-left: 220px;*/
        margin-right: 150px;
        padding: 10px;
        width: 450px;
    }
    #leftColumn {
    height: 400px; /*demo only*/
    width: 200px;
    margin: 0 10px;
    float: left;
    background: #f00; /*demo only*/
    }
    And some markup -
    Code:
    		</div>
    
        </div>
    </div>
    
    <div id="content-wrapper">
    	<div id="content">
    <div id="leftColumn">
    <!--end leftColumn--></div>
            <div id="inner-content">
            	<!--
    			<h1>ROBOKINGDOM LLC</h1>
                <p>
    A 2-column layout example you can study a bit.



    .
    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
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    ketanco Bro,
    It is easy to add adsense ads on your sites. Simply just go to your adsense dashboard. Click on create ads. Copy those codes and paste it on your website where you want to publish your ads.
    That's all. If you need anything more just reply with my comments.

  • #5
    Regular Coder
    Join Date
    Jul 2009
    Posts
    192
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    This might get you started. See the bits highlighted in red -
    Code:
    #content {
        background: url("2content_top.gif") no-repeat scroll center top rgba(0, 0, 0, 0); /*missing image*/
    }
    #content {
        height: auto !important;
        margin: 0 auto;
        min-height: 128px;
        overflow: auto; /*to clear the floats*/
        width: 960px;
    }
    
    #inner-content {
        background-image: url("../images/transparent.png");
        background-repeat: repeat;
        /*margin-left: 220px;*/
        margin-right: 150px;
        padding: 10px;
        width: 450px;
    }
    #leftColumn {
    height: 400px; /*demo only*/
    width: 200px;
    margin: 0 10px;
    float: left;
    background: #f00; /*demo only*/
    }
    And some markup -
    Code:
    		</div>
    
        </div>
    </div>
    
    <div id="content-wrapper">
    	<div id="content">
    <div id="leftColumn">
    <!--end leftColumn--></div>
            <div id="inner-content">
            	<!--
    			<h1>ROBOKINGDOM LLC</h1>
                <p>
    A 2-column layout example you can study a bit.



    .
    I did like u wrote . but see how it looks. could you help again?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ketanco View Post
    I did like u wrote . but see how it looks. could you help again?
    Have an other look at that 2-column demo I gave you a link to earlier. This also works with both columns floated left, which is what you're doing.

    Remove this bit of left margin highlighted in red -
    Code:
    #inner-content {
        background-image: url("../images/transparent.png");
        background-repeat: repeat;
        margin-left: 220px;
        margin-right: 150px;
        padding: 10px;
        width: 450px;
    }
    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
    Jul 2009
    Posts
    192
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Have an other look at that 2-column demo I gave you a link to earlier. This also works with both columns floated left, which is what you're doing.

    Remove this bit of left margin highlighted in red -
    Code:
    #inner-content {
        background-image: url("../images/transparent.png");
        background-repeat: repeat;
        margin-left: 220px;
        margin-right: 150px;
        padding: 10px;
        width: 450px;
    }
    ok thanks but this time the footer menu came up near the logo and there is a thin white line above the red area which wasnt there. how can i fix?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ketanco View Post
    ok thanks but this time the footer menu came up near the logo and there is a thin white line above the red area which wasnt there. how can i fix?
    Oops, I didn't see that. I put a background color on it though and it's pretty obvious. Adding clear: both; to #footer puts it down below the floats, like this -
    Code:
    #footer {
        background: #f00;
        border-top: 1px solid #E4E4E4;
        clear: both;
    }
    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

  • Users who have thanked Excavator for this post:

    ketanco (01-19-2014)

  • #9
    Regular Coder
    Join Date
    Jul 2009
    Posts
    192
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Oops, I didn't see that. I put a background color on it though and it's pretty obvious. Adding clear: both; to #footer puts it down below the floats, like this -
    Code:
    #footer {
        background: #f00;
        border-top: 1px solid #E4E4E4;
        clear: both;
    }
    didnt work. do you mean writing a new footer as you write and deleting the old or just adding clear: both, or adding the footer code you wrote to the end of the existing footer code? i tried them all but it didnt change anything

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ketanco View Post
    didnt work. do you mean writing a new footer as you write and deleting the old or just adding clear: both, or adding the footer code you wrote to the end of the existing footer code? i tried them all but it didnt change anything
    Just add clear: both; to the CSS for #footer - styles.css line 132. I'm not seeing it here so maybe you haven't updated the online version?
    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
    Jul 2009
    Posts
    192
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Just add clear: both; to the CSS for #footer - styles.css line 132. I'm not seeing it here so maybe you haven't updated the online version?
    thanks it got better but now at the footer, the home, contact and advertising are listed below each other. they were side by side i believe. how can i correct it?

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Have you looked at the new responsive Adsense ads - they allow you to place <ins> tags where you want the ads to go and control the size with CSS (or let them adapt to fit their container).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ketanco View Post
    thanks it got better but now at the footer, the home, contact and advertising are listed below each other. they were side by side i believe. how can i correct it?
    Looks like you've lost some CSS maybe? Those li's would normally be floated to be beside each other, then spaced out with some margin.
    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
    •