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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Full width Img over 960px wide content

    Hi everyone,

    I have just finished the design of one new project, and are now about to start programing it into html/css but can't figure out, how to do it. For a better understanding, here a quick sketch:

    The content should be 960px wide and responsive, which in theory shouldn't be a problem to program. However, I am looking to get one image which is 100% wide, and this image should be covered by two DIVs with each an opacity of 50%. Each of these two DIVs will contain some text and a button.

    A further issue is the footer. As you can see, I have designed two full width colored rectangles but the content should only be within the centered 960px - just like the main content above.

    Could anyone please explain me how to implement this design into css/html?

    Thank you in advance!
    Max


    [img=http://s22.postimg.org/o9c31e3wd/dks_frame_plan.jpg]

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    South Florida
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The first part of your question I'd do with 3 divs
    <div id="one">
    <div id="leftbox">text or other divs in here</div>
    <div id="rightbox">text or other divs in here</div>
    </div>

    The css would be:
    #one {
    width:960px;
    }
    #leftbox {
    float:left;
    background-image:url(imagename.gif);
    background-repeat: no-repeat;
    width:50%;
    height:100px;
    }
    #rightbox {
    float:right;
    background-image:url(imagename.gif);
    background-repeat: no-repeat;
    width:50%;
    height:100px;
    }

    I'd start here. You may need to add "position:relative;" and/or "overflow:hidden;" depending on how you code the divs surounding it.

    Once the browser window is less then 960px-ish, it will not resize until you do the correct CSS with media queries. Good luck.


  •  

    Tags for this Thread

    Posting Permissions

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