SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout of header images, in relation to screen size. Keeping things relative.

    Hi

    I'm working on a website, (demo at www.mariodecristofano.com/vrtraining1/) which has been decided by the client, to be ok. The client wants to emulate the header graphic (Union Jack flag) at http://www.veteransretreat.org.uk and has provided me with the orginal graphic (the client owns that website too!) In the new site however, I want the flag to only be as tall as the white space made available for it.

    Now I know not to use dirty AP Div's or tables for this, but looking at the existing site CSS I can see the following addition should work (?) when I add it to my CSS

    body {
    background-image: url(../image/motif_test.png);
    background-repeat: no-repeat;
    background-position:top center;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #ffffff;

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;

    }


    But I can't get it to display anything. It's like its not reading this bit of CSS or I am doing something dumb (likley).

    The CSS for the Veterans Retreat website which I'm trying to emulate is here

    The CSS for my VR Training site is here

    I'd be terribly grateful of any help anyone could offer, and if there's something I can do in return, I'd be happy to help

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mario

    The flag isn't showing because you have a couple of divs with bg images that are overlaying "main-bg" and "main-wrap".

  3. #3
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, is there a way you would personally recommend to display the flag image then?

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might want to try putting a div in that covers that white area at the top and put the background image in that.

  5. #5
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Richard, sorry I'm such a numpty, are you saying that I should add a Div within the site, or via the CSS. If I add a Div around the image slider, won't that just push the image slider vertically down!?

  6. #6
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding a DIV and attempting to insert the flag image (motif_test.png) into that, did as I thought, and moved the image slider down. I know I'm being a tool, I just want to ensure I do this correctly, so it sizes appropriately at different screen res's and browser window sizes etc, this is my weakness!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Presumably you just want that flag image to show in the white area? If so, instead of using a white image on .main-wrap, use the flag image as the background, and set the background color to white.

    Code:
    .main-wrap {background: #fff url(../image/motif_test.png) no-repeat right top;}

  8. #8
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph, doing that, (and of course, reverting to my original CSS file and undoing all my other attempts) doesnt appear to do much. It makes sense what your saying but doesnt change anything. Ideally I want to keep the lower half portion blue and just the header white, but still, I can't get this to work whatsoever...hmmm..?

  9. #9
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and yes I want the flag in the top right, as per www.veteransretreat.org.uk

  10. #10
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My CSS adjustment as per your advice is


    .main-bg {
    background:url(../image/body_bg.png) repeat 0 0
    }
    .main-wrap {
    .main-wrap {background: #fff url(../image/motif_test.png) no-repeat right top;}
    padding-bottom:20px;
    }

  11. #11
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im trying to now modify the .main-wrap body_bg2 image, to just be the flag. Now, I thought I'd be able to use repeat-absolute, but I can't. Whats the best way of making this absolute?

  12. #12
    SitePoint Member
    Join Date
    Aug 2012
    Location
    London, Midlands
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought I'd be able to use the position element,

    .main-wrap {
    Position:absolute
    background:url(../image/body_bg21.png) no-repeat;
    padding-bottom:20px;
    }

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    No, don't use positioning. It's horrible, and doesn't work on background images anyway.

    Each of the CSS examples you have above contains errors. Make sure to put a ; at the end of each line. And in post #10 you have styles within styles, which don't work.

    I've lost track of where you are up to with this. I still suggest you look at the solution I posted above, which would place the flag image on the white area only.


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
  •