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 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    53
    Thanks
    26
    Thanked 1 Time in 1 Post

    What's the Right Code To Achieve This?

    Go here: http://thefasterwebmaster.com/

    Scroll down to the end of the page and you'll see the following image:


    Any idea what's the right code to place in my css and html to achieve this on my site?

    I'll use my own text and image, I'm just trying to figure out how can I get the "blue block and brown outline".

    Can anyone help?

    thanks

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by pumalean View Post
    Go here: http://thefasterwebmaster.com/

    Scroll down to the end of the page and you'll see the following image:
    ...

    Any idea what's the right code to place in my css and html to achieve this on my site?

    I'll use my own text and image, I'm just trying to figure out how can I get the "blue block and brown outline".

    Can anyone help?

    thanks
    Since your brown looks like it has some gradient to it I would probably wrap a <form> within a <div>.

    The outer div would have a background image of the brown gradient and no border. The form would have a 1px black border and that blue color as the background color.

    It might look something like this (just guessing at the blue color's hex code):

    HTML:
    Code:
    <div id="offer_wrapper">
      <form id="offer" ...
          ...
      </form>
    </div>
    CSS:
    Code:
    #offer_wrapper {
    background:transparent url(/images/offer_bg.jpg) no-repeat;
    padding:10px; /*or whatever the actual brown border area's thickness is*/
    }
    #offer {
    background-color:#ace; /*just a wild guess*/
    border:1px solid #000;
    padding:10px; /*another wild guess, but this just keeps the text and images off of the border*/
    }
    If your brown part won't have any gradation then you can replace the background statement for #offer_wrapper above with background-color:[your hex code for the brown color here]; instead.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    pumalean (12-09-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    They use a lot of images and tables for making that layout. Take a look at the output of
    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" xml:lang="en" lang="en">
    <head>
    <title>Box</title>
    <style type="text/css">
    div.outer{
    width:500px;
    border:10px solid #BBA884;
    background:#CEE6EA;
    margin:0 auto;
    }
    div.inner{
    border:1px solid #674F35;
    padding:1em;
    }
    </style>
    
    </head>
    
    <body>
    
    
    <div class="outer"> 
      <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare pellentesque porttitor. Morbi ullamcorper hendrerit dolor. In hac habitasse platea dictumst. Proin vulputate, lectus vel rhoncus tincidunt, neque sem mollis augue, in lobortis neque libero in nunc. Suspendisse laoreet ullamcorper diam at eleifend. Nam ante arcu, elementum nec sagittis et, aliquam vel nibh. Proin malesuada porta scelerisque. Vivamus auctor, nisi vitae pharetra tincidunt, mauris turpis convallis velit, malesuada bibendum ipsum ipsum in nulla. Nullam viverra, lectus ut iaculis ullamcorper, ipsum tellus eleifend nisi, condimentum fringilla erat purus ut nisi. Integer eget nunc felis. Praesent id erat a mauris aliquet tristique ornare vitae enim. Nulla mollis aliquam arcu eu facilisis. Nulla nec nulla id augue dignissim pellentesque eget vel odio. Nullam non felis a felis hendrerit tempor. Vivamus sit amet quam varius ante hendrerit vulputate. Sed non nisl libero, ac feugiat arcu. Etiam sem velit, tempor imperdiet aliquam congue, lacinia ac lorem.
      </div>
    </div> 
    </body>
    
    </html>
    Last edited by abduraooft; 12-10-2009 at 04:10 PM. Reason: typo
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think that whole thing is a container div with 4 divs inside of it: 3 that float on the top (thumbs up, check box, and "YES ERIK!") and the one (cleared) on the bottom which contains the rest of it, including the over-sized "Add to Cart" image.

    This container div simply has a thick and solid brown border, because the border doesn't look like a gradient to me. Then just below that container div there's an image aligned directly beneath it to simulate a shadow.

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    53
    Thanks
    26
    Thanked 1 Time in 1 Post
    Yes, I tried the earlier css and html, they dont achieve results like what the sample site has....there are images I need to use.

    Can someone provide the right css and html?

    I'll try to do it again.

    thanks a bunch.

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by wuyoo020 View Post
    This container div simply has a thick and solid brown border, because the border doesn't look like a gradient to me. Then just below that container div there's an image aligned directly beneath it to simulate a shadow. FF11 RMTAION RMT
    The outer div would have a background image of the brown gradient and no border. The form would have a 1px black border and that blue color as the background color.
    Incorrect, you link-spamming post-copying miscreant! (links removed before my quotation of you and reported to mods, by the way)

    Also, incorrect, JavaScriptGuy!

    That container is actually a table with images used for that brown border and there most certainly is a slight gradient involved in the example the OP provided an image for.

    I hadn't checked the link as I read too quickly and thought it was a link to the OP's site but now that I review the code there I see it is apparent that abduraooft's suggestion was right on the money, so to speak. Avoid using tables to duplicate this and give abduraooft's code a shot as it replicates the appearance quite well without any useless markup or images.

    The use of a thick border is different than what I would have chosen as I have seen some odd effects with cross-browser performance when using thick borders (in my experience borders can throw off IE's box model). I would have opted for simple 10px padding on the container with a background color to mimic the border color, but this really is a matter of taste. You'll be fine either way in most cases.

    Assuming you intend to use this as a form like the example you linked to, this would be my version (colors borrowed from abduraooft):

    CSS:
    Code:
    * {margin:0;padding:0;border:0;} /*universal reset to get rid of browser default margins and padding - this starts all browsers out on fairly even footing*/
    #offer_wrapper {
    background-color:#BBA884;
    margin:0 auto;
    padding:10px;
    width:500px;
    }
    #offer {
    background-color:#CEE6EA;
    border:1px solid #674F35;
    padding:10px; 
    }
    HTML:
    Code:
    <div id="offer_wrapper">
      <form action="" id="offer">
        <p>blah blah blah</p>
      </form>
    </div>
    If it won't be a form then just replace the <form> tags above with <div> tags and you'll be all set.

    With that said, if you actually do want the gradient in that brown area then a slightly different approach would be needed. I won't go into detail unless that's relevant to your needs though so let me know.
    Last edited by Rowsdower!; 12-10-2009 at 03:32 PM. Reason: cleaning up code...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Rowsdower! View Post
    Incorrect, you link-spamming post-copying miscreant! (links removed before my quotation of you and reported to mods, by the way)
    Unfortunately for him, we operate a "one strike and you're Spookstered" policy. We shan't be seeing him again.


  •  

    Posting Permissions

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