...

View Full Version : What's the Right Code To Achieve This?



pumalean
12-09-2009, 01:45 PM
Go here: http://thefasterwebmaster.com/

Scroll down to the end of the page and you'll see the following image:
http://i381.photobucket.com/albums/oo251/ppcc2008/block.jpg

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

Rowsdower!
12-09-2009, 02:17 PM
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:
<div id="offer_wrapper">
<form id="offer" ...
...
</form>
</div>

CSS:
#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.

abduraooft
12-09-2009, 02:19 PM
They use a lot of images and tables for making that layout. Take a look at the output of
<!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>

JavaScriptGuy
12-10-2009, 06:31 AM
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.

pumalean
12-10-2009, 09:47 AM
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.

Rowsdower!
12-10-2009, 04:18 PM
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! :thumbsup:

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:

* {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:

<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.

Apostropartheid
12-10-2009, 05:18 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum