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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Footer (?) Problem

    Hi all!

    I'm really, really, really new to CSS and of course I'm jumping in at the deep end by trying to adjust a template The problem is that I'm currently getting this with the code as it stands:




    What I want is for the background image to stop at the end of the text and the footer image (the bit with the pentacle) to attach seamlessly to the bottom in such a way that it scrolls with the rest of it. Main reason I want this is so that I can use a static background image that overlaps underneath the text box, thus the need for transparency around the bottom half of the image.

    Here is the code I currently have:

    Code:
    *{
    padding: 0px;
    margin: 0px;
    }
    
    body{
    background: #000000 url(images/back_all.jpg) no-repeat fixed left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    padding: 0px;
    margin: 0px;
    }
    
    #content 
    {
    width: 100%;
    
    }
    
    a{
    color: #151422;
    text-decoration:none;
    }
    
    a:hover, a:active{
    color:#151422;
    text-decoration:none;
    }
    
    #header{
    height: 128px;
    }
    
    #menu
    {
    height: 39px;
    width: 604px;
    margin-bottom: 10px;
    }
    
    #menu ul li{
    list-style: none;
    display: inline;
    }
    
    #menu a
    {
    display: block;
    float: left;
    width: 83px;
    height: 37px;
    padding-left: 30px;
    padding-top: 25px; 
    color: #ffffff;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    background: url(images/button.gif) no-repeat;
    }
    
    #menu a:hover
    {
    display: block;
    padding-top: 25px;
    height: 37px;
    float: left;
    color: #ffffff;
    font-weight: bold;
    background: url(images/button_r.gif) no-repeat;
    }
    
    #main
    {
    width:580px;
    margin: 0 auto;
    }
    
    #wrapper
    {
    width: 604px;
    background: url(images/table_back.gif) repeat-y center;
    margin: 0px auto;
    }
    
    #logo
    {
    height: 66px;
    width: 542px;
    text-align: right;
    }
    
    #logo h1
    {
    font-size: 18px;
    padding-top: 20px;
    padding-left: 20px;
    font-weight: bold;
    color: #E6E6E6;
    }
    
    #logo h2 a
    {
    font-size: 10px;
    padding-left: 20px;
    font-weight: bold;
    color: #E6E6E6;
    text-transform: uppercase;
    }
    
    #top
    {
    background: url(images/top.gif) no-repeat top center
    }
    
    #text{
    background: url(images/bottom.gif) no-repeat bottom center;
    padding-bottom: 60px;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 60px;
    min-height: 480px;
    
    }
    
    #text p{
    padding:5px;
    }
    
    h1, h2, h3{
    color:#151422;
    }
    
    h1{
    font-size:1.2em;
    }
    
    h2{
    font-size:1.05em;
    }
    
    h3{
    font-size:1em;
    }
    
    #text ul, ol{
    padding-left:12px;
    margin-left:12px;
    }
    
    
    .meta{
    text-align:right;
    color:#151422;
    font-size:0.79em;
    }
    
    .meta a{
    text-decoration:none;
    }
    
    #footer{
    font-size:0.79em;
    text-align:center;
    margin-bottom: 20px;
    height: 50px;
    color: #FFFFFF;
    padding-top: 10px;
    }
    
    #footer a{
    text-decoration:none;
    color: #FFFFFF;
    }
    Knowing my luck, its probably an easy fix but its not jumping out at me and the things that I've tried aren't working (I tried to fix the image as a static global footer but it killed something good). Any suggestions would be welcome

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Hi djs.specs,

    Welcome to CF! Unfortunately we can't do much if we can't see your markup (HTML), since it's what the CSS acts on and goes hand-in-hand with. Ideal would be a link to your page, so we can work with the images too (which are integral to your page's functionality, sounds like).
    matt | design | blog

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Durrr... I'm a 'tard. I should've known that'd come in handy. I can't direct you to a link because it's not uploaded anywhere, but here's the HTML of the page that I screenshotted:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Metamorphosis Design Free Css Templates</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="styles.css" rel="stylesheet" type="text/css"
    media="screen">
    </head>
    <body>
    <div id="content">
    <!-- start header -->
    <div id="main">
    <div id="header"><!--Header start -->
    <div id="logo">
    <h1><big>Atlanta Nocturna</big></h1>
    <h2>A Dresden Files RPG</h2>
    <br>
    <br>
    </div>
    <!--Header end -->
    <div id="menu">
    <ul>
    <li><a href="application.html">Apply</a></li>
    <li><a href="rules.html">Rules</a></li>
    <li><a href="characters.html">Characters</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="mailto:djs.specs@gmail.com">Contact</a></li>
    </ul>
    </div>
    </div>
    <div id="wrapper">
    <div id="top">
    <div id="text"><br>
    <div style="text-align: justify;">Welcome to Atlanta Nocturna, a
    Dresden Files RPG set in the city of - you guessed it - Atlanta,
    Georgia.&nbsp; Before you <a href="#">apply</a>, please be sure to
    read the rules.<br>
    </div>
    </div>
    </div>
    </div>
    <div id="footer">
    <p>Copyright © 2009.</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    There's probably a lot of extraneous code in there because I've not tried to code anything in years now and I wasn't too great at it to begin with

    Also, here are links to the images I'm using in case that'll help any:

    back_all.jpg
    top.gif
    table_back.gif
    bottom.gif

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Thanks. Still not quite clear about what you're after:

    What I want is for the background image to stop at the end of the text (?) and the footer image (the bit with the pentacle) to attach seamlessly to the bottom in such a way that it scrolls with the rest of it (?). Main reason I want this is so that I can use a static background image that overlaps underneath the text box, thus the need for transparency around the bottom half of the image.
    Could you clarify the bolded bits?

    Also, your page has some divitis and you definitely need to add a DOCTYPE to the beginning of your markup. The second is a non-negotiable if you want cross-browser compatibility, but the first thing we can clear up once we clarify what your footer needs to do.
    matt | design | blog

  • #5
    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 djs.specs,
    Does this work for you?
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="" content="authored by http://www.nopeople.com/Design/" />
    <style type="text/css">
    html, body{
    	height: 100%;
    	text-align: center;
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #000 url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/back_all.jpg) no-repeat left;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #content {
    	width: 604px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -138px; /* the bottom margin is the negative value of the footer's height */
    	text-align: left;
    	border-top: 2px solid #000;
    	background: url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/table_back.gif) repeat-y;
    }
    #footer, #push {
    	width: 604px;
    	height: 138px;
    	margin: 0 auto;
    }
    	#footer {
    		background: #999 url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/bottom.gif);
    	}
    	#push {
    		background: none;
    	}
    </style>
    </head>
    <body>
        <div id="content">
        	add your website here
    			<div id="push"></div>
        <!--closes content--></div>    
    	<div id="footer"></div>
    </body>
    </html>
    That's layed out like the full-height example found here.
    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

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not... quite:




  • #7
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry msuffern, I missed your reply in there

    Its a little hard to explain what I'm after without demonstrating, made worse by the fact I can't talk jargon. So here's a graphical representation:



    Red - area covered by table_back.gif
    Dashed green - area covered by bottom.gif

    Basically, so far as I can tell, the box on the left is how the CSS works at the moment, which means that the back is visible through the transparency in bottom.gif. The box on the right is what I'm after - bottom.gif attaching where table_back.gif stops repeating (because that's where the text ends). I'd prefer not to have it as a static footer image (hence my thing about scrolling). Am I making a bit more sense about what I'm asking for now?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    How about this one then?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	height: 865px;
    	background: #000 url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/back_all.jpg) no-repeat left;
    }
    #content {
    	width: 604px;
    	height: 865px;
    	margin: 0 auto;
    	border-top: 2px solid #000;
    	background: url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/table_back.gif) repeat-y;
    }
    #footer {
    	width: 604px;
    	height: 138px;
    	margin: 0 auto;
    	background: url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/bottom.gif);
    }
    </style>
    </head>
    <body>
        <div id="wrap">
        <div id="content">
        <!--end content--></div>
        <!--end wrap--></div>
        <div id="footer"></div>
    </body>
    </html>
    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

  • #9
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    YES!

    Well, I mean, I used the footer information to adjust my CSS file and now its working pretty much how I want. *happy dances* Thank you soooo much!


  •  

    Posting Permissions

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