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
    Mar 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Repeating an image vertically

    I have a little squarish design that I want to have about 25% from the top on the users screen with blue going vertically from both the top and bottom of the design, scaling with varying resolutions...

    How do I do that? I'm still quite a noob to HTML/CSS...

    I did a bit of googling and found: <div style="background: url("images/repeattop.gif") repeat-y; width: 670px">

    but it doesn't seem to work?

    also, how would I make it so that the main sliced up content area is placed 25% from the top? (not exactly in the center, but not all the way up top)

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello commandercup,
    Have you tried any code yet? It's hard to tell what you're after and doubly so without having your images...
    Something like this may get you started?
    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 {
    	width: 80%;
    	height: 400px;
    	margin: 15% auto 0 auto;
    	background: #999;
    	overflow: auto;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
        <!--end wrap--></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

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    well I haven't tried your code yet... but here is an image of what i mean.



    I plan on slicing up an image like this... the blue bar represents where all the navigation links will be... while the right side (white) will represent the main content area...

    I want the design to scale with the resolution of the visitor... how do I make it do that?

    For Example: If I want the blue to fill up the entire left side of their browser window, and the white to fill up the entire right side (and for the white to scale with the content, so if there is more text then will fit on their screen, it'll start scrolling vertically) how do I do that?

    Thanks!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Ah, another full-height layout. I missed that when I read your first post so that code above does not do the full height. Seems like that's all anyone is doing lately, full height layouts.
    Have a look at the bullet proof solution at http://nopeople.com/CSS/full-height-layout/index.html

    You'll want that method with a full width layout and faux columns for your blue and white columns.
    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

  • Users who have thanked Excavator for this post:

    commandercup (03-10-2009)

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ok thanks!


  •  

    Posting Permissions

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