/    Sign up×
Community /Pin to ProfileBookmark

How to define more text in current divider?

Copy linkTweet thisAlerts:
Feb 16.2007

I have code the following problem for divider.

  • 1. I would like to add more text but it gives me wrong design if I have more text.

  • 2. Also as corner image is transparent, it will be delay in showing image.

    • How to do correct for these two problems?

    Code is:

    [code=php]

    <html>

    <head>
    <title></title>
    <style type=”text/css”>
    .textdivider
    {font-family: sans-serif;color: #ffffff; font-size:11px; text-decoration: none; font-weight:bold; background: transparent;}
    </style>
    </head>

    <body>
    <table style=”height:20″ width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
    <tr><td bgcolor=”#8C9CD5″><div class=”textdivider”>&nbsp;Sample&nbsp;of&nbsp;this&nbsp;divider&nbsp;&nbsp;</div>

    </td><td bgcolor=”#8C9CD5″><img src=”corner.gif” border=”0″ /></td>

    <td valign=”top” background=”upline.gif” width=”100%” bgcolor=”#FFFFFF”>&nbsp;</td>

    </tr>
    </table>
    </body>

    </html>[/code]

    [upl-file uuid=20973b54-7146-48b0-8b6e-4b4008ed85d9 size=190B]corner.gif[/upl-file]

    [upl-file uuid=fc30f5b5-8e3e-4342-9e73-a2bf82af9d8b size=68B]upline.gif[/upl-file]

    to post a comment
    CSS

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @David_HarrisonFeb 18.2007 — Here's a CSS based divider, with no images. It uses borders to create the line across the top and also the slanty bit.

    [upl-file uuid=81e2865a-5cb6-480f-a752-928dce1f38fa size=1kB]CSS Divider Example.zip[/upl-file]
    Copy linkTweet thisAlerts:
    @toplisekauthorFeb 19.2007 — Hi,

    thank you. it works without problem.

    Do you know how to put more space between the text and angle with css?

    thank you again.

    Regards?

    I have solved this problem.

    thank you.
    [code=php].divider p{
    padding:0 0.8em 0.4em 0.4em;[/code]
    Copy linkTweet thisAlerts:
    @David_HarrisonFeb 19.2007 — You have to be careful when you alter the top and bottom padding, otherwise the slant doesn't line up properly. Altering the left and right padding is fine though. In the code you posted, you increased the bottom padding by 0.2em, so now the slant doesn't reach the bottom of the paragraph. To fix this, the borders for .divider_angle have to also be increased by 0.2em.

    I would also suggest keeping the top and the bottom padding 0.2em apart, so rather than 0em at the top and 4em at the bottom, have 1em at the top and 3em at the bottom. This will vertically centre the text within the purple area. The reason why the top padding should be 0.2em less than the bottom padding is because the blue line that runs across the page is 0.2em high.

    Keeping the left padding slightly bigger than the right padding might also look better, because although it means the text won't be centred, it will look like it is, because of the slant adding to the width.

    Perhaps something like this: padding:0.1em 0.5em 0.3em 0.7em;That's 0.1em top padding, 0.5em right padding, 0.3em bottom padding and 0.7em left padding. It's anti-clockwise from the top.

    However, like I said, the border widths on .divider_angle will need to be altered. The formula for that is 1.1em + top padding + bottom padding. So since the top padding is 0.1em and bottom passing is 0.3em, that means the border widths should be 1.5em, like so: border-top:1.5em solid #8C9CD6;
    border-right:1.5em solid #FFF;
    ×

    Success!

    Help @toplisek spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...