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

    Help with CSS Alignment

    I am trying to do a simple alignment with a header, 3 columns, and a footer. The left and right columns are custom images of a literal pillar, and the left one is two images split with the pillar and base separate jpg's due to the base having my name on it (Which might soon be changed)

    The problem is, the footer is not showing up where it's supposed to be (It's a marble graphic), but it's instead simply underneath the middle column (Which will be an inline frame at a set size.) The marble footer isn't even showing up, and it should be aligned so that it looks like the left pillar, and my feet in the right graphic are sitting directly on it.

    Also, The middle column is overflowing underneath the left column, and isn't stopping at the end of the document. (I don't mind if the sample text cuts off, because it's going to be an inline frame which displays the links on the left pillar). I've got quite a mess here. Could anyone check out the site I've created and help me get this mess cleaned up a bit?

    What I've got so far is currently at http://alpha.jthensley.com

    I am trying to learn to CSS, so thank you for your patience.

    CSS Code:
    [CODE]
    * {
    margin: 0;
    padding: 0;
    }

    body {
    text-align: center;
    font-size: 100%;
    font-family: Georgia, "Times New Roman", Times, serif;
    }

    .hidden {
    display: none;
    }

    #sixserve {
    display: none;
    }

    #container {
    width: 1280px;
    margin: 10px auto;
    background-color: #fff;
    line-height: 130%;
    text-align: center;
    }

    #header {
    background: url('../images/header.jpg');
    height: 104px;
    width: 1280px;
    }

    #left {
    float: left;
    width: 318px;
    height: 674px;
    margin: 0;
    background: url('../images/left.jpg')
    }

    #name {
    width: 318px;
    height: 122px;
    position: absolute;
    top: 788px;
    background: url('../images/name.jpg');
    }

    #right {
    float: right;
    width: 344px;
    height: 796px;
    margin-right: 47px;
    background: url('../images/right.jpg');

    #middle {
    width: 100px;
    height: 796px;
    position: absolute;
    }

    #footer {
    clear: both;
    background: url('../images/footer.jpg');
    margin: 0;
    height: 40px;

    }
    [CODE]

    HTML Code
    [CODE]
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="JTHensley Tech News and Support" />
    <meta name="keywords" content="streaming, technology, windows, os x, lion, android, computers, computer repair, iphone, ios, ipad, technical support, tips, gaming, fun, programming, web design, html, css, xhtml, c++, windows, linux, mac" />
    <meta name="author" content="Jonathan Thomas Hensley" />
    <meta name="revised" content="Jonathan T. Hensley, 01/01/2012" />
    <meta name="page-version" content="v2.0Build 4501" />
    <meta charset="UTF-8" />

    <title>JTHensley Tech Support, Tips, & News</title>

    <link rel="shortcut icon" href="images/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="style.css" />

    <!-- BEGIN Google Analytics -->
    <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-27455024-1']);
    _gaq.push(['_setDomainName', 'jthensley.com']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script>
    <!-- END Google Analytics -->
    </head>
    <body>
    <div id="container"><!-- begins container -->
    <div id="header"><!-- begin header -->
    </div><!-- end header -->


    <div id="left"> <!-- begin left column -->
    </div> <!-- end left column -->

    <div id="name"> <!-- begin name base of left column -->
    </div> <!-- end name column -->

    <div id="right"> <!-- begin right column -->
    </div> <!-- end right column -->

    <div id="middle"> <!-- begin center column --><h2>Subheading</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div> <!-- end center column -->


    </div> <!-- end container -->
    <div id="footer"> <!-- begin footer --><p>footer</p>
    </div> <!-- end footer -->
    </body>
    </html>
    [CODE]

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,195
    Thanks
    23
    Thanked 605 Times in 604 Posts
    For one thing the #right in the CSS is missing an ending curly bracket.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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