Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Apr 2009
    Posts
    13
    Member #
    18829
    Morning all,
    I have an issue with some areas on my webpage that I am struggling to understand.
    On this webpage: http://www.pocketpcsoft.net
    The featured today and Top ten boxes 'hang out' past the rest of the page. I've mucked around with margins and paddings in my CSS but cannot get it come inline.
    Any help would be much appreciated.
    The relevant PHP is:
    Code:
    <div id="right-col">
     
    <img src="img/featured-today.gif" />
    <div id="featured">
    <?php 
    $query = mysql_query("SELECT * FROM `list` WHERE IMGDATA is not null ORDER BY RAND() LIMIT 1");
    $row = mysql_fetch_array($query);
    $content = $row['imgdata'];
    $title = $row['name'];
    $description = $row['description'];
    $id = $row['id']; 
    $link = $row['link']; 
    echo "<img src=../php/imgdisplay.php?id=$id><br>";
    echo "<h2><a href='$link' target='blank'>$title</a></h2>";
    echo "<p>";
    echo "$description";
    echo "</p>";
    ?>
    <a href="php/featured.php" class="more">more &raquo;</a>
     
    <br class="clear" />
    </div>
    <br />
    <div class="googlead">
     
     
    <script type="text/javascript"><!--
    google_ad_client = "pub-3869147443833437";
    /* 300x250, created 31/03/09 */
    google_ad_slot = "6764269279";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    <div id="monthly-top-10">
    <?php include "php/topten_rotator.php" ?>
    </div>
     
    </div>
    The CSS is
    Code:
    #right-col {
    float:right;
    width:46%
    }
     
    #featured,#monthly-top-10 {
    border:1px solid #ff6400;
    background:#fff;
    margin:0 0 8px;
    padding:8px
    }
    #featured h2 {
    font-size:11px
    }
    #featured img {
    float:left;
    margin-right:8px
    }
    #monthly-top-10 {
    padding:0
    }
    table.top-10 td.clicks {
    width:20%;
    background:#fafafa;
    font-weight:700;
    padding:4px
    }

  2.  

  3. #2
    Junior Member twendesign's Avatar
    Join Date
    Dec 2008
    Location
    US
    Posts
    8
    Member #
    17984
    I tried with your codes but they are not correct I can't see anything using them, The problem that you have it that the Google Adsense Script is not in the right spot on the Box, that's why it's hanging over your Top 10 Box, They shouldn't touch each other .
    Send me the real files so I can correct them for you.

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    I changed these things in "style.css" ... see how that works now ...

    #bottom .wrapper {
    width:985px;
    margin:0 auto;
    padding:12px 0 12px 0
    }

    #left-col {
    float:left;
    width:50%;
    padding:0 0 0 24px
    }

    #right-col {
    float:right;
    width:43%;
    padding:0 24px 0 0
    }


  5. #4
    Junior Member twendesign's Avatar
    Join Date
    Dec 2008
    Location
    US
    Posts
    8
    Member #
    17984
    Can you post them as a zip file here please?

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    Twen ...

    He/she gave us the URL.
    You can view the HTML and CSS simply by visiting the website.


  7. #6
    Junior Member
    Join Date
    Apr 2009
    Posts
    13
    Member #
    18829
    miseim,

    Thanks for that, but those changes appear to have made matters worse in that it throws all the right hand column below the left hand one.

    I have implemented the suggested changes on a test page:

    http://www.pocketpcsoft.net/testindex.php

    regards,

    Greg

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    I see a typo ... probably my mistake ...

    missing a couple of semi-colons ... (see red) ...
    check some of your other one's too, make sure no others are missing.


    #left-col {
    float:left;
    width:50%;
    padding: 0 0 0 24px
    }

    #right-col {
    float:right;
    width:43%;
    padding: 0 24px 0 0
    }


  9. #8
    Junior Member
    Join Date
    Apr 2009
    Posts
    13
    Member #
    18829
    Great, that has worked
    Thanks alot.
    So for my understanding, you added some 'rules' which changed the padding inside the columns?
    regards,
    Greg

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    You originally had "left padding" on the wrapper.
    I took that away and instead, put the padding on the two divs - "left-col", "right-col".

    Padding the wrapper on the left pushed everything off to the right, overflowing it.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com