Forum Moderators: not2easy
Essentially, I'd like to have a triangular-shaped image sticking to the bottom right of my page (bottom 0px right 0px), with the text flowing along the diagonal of the triangle:
quercus q/¦
ercus ro/ ¦
I know I have to stick to verticals/horizontal lines with layers, so I figured I can get around the diagonal problem with slicing my triangular image verticaly into many images, and set each one in the correct position:
<div id="bottom_right_slice_1" style="position:absolute; right:273px; bottom:0px; z-index:1; height: 104px;"><img src="slice_1.jpg" width="90" height="104"></div>
<div id="bottom_right_slice_2" style="position:absolute; right:89px; bottom:0px; z-index:2; height: 317px;"><img src="slice_2.jpg" width="184" height="317"></div>
<div id="bottom_right_slice_3" style="position: absolute; right:0px; bottom:0px; z-index:3; height: 447px;"><img src="slices_3.jpg" width="89" height="447"></div>
The code above displays my sliced triangle nicely positionned at the bottom right.
The problem is that I can't work out where to to put my text (or text layer)! I tried pasting the above code inside a div with my text in it, but it all goes terribly wrong. The best I managed to get was the text displaying correctly on the page, but hidden behing the triangle when resizing, instead of flowing... :(
Any clues?
Cheers
GM
You could just put your image entirely as the background to the required element then use empty floated divs as required for each line of text instead of actually slicing the image..
here's a sample where the image would be the background to the "triangle div" obviously this may not be perfect because you may not know the explicit width of the element but sample for visual reasons only..
<style type="text/css" media="screen">
#triangle {padding: 1px; background: #eee; width: 600px; margin: 0 auto; text-align: right;}p {margin: 20px 0; line-height: 20px;}
.tri {float: right; clear: right; border: 1px dotted #f00; height: 18px;}.f1 {width: 10px;}
.f2 {width: 15px;}
.f3 {width: 20px;}
.f4 {width: 25px;}
.f5 {width: 30px;}
.f6 {width: 35px;}
.f7 {width: 40px;}
.f8 {width: 45px;}
.f9 {width: 50px;}
.f10 {width: 55px;}</style>
</head>
<body>
<div id="triangle">
<span class="tri f1"></span>
<span class="tri f2"></span>
<span class="tri f3"></span>
<span class="tri f4"></span>
<span class="tri f5"></span>
<span class="tri f6"></span>
<span class="tri f7"></span>
<span class="tri f8"></span>
<span class="tri f9"></span>
<span class="tri f10"></span>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
It's alot of extraneous markup, but just by removing the widths on the floats in the CSS they will effectively disappear if you no longer need the effect...
Let us know if there's something here or this is not suitable.
Suzy
