...

View Full Version : slanted text margin



redhead
11-09-2002, 11:32 AM
hi guys,

I'm not sure if this is possible but someones asked me to do it so i thought i'd ask here before saying "no"....

I want to have a negativly (top left, bottom right) slanted margin on some text, something like this...

&nbsp;\ <-- (margin)
&nbsp;&nbsp;&nbsp;\ Hello
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\ Here is some text
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\ on a negativly slanted margin
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\ etc

any help would be greatly appreciated...

MCookie
11-09-2002, 12:03 PM
Well that would be nice! Maybe in 10 years time there will be something like "margin-left:3;" but until then, you have to improvise I guess. With JS (?) or images:

http://www.meyerweb.com/eric/css/edge/slantastic/demo.html

http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html

redhead
11-09-2002, 12:38 PM
ok thanks MCookie, i thought that'd be the general responce. ive taken a look at them examples... the one with sloped edge doesnt degrade very well in IE though. i'll see if anyone else has anything to say.

MCookie
11-09-2002, 03:42 PM
Mac/IE doesn't let the text follow the divs and shows just a block of text, but it looks great (on Mac) in Mozilla and Opera. Don't know about Win/IE.


<html>
<head>
<title></title>
<style type="text/css">
<!--
#main {
width:80%;
margin:10%;
text-align:left;
}
div.var {
height:10px;
float:left;
clear:left;
}
-->
</style>
</head>
<body>
<div id="main">
<div class="var" style="width: 0;"></div>
<div class="var" style="width: 5px;"></div>
<div class="var" style="width: 10px;"></div>
<div class="var" style="width: 15px;"></div>
<div class="var" style="width: 20px;"></div>
<div class="var" style="width: 25px;"></div>
<div class="var" style="width: 30px;"></div>
<div class="var" style="width: 35px;"></div>
<div class="var" style="width: 40px;"></div>
<div class="var" style="width: 45px;"></div>
<div class="var" style="width: 50px;"></div>
<div class="var" style="width: 55px;"></div>
<div class="var" style="width: 60px;"></div>
<div class="var" style="width: 65px;"></div>
<div class="var" style="width: 70px;"></div>
<div class="var" style="width: 75px;"></div>
<div class="var" style="width: 80px;"></div>
<div class="var" style="width: 85px;"></div>
<div class="var" style="width: 90px;"></div>
<div class="var" style="width: 95px;"></div>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p></div>
</body>
</html>

redhead
11-09-2002, 04:05 PM
that seems to work... but it looks like the same coding used on the example... :confused:, ah well, i just guess something arnt meant to be understood by human minds... thanks.

redhead
11-09-2002, 04:33 PM
ive been fiddling around with that and also added some extra bits... this looks great in IE & K-Meleon... gives it a slant at both sides... nice effect:


<html>
<head>
<title></title>
<style type="text/css">
<!--
#main {
width:80%;
margin:10%;
text-align:left;
}
div.var {
height:10px;
float:left;
clear:left;
}
div.var2 {
height: 10px;
float: right;
clear: right;
}
-->
</style>
</head>
<body>
<div id="main">
<div class="var" style="width: 0;"></div>
<div class="var2" style="width: 95px;"></div>
<div class="var" style="width: 5px;"></div>
<div class="var2" style="width: 90px;"></div>
<div class="var" style="width: 10px;"></div>
<div class="var2" style="width: 85px;"></div>
<div class="var" style="width: 15px;"></div>
<div class="var2" style="width: 80px;"></div>
<div class="var" style="width: 20px;"></div>
<div class="var2" style="width: 75px;"></div>
<div class="var" style="width: 25px;"></div>
<div class="var2" style="width: 70px;"></div>
<div class="var" style="width: 30px;"></div>
<div class="var2" style="width: 65px;"></div>
<div class="var" style="width: 35px;"></div>
<div class="var2" style="width: 60px;"></div>
<div class="var" style="width: 40px;"></div>
<div class="var2" style="width: 55px;"></div>
<div class="var" style="width: 45px;"></div>
<div class="var2" style="width: 50px;"></div>
<div class="var" style="width: 50px;"></div>
<div class="var2" style="width: 45px;"></div>
<div class="var" style="width: 55px;"></div>
<div class="var2" style="width: 40px;"></div>
<div class="var" style="width: 60px;"></div>
<div class="var2" style="width: 35px;"></div>
<div class="var" style="width: 65px;"></div>
<div class="var2" style="width: 30px;"></div>
<div class="var" style="width: 70px;"></div>
<div class="var2" style="width: 25px;"></div>
<div class="var" style="width: 75px;"></div>
<div class="var2" style="width: 20px;"></div>

<p align="justify">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p></div>
</body>
</html>

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum