SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Aaahhh!

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Aaahhh!

    Grrr.

    Im struggling with getting my design to work.... I know theres another thread of mine about, but I think this warrants another!!

    bg.jpg:



    content.jpg:



    content-repeat.jpg



    footer.jpg:




    And this is the code I've come up with:

    Quote Originally Posted by html
    <!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>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

    </head>


    <body>

    <div id="container">
    <div id="content">
    <h1><a href="/"></a></h1>

    </div> <!--content-->
    <div id="footer">

    </div><!--footer-->
    </div> <!--container-->


    </body>
    </html>



    Quote Originally Posted by css
    body, div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, for, fieldset, blockquote {
    margin: 0px;
    padding: 0px;
    border: 0px;
    }

    body {
    background: #000 url("bg.jpg") top center no-repeat;
    font: 12px Arial, Helvetica, sans-serif;
    }

    html { height: 100&#37;; margin-bottom: 1px; }

    #container {
    width: 848px;
    margin: 0 auto;
    background: url("content-repeat.jpg") repeat-y;
    }

    #content {
    background: url(content.jpg) top no-repeat;
    min-height: 566px;
    }

    #footer {
    height: 129px;
    background: url(footer.jpg);
    }
    But its
    a) not filling the whole page (the bg.jpg)
    b) not 'syncing'. ie the content.jpg is not aligned with the bg.jpg - because bg.jpg is not uniform (the colour changes) you can see the content.jpg outline.

    Hopefully this pic will show you:



    can you see the border round the center image? I just want to try and recreate the outerglow you can see on the content area


    AAAAHHHH!!!!!!!!!

    Hopefully Ive explained this well enough. If anyone knows a better way to approach this Id love your help!

    Cheers!!

  2. #2
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    627
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    a) not filling the whole page (the bg.jpg)
    Change the CSS for the body element so the "no-repeat" is taken out and see if that works.

    b) not 'syncing'. ie the content.jpg is not aligned with the bg.jpg - because bg.jpg is not uniform (the colour changes) you can see the content.jpg outline.
    It's not as bad as you think, but if you want it to look perfect then I'd say you'd need to change the outline / border for the content.jpg and footer.jpg so its a less prominent change in colour and shading. You'll need to do that in Adobe Photoshop, which I see you have .

    Hope this helps,

    Andrew Cooper

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AndrewCooper View Post
    Change the CSS for the body element so the "no-repeat" is taken out and see if that works.
    cheers, but that doesn't really work that well:



    it looks like a jigsaw puzzle!


    It's not as bad as you think, but if you want it to look perfect then I'd say you'd need to change the outline / border for the content.jpg and footer.jpg so its a less prominent change in colour and shading. You'll need to do that in Adobe Photoshop, which I see you have .
    basically my problem comes down to this:

    if I include the content area in the bg.jpg then it will look seemless. But if I then make the bg.jpg stretch to fill the whole screen regardless of monitor size the content area border gets distorted. (btw - why isn't the bg.jpg actually displayed as 1024x786? it looks way too small)

    I could reduce the size of the content area (therefore losing the outerglow effect) and stretch the bg.jpg... but would like to try and keep it.

    Im following this guy's guide: http://www.blog.spoongraphics.co.uk/...into-xhtml-css

    ^ I would love to be able to replicate just the basic page layout but am struggling.

    Maybe I could use png transparency to help and then use code further down the css to display a different content area for those using browsers that don't support it

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just don't understand why im finding it it so hard to make things look proportional

  5. #5
    SitePoint Zealot Kayarc's Avatar
    Join Date
    Sep 2009
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    exactly as andrew said... you need to change the border so there are no patterns/gradients around the edges..you need to have a solid color.. from there you can make the background of your <body> tag to be the color around the edges and it will seamlessly blend..
    Phoenix Arizona Web Design | info *at* kayarc.com | 602.633.2676

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but that would make the whole background a solid colour.

    unless i altered the image in photoshop - which would change the background

    This is what Im after: http://www.fiskebussen.se/

    This is the basis of how its done but doesn't sort the height when the screen is shrunk horizontally. http://css-tricks.com/how-to-resizea...kground-image/ (#3)

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.younic.de/scaling-body-ba...-with-pure-css

    This also seems like a good fix - can anyone comment on these so far?

    Also is it best then for me to have a large image and scale down?

    There seem to be two techniques here - 1 to use (body) overflow:hidden and the other to actually scale the image ie:

    <style type="text/css">
    #background
    {
    width:100&#37;; height:100%; position: absolute; z-index: -1; top: 0; left:0;
    }
    </style>
    </head>
    <body>
    <img id="background" src="background.jpg"/>


Bookmarks

Posting Permissions

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