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 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts

    css positioning help

    I'm in need of some help trying to position a form on my page. The way it is right now, positioning the form moves my ads around on my upload page. While the ads are positioned in the same location on the index page. I'm still new with css & xhtml so I'm trying to learn the best way to code things yet. I'm guessing it's something to do with how I'm positioning the items on the page. Any help is appreciated.

    Here's the url:
    http://ugly-cars.com/test/upload.html

    currently, the only other page besides that upload page that is done is the home page.

    here's the actual code:

    css:
    Code:
    body
    {
    background-color: black;
    }
    
    div
    {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
    border: 0px;
    }
    
    .forminfo
    {
    position: relative;
    top: -1100px;
    left: 200px;
    width: 300px;
    background-color:#ACD095;
    text-align: center;
    padding:10px;
    border:solid thin #167A58;
    }
    
    ul
    {
    list-style: none;
    }
    
    #main
    {
    background-image: url("images/main.jpg"); 
    background-repeat: no-repeat;
    width: 985px;
    height: 995px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    }
    
    #home
    {
    position: relative;
    top: -875px;
    left: 135px;
    width: 101px;
    height: 50px;
    }
    
    #gallery
    {
    position: relative;
    top: -925px;
    left: 237px;
    width: 101px;
    height: 50px;
    }
    
    #upload
    {
    position: relative;
    top: -975px;
    left: 339px;
    width: 101px;
    height: 50px;
    }
    
    #about
    {
    position: relative;
    top: -1025px;
    left: 441px;
    width: 101px;
    height: 50px;
    }
    
    #links
    {
    position: relative;
    top: -1075px;
    left: 543px;
    width: 101px;
    height: 50px;
    }
    
    #support
    {
    position: relative;
    top: -1125px;
    left: 645px;
    width: 101px;
    height: 50px;
    }
    
    #blog
    {
    position: relative;
    top: -1175px;
    left: 747px;
    width: 101px;
    height: 50px;
    }
    
    
    #ad
    {
    position: relative;
    top: -1680px;
    left: 722px;
    width: 160px;
    height: 600px;
    }
    
    #flash
    {
    position: relative;
    top: -1090px;
    left: 116px;
    width: 487px;
    height: 580px;
    }
    
    #form
    {
    position: relative;
    top: -1090px;
    left: 116px;
    width: 300px;
    }
    
    a.home
    {
    display: block;
    width: 101px;
    height: 50px;
    text-decoration: none;
    background: url('images/home.png');
    }
    
    a.home:hover
    {
    background-position: -101px 0;
    }
    
    a.gallery
    {
    display: block;
    width: 101px;
    height: 50px;
    text-decoration: none;
    background: url('images/gallery.png');
    }
    
    a.gallery:hover
    {
    background-position: -101px 0;
    }
    
    a.upload
    {
    display: block;
    width: 101px;
    height: 50px;
    text-decoration: none;
    background: url('images/upload.png');
    }
    
    a.upload:hover
    {
    background-position: -101px 0;
    }
    
    a.about
    {
    display: block;
    width: 101px;
    height: 50px;
    text-decoration: none;
    background: url('images/about.png');
    }
    
    a.about:hover
    {
    background-position: -101px 0;
    }
    
    a.links
    {
    display: block;
    width: 101px;
    height: 50px;
    text-decoration: none;
    background: url('images/links.png');
    }
    
    a.links:hover
    {
    background-position: -101px 0;
    }
    
    a.support
    {
    display: block;
    width: 101px;
    height: 50px;
    text-decoration: none;
    background: url('images/support.png');
    }
    
    a.support:hover
    {
    background-position: -101px 0;
    }
    
    a.blog
    {
    display: block;
    width: 101px;
    height: 50px;
    text-decoration: none;
    background: url('images/blog.png');
    }
    
    a.blog:hover
    {
    background-position: -101px 0;
    }
    xhtml:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Ugly-Cars.com | Upload your ugly cars today</title>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="main_layout.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <!-- Main Image -->
    <div id="main">
    <img src="images/main.jpg" alt="main ugly cars background" title="" usemap="#map" border="0" />
    <map name="map" id="map">
    <area shape="rect" coords="492,961,664,973" href="http://www.webfinitydesign.com" target="_blank" alt="webfinity design link" title="webfinitydesign.com website" /></map>
    
    <!-- Navigation Buttons -->
    <div id="home">
    <a href="http://www.ugly-cars.com/test/index.html" class="home" title="You are here, the ugly-cars.com home page"></a>
    </div>
    
    <div id="gallery">
    <a href="http://www.ugly-cars.com/photo/gallery2/index.php" class="gallery" title="Check out our filled gallery with photos added daily"></a>
    </div>
    
    <div id="upload">
    <a href="http://www.ugly-cars.com/test/upload.html" class="upload" title="Upload your ugly car photos here"></a>
    </div>
    
    <div id="about">
    <a href="http://www.ugly-cars.com/test/about.html" class="about" title="Find out about the owners of ugly-cars.com"></a>
    </div>
    
    <div id="links">
    <a href="http://www.ugly-cars.com/test/links.html" class="links" title="Sites the owners frequent &amp; supporters of ugly-cars.com"></a>
    </div>
    
    <div id="support">
    <a href="http://www.ugly-cars.com/test/support.html" class="support" title="Help keep ugly-cars.com alive"></a>
    </div>
    
    <div id="blog">
    <a href="http://www.ugly-cars.com/blog/" class="blog" title="Ugly-cars.com blog from the site owners"></a>
    </div>
    <!-- End Navigation -->
    
    <!-- Upload Form -->
    <p class="forminfo">Please fill this form out in its entirety. After submitting the form, allow up to 2 days for us to review the photos before uploading them to the gallery.<br />
    * Denotes a required field.</p> 
    <div id="form">
    <form>
    <ul>
    <li>Name*<br />
    <input type="text" size="30" name="name" /></li>
    <li><br /></li>
    <li>State*<br />
    <input type="text" size="30" name="state" /></li>
    <li><br /></li>
    <li>Referral<br />
    <input type="text" size="30" name="referral" /></li>
    <li><br /></li>
    <li>Make*<br />
    <input type="text" size="30" name="make" /></li>
    <li><br /></li>
    <li>Model*<br />
    <input type="text" size="30" name="model" /></li>
    <li><br /></li>
    </form>
    </div>
    
    <!-- Google Ads -->
    <div id="ad">
    <script type="text/javascript">
    //<![CDATA[
    <!--
    google_ad_client = "pub-1710962138880574";
    /* 160x600, created 2/18/09 */
    google_ad_slot = "4395547452";
    google_ad_width = 160;
    google_ad_height = 600;
    //-->
    //]]>
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    
    <!-- Start of StatCounter Code -->
    <script type="text/javascript">
    sc_project=3762899; 
    sc_invisible=1; 
    sc_partition=40; 
    sc_security="0b12491f"; 
    </script>
    
    <script type="text/javascript"
    src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div
    class="statcounter"><a title="web stats" class="statcounter"
    href="http://www.statcounter.com/free_web_stats.html"><img
    class="statcounter"
    src="http://c41.statcounter.com/3762899/0/0b12491f/1/"
    alt="web stats" /></a></div></noscript>
    <!-- End of StatCounter Code -->
    
    </div>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello andrewjs18 ,
    If you were to make a 2 column layout for that, you could have your forminfo and form in a left column that would line up with the left boltplate of your background image, and do the same with a right column for your ads.
    You could get rid of all that unnecessary positioning that way, along with those negative margins. It would be much easier and more cross browser compatable.

    Have a look at a couple 2 column layouts here

    You should also have a look at the links about validation in my sig below.

    For now, this positions your form nicely in FF, didn't try it in anything else:
    Code:
    #form
    {
    position: relative;
    top: -1090px;
    left: 216px;
    width: 300px;
    }
    
    #ad
    {
    position: relative;
    top: -1585px;
    left: 722px;
    width: 160px;
    height: 600px;
    }
    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
    New Coder
    Join Date
    Nov 2008
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello andrewjs18 ,
    If you were to make a 2 column layout for that, you could have your forminfo and form in a left column that would line up with the left boltplate of your background image, and do the same with a right column for your ads.
    You could get rid of all that unnecessary positioning that way, along with those negative margins. It would be much easier and more cross browser compatable.

    Have a look at a couple 2 column layouts here

    You should also have a look at the links about validation in my sig below.

    For now, this positions your form nicely in FF, didn't try it in anything else:
    Code:
    #form
    {
    position: relative;
    top: -1090px;
    left: 216px;
    width: 300px;
    }
    
    #ad
    {
    position: relative;
    top: -1585px;
    left: 722px;
    width: 160px;
    height: 600px;
    }
    thanks for the links...I'll look over them closely when I'm not sick...as for the code you provided, it positions the ad and form nicely, but then when you go look at the index (home) page, the ad isn't positioned properly. I guess the problem I was running into was keeping the existing code I didn't want to move in the same position when I added new content into the css. pretty much, the nav buttons and the ad are almost at a fixed position on the page while the left block will be changing from page-to-page.


  •  

    Posting Permissions

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