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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with custom list styling bullets

    Hi,

    I’m just starting out with css and figured out how to get a triangle bullet by searching around google. But, I can't figure out why the bullet and text are not aligned properly.. Can someone help me out and provide some explanation? I'm using bootstrap so I can see how css is done

    Here is a screenshot: http://i60.tinypic.com/11uxkqe.png (as you can see, the triangle and the word Testing and not aligned properly..)

    My css code:
    Code:
    .content-wrapper ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    
    .content-wrapper ul > li:before {
        content: '\2023';
        color: #6c9ec0;
        font-size: 28px;
        padding-right: 10px;
        float: left;
        display: block;
        position: relative;
    }
    Html:
    Code:
    <ul class="clearfix">
         <li><h3>Testing...</h3></li>
    </ul>

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    115
    Thanks
    8
    Thanked 7 Times in 7 Posts
    the image that you refer to is:
    http://oi60.tinypic.com/11uxkqe.jpg

    There is no way that anyone can see code in a jpg. Of course if you are using an image then you don't need bullets in css, just edit your picture.

    on the other hand, you might be able to raise the bullet if you add another property to your css for .content-wrapper ul > li:before.

    after position: relative; add top: -4px; and see if it helps. If you want to raise it higher then lower the value, and if you want it lower then raise the value.
    Last edited by sbhmf; 04-05-2014 at 04:48 AM.

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What do you mean by "there is no way that anyone can see code in a jpg"? That screenshot is to show you about the unalignment that I'm talking about... Which is why I provided my actual css for it in the code block.

    But your suggestion worked. Also, the position of the triangle bullet seem to be different in different browsers. Is there a way to fix that and make them the same?

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    115
    Thanks
    8
    Thanked 7 Times in 7 Posts
    I tried to help you understand that there is a limit to the effectiveness of forum members' help when the code in question is not made available.

    An image displaying the results of your code is insufficient if anyone is to assist you further; you need to post the actual HTML that produces the list. Then forum contributors are capable of replicating your code and identifying and resolving your problems.

    Many here are available to help you out, so post your code. We need to see the entire HTML in the context of your question, and that includes the HTML container-element of your list and at least some of the lists' items. Also, you must not change the attributes or values of the HTML elements in the code that you post, because that is what helps us determine how the CSS will impact your bullets. Be sure to include your latest CSS as well.

    On that note, you may freely change the content of the list items themselves (i.e. the content that exists between < li> and < /li> elements) if they contain sensitive information.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jjwooyoung,
    Instead of your content bullet, look at this method which gives you more control over the bullets position.

    You could also try this method -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    .content-wrapper {
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    }
    .content-wrapper ul  li {
    	padding-right: 10px;
    	color: #6c9ec0;
    	list-style: url(your_bullet_image.jpg);
    	font-size: 28px;
    }
    </style>
    </head>
    <body>
        <div class="content-wrapper">
    		<ul>
    			<li>Testing...</li>
    		</ul>
        <!--end .content-wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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