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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Location
    USA
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Stuck on CSS layout

    There are a couple things I'm stuck on. First, I have some things at the bottom of my page that are all stacked on top of each other.I know this is a problem with my CSS but I can't figure out what I'm doing wrong. Here is this part of my CSS style:

    div#donate {
    margin-top: 150px;
    position: absolute;
    bottom: 0;
    }

    div#w3c p {
    display: inline;
    position: absolute;
    bottom: 0;
    }

    div#made_date p {
    position: absolute;
    bottom: 0;
    }


    #donate I'm trying to get above the other 2 divs
    #w3c I'm trying to get each image in this div to be side by side and under #donate also centered.
    #made_date I'm would like in the bottom left corner of my page.

    Second, I added a title attribute to my links in the HTML yet most of them don't appear in the page on mouse-over.

    If you need to look at my html code you can view the source at http://www.ruefulwebdesigning.com/
    also you can see the current incorrect layout there.
    Thanks

    I've attached the .CSS file here, also.ruefulstyle.css

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    The mouse-over title attributes work for me.

    For the other issue, try making these revisions:

    CSS:
    Code:
    div#bottomleft {
    position: absolute;
    bottom: 0; }
    
    div#donate { 
    margin-top: 150px;
    } 
    
    div#w3c p { 
    display: inline; 
    }
     
    div#made_date p { 
    }

    HTML:
    Code:
    <div id="bottomleft">
      <div id="donate">
    
       <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_s-xclick" />
        <input type="hidden" name="hosted_button_id" value="CW3RM24U7RGYU" />
        <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" title="PayPal - The safer, easier way to pay online!" />
        <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
       </form>
      </div>
      
      <div id="w3c">
       <p>
        <a href="http://validator.w3.org/check?uri=referer">
    	    <img style="border:0;width:88px;height:31px"
    		src="http://www.w3.org/Icons/valid-xhtml10"
    	    alt="Valid XHTML 1.0 Transitional" />
    	</a>
       </p>
       <p>
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" />
        </a>
       </p>
    
      </div>
      <div id="made_date">
       <p>
        <small>I began this page on 11/18/2010.</small>
       </p>
      </div>
     </div>
    Not sure if you wanted the fixed footer to just be in bottom-left corner, or spanning entire width (like a traditional footer).
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    First things first. Your div layout structure could be reworked. I always like to start with a simple layout like so:

    Code:
    <body>
    <div id="wrapper">
    <div id="header"></div>
    <div id="content">
    
    <div id="footer"></div>
    </div>
    </div>
    </body>
    Now, once you have this basic div layout, then you can style the divs in which ever way you want. It's good that you're learning to layout pages with divs. One thing to mention is your use of positioning, especially absolute positioning. Floats are a much better way to position divs, along with margins. Absolutes should be used only in rare occasions.

    I think you should really try and rework your page using these tips. Try it and post back and we can go from there.

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Location
    USA
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @optimus203

    I was looking to center the donate button and the W3C icons in the center of the bootom of the page. Also, to have the donation button above the 2 W3C icons. While the 2 W3C icons to be side by side. Lastly, the page creation start date in the bottom left corner.

    Did you mouse-over all the links in the text? Maybe, I just need to clean my browser or something.

  • #5
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Link rollovers work fine for me on all links.

    Is this footer revision your talking about?

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!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>
      <meta name="google-site-verification" content="NIYKCfL1grYE79DbOvpppW3U7cG-fuhUJolsoc-OwTM" />
      <title>ruefulwebdesigning.com</title>
      <style type="text/css">
      div#bottomleft {
    position: absolute;
    bottom: 0;
    width:100%; }
    
    div#donate { 
    margin-top: 150px;
    text-align:center;
    } 
    
    div#w3c p { 
    display: inline; 
    text-align:center;
    }
    
    </style>
    
     </head>
     <body>
      <div id="bottomleft">
      <div id="donate">
    
       <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_s-xclick" />
        <input type="hidden" name="hosted_button_id" value="CW3RM24U7RGYU" />
        <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" title="PayPal - The safer, easier way to pay online!" />
        <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
       </form>
      </div>
      
      <div id="w3c">
       <p>
        <a href="http://validator.w3.org/check?uri=referer">
    	    <img style="border:0;width:88px;height:31px"
    		src="http://www.w3.org/Icons/valid-xhtml10"
    	    alt="Valid XHTML 1.0 Transitional" />
    	</a>
       </p>
       <p>
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" />
        </a>
       </p>
    
      </div>
      <div id="made_date">
       <p>
        <small>I began this page on 11/18/2010.</small>
       </p>
      </div>
     </div>
      
    </body>
    </html>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • Users who have thanked optimus203 for this post:

    Flunky (11-20-2010)


  •  

    Posting Permissions

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