WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to add styling to by adding class/css? (10 posts)

  1. jbwhisler
    Member
    Posted 7 months ago #

    I am wondering the proper way to insert an <hr> using CSS3 and styling it so that the width is the same width as the upper menu lines. The lines I am trying to style are on the home page at the bottom. Here is my website and any help would be appreciated. Thank you.

    http://www.concordiabaptist.com

  2. Keith Driscoll
    Member
    Posted 7 months ago #

    Try adding this to your CSS stylesheet:

    'hr {
    border:0;
    color:#ededed;
    background:#ededed;
    height:1px;
    }'

    Hope that helps :)

  3. Evan Herman
    Member
    Posted 7 months ago #

    Hi jbwhisler,

    you can create an <hr> tag in the exact way that you have mentioned in your OP. You can add styles to it in the same way you can add styles to any other element. You can add them inline ie:

    <hr style="width:100%;border:1px solid black;>

    or, a better way to apply styles to an element is through adding specific classes to your element.

    For example your HTML may look something similar to this:

    <hr class="custom-seperator">

    and you would create a CSS class called .custom-seperator and apply styles to it like so:

    .custom-seperator {
       width:100%;
       border:1px solid black;
    }

    You can add the same class to all <hr> tags, so when you want to adjust a color, width or any other property you can go into the CSS and target all of your <hr> elements at the same time.

    I hope this helps and points you in the right direction.

    Evan

  4. jbwhisler
    Member
    Posted 7 months ago #

    Everything looks good. I am trying to position the horizontal rule so that it is in the middle. What attribute should I use? The example I am experimenting with is still on my homepage. (The bottom two <hr>) Thank you both for your help.

  5. Evan Herman
    Member
    Posted 7 months ago #

    To center the bottom two <hr> elements you just need to remove the 100% width that you have declared here:

    .customhr { width:100%; }

    When you remove the width decleration, your bottom two <hr>'s will shift back towards the middle.

    Evan

  6. jbwhisler
    Member
    Posted 7 months ago #

    Is there a way to make the width of the <hr> elements that same width as the top navigation bar that contains the links? Thanks.

  7. Keith Driscoll
    Member
    Posted 7 months ago #

    You top bars are div borders, while you are trying to recreate the same using a horizontal rule. Remove 'margin: 24px;' from the bottom hr properties :)

  8. Keith Driscoll
    Member
    Posted 7 months ago #

    Just find this in your CSS:

    hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin: 24px;
    margin-bottom: 1.714285714rem;
    width: 100%;
    }

    and remove the 'margin: 24px;' line.

  9. jbwhisler
    Member
    Posted 7 months ago #

    Keith, that looks like it did the trick. Thanks again for all of your help. CSS is magic.

  10. jbwhisler
    Member
    Posted 7 months ago #

    Thanks to all.

Reply

You must log in to post.

About this Topic

Tags