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
    May 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div layers -- Backgrounds and Width

    http://broken-road.net/steve

    That's the site I'm working on. The footer image there ("From the right-aligned brain...") is what I'm having trouble with.

    What I want is to position the footer image right where it is (I'm using absolute positioning) but I want the div layer to have a background that, when someone expands their browser window, continues to the right of where the image is positioned.

    The end result should be that the line that runs under where it says "stephenparks.com" will give the illusion of continuing, no matter a person's screen size or how wide someone makes their screen.

    I hope I am explaining this well enough to be understood.

    Here's the code I'm using for the footer div layer.

    Code:
    #footer{
    position: absolute;
    left: 480px;
    top: 400px;
    width: auto;
    text-align: right;
    height: 109px;
    background-image: url(http://broken-road.net/steve/images/footerbg.jpg); 
    layer-background-image: url(http://broken-road.net/steve/images/footerbg.jpg);
    background-repeat: repeat-x;
    }
    Currently, the background image loads, but then the image loads over it and I can't figure out how to get the div layer to expand its width to whatever someone's browser width is.

    Any help would be greatly appreciated!

  • #2
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Any help, guys?

    Not sure if I'm not getting help because people don't know how to help, or if it's because you think the site I'm working on is a paying job (it's not -- it's for my brother and I WISH he was paying me) but I'd really appreciate any tips you could offer.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by booshgal33 View Post
    Any help, guys?

    Not sure if I'm not getting help because people don't know how to help, or if it's because you think the site I'm working on is a paying job (it's not -- it's for my brother and I WISH he was paying me) but I'd really appreciate any tips you could offer.
    First, you should have a Doctype. The browsers will go into quirks mode without one. Control is then not very firm.

    I have never seen so much css for such a small page.

    Look here.

    Frank
    Last edited by effpeetee; 05-22-2008 at 07:25 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    First, you should have a Doctype. The browsers will go into quirks mode without one. Control is then not very firm.
    I haven't worked with doctypes before. Always known I should but haven't ever had it explained to me.

    I found this page about them. Under "Doctypes that Work" which should I be using? And am I just putting it at the top of my pages?

    Apparently I know a lot less than I should. Sorry for being such a bother.

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    It seems to be working now when i look at it. Is that not what you wanted?

  • #6
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    What I want is for the footer image to appear (which it is) with this background in the div layer. The background displays, but then the footer image loads over it. I want the background image to run the length of the div (from all the way on the left to all the way on the right, behind the image, no matter how wide someone makes their screen).

    The illusion I'm trying to create is that the thin blue line on the footer image continues to the right, regardless of how wide someone makes their browser window.

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    like this?

    Code:
    #footer{
    position: absolute;
    right: 10px;
    top: 400px;
    height: 109px;
    background-image: url(http://broken-road.net/steve/images/footerbg.jpg); 
    layer-background-image: url(http://broken-road.net/steve/images/footerbg.jpg);
    background-repeat: repeat-x;
    overflow: none;
    width:100%;
    }

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by booshgal33 View Post
    I haven't worked with doctypes before. Always known I should but haven't ever had it explained to me.

    I found this page about them. Under "Doctypes that Work" which should I be using? And am I just putting it at the top of my pages?

    Apparently I know a lot less than I should. Sorry for being such a bother.
    You are not a bother. That's what we are here for.

    This is the minimum framework for a page.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Enter_Title_Here</title>
    </head>
    <body>
    
    </body>
    </html>
    You will have to decide what Doctype to use, but the one above should be OK.
    The <meta> line has shown what character set you are using. This also you will need to determine although the one here is not un-usual.

    There are many Sources of help in my signature below. But basically, you will have to learn at least HTML and CSS plus probably one or more of the scripting languages.
    Validate your code regularly. There is a facility on my Sources program, Top left for HTML and top right for CSS.

    Quite a good book to start with is "HTML DOG".

    Frank
    Last edited by effpeetee; 05-22-2008 at 07:56 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    booshgal33 (05-24-2008)

  • #9
    New to the CF scene
    Join Date
    May 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help so far, everyone.

    Frank, I had a friend help me with validating my pages (including my style page) and I've done them all. My problem still exists.

    Any other suggestions?

    That is actually now the least of my worries. What I'm having a problem with now is the contact form. I hate contact forms. Ugh. I got it to look and work exactly how my brother wanted it to look and work... except it doesn't display correctly on IE. I validated that page as well, but it's still not displaying the way it does in all 3 of the other browers I've viewed it in (Firefox, Safari and Camino).

    The page is HERE.

    Here is the style-coding I used for the contact area:

    Code:
    #contact-area {
    width: 350px;
    margin-top: 0px;
    margin-left: 50px;
    }
    
    #contact-area input, #contact-area textarea {
    padding: 3px;
    width: 340px;
    font-family: tahoma, sans-serif;
    font-size: 8pt;
    margin-top: 0px;
    margin-bottom: 3px;
    border: 1px solid #b0b1b3;
    }
    
    #contact-area textarea:focus, #contact-area input:focus {
    border: 1px solid #808080;
    }
    
    #contact-area input.submit-button {
    width: 70px;
    float: left;
    background-color: #b0b1b3;
    color: #FFFFFF;
    }
    
    #contact-area input.half{
    width: 140px;
    margin-right: 0px;
    }
    
    #contact-area input.full{
    width: 280px;
    margin-right: 0px;
    }
    
    #contact-area input.full2{
    width: 280px;
    margin-bottom: 7px;
    margin-right: 0px;
    }
    
    #contact-area input.city{
    width: 140px;
    margin-right: 0px;
    }
    
    #contact-area input.state{
    width: 45px;
    margin-right: 0px;
    }
    
    #contact-area input.zip{
    width: 100px;
    margin-right: 0px;
    }
    
    label {
    float: left;
    text-align: left;
    margin-right: 15px;
    width: 75px;
    padding-top: 5px;
    font-size: 8pt;
    }

    And then here is the coding I used on the page for the contact form:

    Code:
    <div id="contact-area">
    			
    <form method="post" action="contactengine.php">
    
    <table border="0" align="left" cellpadding="0" cellspacing="0">
    <tr align="left">
    <td>
    <label for="FirstName" id="FirstName">First Name:</label>
    <input type="text" name="FirstName" class="half" />
    </td>
    <td colspan="2">
    <label for="LastName" id="LastName">Last Name:</label>
    <input type="text" name="LastName" class="half" />
    </td>
    <td>
    </td>
    </tr>
    <tr align="left">
    <td colspan="2">
    <label for="Company" id="Company">Company:</label>
    <input type="text" name="Company" class="full" />
    </td>
    <td>
    </td>
    <td>
    </td>
    </tr>
    <tr align="left">
    <td colspan="2">
    <label for="Address" id="Address"> Address:</label>
    <input type="text" name="Address" class="full2" /><br/>
    <input type="text" name="Address2" class="full2" />
    </td>
    <td>
    </td>
    <td>
    </td>
    </tr>
    <tr align="left">
    <td>
    <label for="City" id="City">City:</label>
    <input type="text" name="City" class="city" />
    </td>
    <td>
    <label for="State" id="State">State:</label>
    <input type="text" name="State" class="state" />
    </td>
    <td colspan="2">
    <label for="Zip" id="Zip"> Zip:</label>
    <input type="text" name="Zip" class="zip" />
    </td>
    </tr>
    <tr align="left">
    <td>
    <label for="Phone" id="Phone">Phone:</label>
    <input type="text" name="Phone" class="half" />
    </td>
    <td colspan="2">
    <label for="Email" id="Email">Email:</label>
    <input type="text" name="Email" class="half" />
    </td>
    <td>
    </td>
    </tr>
    <tr align="left">
    <td colspan="2">
    <label for="Message" id="Message">Message:</label><br />
    <textarea name="Message" rows="5" cols="20"></textarea>
    </td>
    <td>
    </td>
    <td>
    </td>
    </tr>
    </table>
    
    <input type="submit" name="submit" value="send" class="submit-button" />
    </form>
    </div>
    I can't figure out what else I could use (aside from tables) to position the input areas the way he wants them. Anyone know how to fix IE's stupid problem displaying my code? Or does anyone have a suggestion for a better way to achieve the look of the contact form (as per Firefox, Safari or Camino) that will also work in IE?
    Last edited by booshgal33; 05-24-2008 at 06:01 AM.


  •  

    Posting Permissions

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