Create Text Margin within Div - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Create Text Margin within Div

create second margin within div

Jennnnn

6:37 pm on Mar 22, 2018 (gmt 0)

Top Contributors Of The Month

I'm using a purchased template. It contains this HTML within a div:

<p><span class="bignumber">1</span>text text text text
text text text text text text text.</p>

The CSS is:

.bignumber{border-radius:18px;background:#32afe6;box-shadow:0 0 20px #11688f inset;color:#ffffff;display:block;float:left;font:normal 28px/50px Garamond, Georgia, serif;height:36px;margin:0 10px 5px 0;text-align:center;text-transform:uppercase;width:36px;}

I want to remove the number "1" and decrease the size of the circle so it looks more like a large bullet. But, when I decrease the size of the circle the 2nd/ 3rd lines of text float below the circle rather than lining up with the text that starts to the right of the circle.

Is there a way to create a margin so the second and third lines of text have the same left margin as the first line? I changed

margin:0 10px 5px 0; to margin:0 10px 20px 0;

That helped but the amount of text varies from page to page so sometimes the text is too long / short for the "margin" to work or the lower circle (there are two circles, one below the other) is indented because the text above is too short.

Thanks for your help!

NickMNS

7:28 pm on Mar 22, 2018 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

What I strongly recommend is that if you want a bulleted list then you should use a bulleted list.
replace all your <p> tags with:


<ul>
<li>text text text text text text text text text text text.</li>
<li>text text text text text text text text text text text.</li>
<li>text text text text text text text text text text text.</li>
</ul>

This will provide you with a bulleted list. It might break things on your page given the complex and bloated code used. But if that is the case report back and will gladly help you. But I will not encourage you to continue creating a list with paragraph tags.

Notes:
1- for a numbered list use: <ol> instead of <ul>
2- there is a chance that bullets do not appear if the script-kiddy who made the template set list-styles to none.

Jennnnn

1:12 am on Mar 23, 2018 (gmt 0)

Top Contributors Of The Month

Is it possible to create a bullet styled like .bignumber (without the number) without using an image? I use traditional black bullets but I also want to use larger blue bullets to highlight some information.

I created a class:

ul.bluebullet li{border-radius:16px;background:#32afe6;box-shadow:0 0 20px #11688f inset;float:left;height:32px;margin:0 10px 20px 0;width:32px;}

And wrote:

<ul class="bluebullet">
<li> text</li>
<li> text</li>
<li> text</li>
</ul>

But that doesn't work. Thanks for your help!

NickMNS

2:01 am on Mar 23, 2018 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

To do what you would like you need to style the <li> element. If you want just the bullet or bullets to be larger and not the text you would need to add a <span> inside the <li> and style that separately.

For example:


html:
<ul>
 <li class="bluebullet"><span class="list-text">Some Text</span></li>
 <li class="bluebullet"><span class="list-text">Some Text</span></li>
 <li><span>Some Text</span></li>
 <li>Some Text</li>
</ul>

css:
li{font-size:24px; color:black;}
li.bluebullet{font-size:32px; color:blue;}
span.list-text{font-size:24px; color:black;}

working example
[jsfiddle.net...]

Jennnnn

5:47 pm on Mar 24, 2018 (gmt 0)

Top Contributors Of The Month

I was able to create blue bullets but initially the bullets were left of the page's left margin and the text started below each bullet so I ended up with:

CSS:
li.bluebullet{font-size: 50px; color:#32afe6; margin: 0 0 0 19px;}
span.list-text{font-size:16px; color:black; vertical-align: middle; position: absolute; margin: 0 0 0 -15px;}

Is there a way to add a shadow effect to the bullet without it being an image? The bullet color is fairly light so it doesn't contrast well against a white background. I don't want to darken the color because its a "site" color (same color is used in my logo which appears againt a black background). Thanks!

NickMNS

6:31 pm on Mar 24, 2018 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Is there a way to add a shadow effect to the bullet without it being an image?

Not that I am aware of. I tried using text-shadow property but only adds a shadow tot he text and not the bullet.

The bullet color is fairly light so it doesn't contrast well against a white background. I don't want to darken the color because its a "site" color (same color is used in my logo which appears againt a black background).

Understood, but you can play with the Lightness/darkness and the color will still fit in. I use this tool to help with color selections: [w3schools.com...]
Plug in your color and then you can select the hex# number for the same lightness without changing the hue. so for color:#32afe6 I would darken it a bit to #1686b6.

Jennnnn

8:51 pm on Mar 24, 2018 (gmt 0)

Top Contributors Of The Month

Thanks!