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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts

    slanted text margin

    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...
    Last edited by redhead; 11-09-2002 at 02:32 PM.
    redhead

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/edg...stic/demo.html

    http://www.meyerweb.com/eric/css/edg...ious/demo.html

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    redhead

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that seems to work... but it looks like the same coding used on the example... , ah well, i just guess something arnt meant to be understood by human minds... thanks.
    Last edited by redhead; 11-09-2002 at 03:07 PM.
    redhead

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


    redhead


  •  

    Posting Permissions

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