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 2 of 2
  1. #1
    New Coder
    Join Date
    May 2009
    Location
    Woodbridge, VA
    Posts
    62
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Trying to insert an ad beneath text and having issues spacing them apart

    I'm trying to put advertisements beneath text on some of my dictionary pages and I'm having trouble putting space between the end of the text and the ad. To put an ad at the bottom of the page this page I had to put the padding-top at 900px and put in 16 <br>'s (the padding-top wasn't doing it by itself) just to put in about about a half inch of space between the end of the text and the top of the ad.

    I'm using the current version of Mozilla Firefox and I'll put the full text of the above page's coding at the end of the post. I'm not sure how to fix the issue and looking for a little help.

    Thanks,
    James

    The coding:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
     
    <!--
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
     
    Name       : Commission
    Description: A two-column, fixed-width design for 1024x768 screen resolutions.
    Version    : 1.0
    Released   : 2009012
     
    -->
    
    <html>
    <head>
    
    <meta name="verify-v1" content="QUc5twWB0i4bHYVblt7yxtMtM2psAe95soc6Q2HhsJo=" />
    
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
    <title>Gender Dictionary - G</title>
    
    <meta name="keywords" content="gay, bisexual, gay tv, gay movies, gay men, gay celebrities, homosexuality, homosexual, gay 
    marriage, dating, dating sites, lgbt directory, gay directory, lesbian, trans, transgender, queer, intersex, ftm, mtf, 
    genderqueer, gender****, lgbt resources, bisexual, bi, questioning, lgbt christian, tranny, gay actors, gay resources, ***, religion, gay religion " />
    
    <meta name="description" content="LGBTSource is a free LGBT directory listing service that is updated daily." />
    
    <link href="http://www.lgbtsource.com/pagetemplate.css" rel="stylesheet" type="text/css" media="screen" />
    
    <link rel="stylesheet" type="text" href="http://www.lgbtsource.com/pagetemplate.css" media="all"/>
    
    
    <style type="text/css"> 
    dl.table-display
    {
    width: 100%;
    margin: 2em 0;
    padding: 0;
    font-family: Veranda,sans-serif;
    }
    
    .table-display dt
    {
    width:25%;
    float: left;
    margin: 0 0 0 0;
    padding: .5em;
    border-bottom: 1px solid #999;
    font-weight: bold;
    font-family: Veranda,sans-serif;
    text-align: center;
    font-size: 12px;
    }
    
    /* commented backslash hack for mac-ie5 \*/
    dt { clear: both; }
    /* end hack */
    
    .table-display dd
    {
    width:70%;
    float: left;
    margin: 0 0 0 0;
    padding: .5em;
    border-bottom: 1px solid #999;
    font-weight: normal;
    font-family: Veranda,sans-serif;
    text-align: left;
    font-size: 12px;
    }
    </style>
    
    <style type="text/css">
    .ad
    {
    background-color: FFFFFF;
    font-style: normal;
    text-align:center;
    padding-top:900px;
    }
    </style>
     
    </head>
    
    
    
    <body>
    <div id="header-wrapper">
    <div id="header">
    <div id="menu">
    
    
    <ul>
    <li class="current_page_item"><a href="http://www.lgbtsource.com/">Home</a></li>
    <li><a href="http://www.lgbtsource.com/about/">About</a></li>
    <li><a href="http://lgbtsource.com/contact/">Contact</a></li>
    <li><a href="http://www.lgbtsource.com/directory/">Directory</a></li>
    <li><a href="http://www.lgbtsource.com/general-dictionary/">General Dictionary</a></li>
    <li><a href="http://www.lgbtsource.com/gender-dictionary/">Gender Dictionary</a></li>
    <li><a href="http://www.lgbtsource.com/donate/">Donate</a></li>
    </ul>
    
    
    </div>
    <!-- end #menu -->
    
    <!-- end #header -->
    </div>
    
    <!-- end #header-wrapper -->
    
    <a name="top"></a>
    
    
    <div id="page">
    <div id="logo">
    <br>
    <img src="http://www.logomaker.com/logo-images/9930aae30a43f90b.gif"/>
    <a href="http://www.logoworks.com"><img src="http://www.logomaker.com/images/logos.gif" alt="logo design" border="0"/></a>
    <br>
    </div>
    <!-- end #logo -->
    
    
    <div id="content">
    <div class="post">
    
    <h2 class="title">Gender Dictionary - G</h2>
    
    <div class="entry">
    
    <dl class="table-display">
    
    <dt>
    Galli
    <br><br><br><br>
    </dt>
    
    <dd>
    In ancient Roman religion, the Galli were the eunuch priests of the Phrygian goddess Cybele. The chief of these priests was referred to as a battakes, and later as the archigallus. The Galli were castrated voluntarily, typically during an ecstatic celebration called Dies Sanguinis, or Day of Blood.
    </dd>
    
    <dt>
    GCS
    </dt>
    
    <dd>
    Abbreviation for <strong>g</strong>ender <strong>c</strong>onfirmation <strong>s</strong>urgery. Another term for vaginoplasty.
    </dd>
    
    
    <dt>
    Gender
    <br><br><br><br><br>
    </dt>
    <dd>
    Commonly refers to the set of characteristics that humans perceive as distinguishing between male and female entities, extending from one's biological sex to, in humans, one's social role or gender identity. As a term, "gender" has more than one valid definition. Colloquially, it is used interchangeably with "sex" to denote the condition of being male or female in any type of entity.
    </dd>
    
    
    <dt>
    Gender Bender
    <br><br><br>
    </dt>
    
    <dd>A person who merges characteristics of all genders in subtle ways or intentionally flaunts merged/blurred cultural/stereotypical gender nonns for the purpose of shocking others, without concern for passing.
    </dd>
    
    <dt>
    Gender-Blind
    <br><br>
    </dt>
    
    <dd>
    A term describing activities undertaken and services provided without regard to the gender of those who participate. Also unisex.
    </dd>
    
    <dt>
    Gender Dysphoria
    <br><br><br><br>
    </dt>
    
    <dd>A form of intense emotional distress where someone is unhappy with living in the role of their assigned gender. It is currently classified as a symptom of "gender identity disorder." Gender dysphoria itself used to be a medical diagnosis but was replaced by GID. 
    </dd>
    
    
    <dt>
    Gender****
    <br><br><br>
    </dt>
    
    <dd>
    Refers to the self-conscious effort to "**** with" or play with traditional notions of gender identity, gender roles, and gender presentation. Gender**** shares many characteristics with genderqueer, although they are two separate concepts.
    </dd>
    
    <dt>
    GG
    <br><br><br>
    </dt>
    
    <dd>
    Genetic Girl. Is offensive to some derogatory by women who were raised as girls from birth onwards and by some transwomen who feel that chromosomes are not the defining characteristic for womanhood. 
    </dd>
    
    <dt>
    GenderQueer
    <br><br><br><br><br>
    </dt>
    
    <dd>
    A catch-all term for gender identities other than man and woman. People who identify as genderqueer may think of themselves as being both man and woman, as being neither man nor woman, or as falling completely outside the gender binary. Some wish to have certain features of the opposite sex and not all characteristics; others want it all.
    </dd>
    
    <dt>
    Gender Identity
    <br><br><br><br><br>
    </dt>
    <dd>Otherwise known as core gender identity, it is the gender(s), or lack thereof, a person self-identifies as. It is not necessarily based on biological fact, either real or perceived, nor is it always based on sexual orientation. The gender identities one may choose from include: male, female, both, somewhere in between ("third gender"), or neither.
    </dd>
    
    <dt>
    Gender Identity Disorder (GID)
    <br><br><br>
    </dt>
    <dd>
    The formal diagnosis used by psychologists and physicians to describe persons who experience significant gender dysphoria (discontent with the biological sex they were born with). It is a psychiatric classification and describes the attributes related to transsexuality, transgender identity, and transvestism.
    </dd>
    
    <dt>
    Gender Reassignment Surgery (GRS)
    <br><br><br><br><br><br><br><br><br><br><br>
    </dt>
    <dd>
    A term for the surgical procedures by which a person's physical appearance and function of their existing sexual characteristics are altered to resemble that of the other sex. It is part of a treatment for gender identity disorder/gender dysphoria in transsexual and transgender people.
    <br><br>
    Other terms for GRS include gender reassignment surgery, sex reconstruction surgery, sex-change operation, genital reconstruction surgery, gender confirmation surgery, and more recently sex affirmation surgery.
    <br><br>
    The terms feminizing genitoplasty or penectomy, orcidectomy and vaginoplasty are used medically for trans women, with masculinizing genitoplasty often similarly used for trans men.
    </dd>
    
    <dt>
    Gender Recognition Act 2004
    <br><br><br><br><br><br><br>
    </dt>
    <dd>Is an Act of the Parliament of the United Kingdom that allows transsexual people to change their legal gender. The Act gives transsexual people legal recognition as members of the sex appropriate to their gender allowing them to acquire a new birth certificate, affording them full recognition of their acquired sex in law for all purposes.
    <br><br>
    To read the full article about the Gender Recognition Act 2004 on Wikipedia, click <a href="http://en.wikipedia.org/wiki/Gender_Recognition_Act_2004">here</a>. To read the full text of the Act on the UK government's website, click <a href="http://www.legislation.hmso.gov.uk/acts/acts2004/20040007.htm">here</a>.
    </dd>
    
    <dt>
    Gender Role
    <br><br>
    </dt>
    <dd>
    The behaviors, traits, thoughts, and dress expected by a culture of members of a particular sex. 
    </dd>
    
    <dt>
    Gender Studies
    <br><br><br>
    </dt>
    <dd>
    A field of interdisciplinary study which analyzes the phenomenon of gender. Gender Studies is sometimes related to studies of class, race, ethnicity, sexuality and location.
    </dd>
    
    <dt>
    Gynephilia
    </dt>
    <dd>
    The erotic attraction to adult females.
    </dd>
    
    </dl>
    
    
    <div class="ad">
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <a href="http://www.jdoqocy.com/kf117shqnhp48BE59B7465BB67BD" target="_blank" onmouseover="window.status='http://www.travelocity.com';return true;" onmouseout="window.status=' ';return true;">
    <img src="http://www.ftjcfx.com/ml105elpdjh269C379524399459B" alt="" border="0"/></a>
    
    </div>
    
    </div>
     
    </div>
    </div>
    <!-- end #content -->
    
    
    
    
    
    
    
    
    <div id="sidebar">
    <ul>
    <li>
    
    <h2>Search</h2>
    
    <form action="http://www.google.com/cse" id="cse-search-box">
    <div>
        <input type="hidden" name="cx" value="017423447592127873841:t1p4qsb55nc" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="31" />
        <input type="submit" name="sa" value="Search" />
      </div>
    </form>
     
    <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box〈=en"></script>
     
    </li>
    
    
    
    
    
    <li>
    
    <h2>Quick Links</h2>
    
    <div style="text-align:center;">
    
    <a href="http://www.lgbtsource.com/directory-faq/">Directory FAQ</a>
    
    <br><br>
    
    <a href="http://www.lgbtsource.com/dictionary-faq/">Dictionary FAQ</a>
    
    <br><br>
    
    <a href="http://www.lgbtsource.com/new-updated-listings/">New & Updated Listings</a>
    
    <br><br>
    
    <script type="text/javascript"><!--
    google_ad_client = "pub-7647119287047910";
    /* Wide Skyscraper (160x600) */
    google_ad_slot = "5290262169";
    google_ad_width = 160;
    google_ad_height = 600;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    
    </div>
    
    </ul>
    
    </div>
    
    
    
    <!-- end #sidebar -->
    <div style="clear: both;">&nbsp;</div>
    </div>
    <!-- end #page -->
    
    
    
    <div id="footer">
    <p>Copyright (c) 2009 LGBTSource.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS 
    Templates</a>.
    </p>
    </div>
    
    <!-- end #footer -->
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    It's because all the <dt> and <dd> elements within dl.table-display are floated. Consequently the dl element does not not extend to contain all the floated elements, and the padding and <br/> tags you have added are bringing the top of .ad down from right at the top of the table.

    The solution here is to add overflow:auto to dl.table-display - which will clear the floats at the end of the element and hence dl-table-display will be much taller.

    This is easy to see in Firebug.


  •  

    Posting Permissions

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