PDA

View Full Version : achieve attached effect?


tony09uk
03-30-2011, 10:49 PM
I have been trying to achieve an effect on Dreamweaver that I created in Photoshop. Could someone please look at the attached file and help me out? Basically its made to look like it wrapping around the content section. I have tried using an AP div but can't seem to get it right, either its out of alignment by a few pixels or it its in a completely different area on the page. The attached image is taken from my closest attempt. I think im close, but am missing something in the set up stage or got a tag wrong somewhere.

edbr
03-31-2011, 01:09 AM
is this the body that is black, and a content wrapper thats centred?

edbr
03-31-2011, 01:20 AM
if its a div try this

<style>
.border{
position:relative;
width:200px;
height:200px;
border:#000 solid 20px;}

</style>



<div class="border"> </div>

domedia
03-31-2011, 01:10 PM
Sitepoint had a nifty way of achieving it, plus some more, CSS only:
http://blogs.sitepoint.com/pure-css3-ribbons/

tony09uk
04-03-2011, 07:50 PM
Domedia, thanks for the direction. After reading your post I was able to find a tut that uses images to achieve the effect i'm after.

I have a new problem now though :(

Ive followed this tut
http://webdesign.tutsplus.com/tutorials/site-elements/create-a-3d-ribbon-wrap-around-effect-plus-a-free-psd/
and achieved it in my practice file (see attached: dump1) But when I try it in my site it doesn't work (see attached: dump2).

Below is the code for image 1:


<style type="text/css">
#wrapper {
background-color: #0FF;
height: 500px;
width: 500px;
margin-right: auto;
margin-left: auto;
visibility: visible;
}
#wrapper #holder {
background-image: url(bannerEdge-right.gif);
width: 100%;
height: 300px;
background-repeat: no-repeat;
background-position: 470px;
visibility: visible;
padding: 10px;
}
body {
background-color: #000;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="holder"></div>
</div>
</body>
</html>

Here is the relevant code for the dump2 img(the one I can't make work):

#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
height: auto;
background-color: #000;
position: relative;
}
#wrapper #bgContent {
background-color: #3a3535;
height: auto;
width: 100%;
}
#wrapper #bgContent #bgContentRight {
float: right;
height: 295px;
width: 275px;
margin-top: 20px;
margin-left: 20px;
background-color: #EDFBEA;
padding-top: 5px;
padding-right: 5px;
padding-left: 20px;
background-image: url(../images/bannerEdge-right.gif);
background-repeat: no-repeat;
visibility: visible;
background-position: 260px bottom;
}

<div id="wrapper">
<!--main content-->
<div id="bgContent"><div id="testShadow"><img src="images/gradients/testimonialShadow.jpg" width="301" height="18" /></div>
<!--main content holder, only here to give me more freedom to play with the bgcontentRight container-->
<div id="bgContentLeft"> </div><!--end bgContent left-->
<!--listed as testimonials-->
<div id="bgContentRight">
</div><!--end bgcontent right-->
</div><!--end bg content-->
</div>
<!--end wrapper-->

what am I doing wrong?

tony09uk
04-05-2011, 08:58 AM
whooo, ie done it. Granted as a consequence i only got 2hrs sleep last night....but so be it!

It turned out i needed to set padding to -figures, then i set the margin on the other side to double that figure. I havent tested it for cross browser compatability. But ive had a look in chrome and i like it.

I have a new question now, id like the images to only be seen on non css3 browsers, how do i do it?