Horizontal line with text

[nsd999]

Hi gang.

I'm a bit stuck and hope someone can help. I'm trying to add horizontal dividers with centered text that looks like:

--------------------------- Text ---------------------------------

And nothing I do seems to work. I'm using a slightly modified version of the Ship Shape theme if that helps..

I've tried everything I can think of including:

Code: Select all

.divider {
    width:960px;
    text-align:center;}

.divider hr {
    margin-left:auto;
    margin-right:auto;
    width:32%;}

.left   { float:left; }
.right { float:right; }

<div class="divider"><hr class="left"/>WHAT OUR CUSTOMERS ARE SAYING<hr class="right" /></div>


..and..

Code: Select all

<div style="height: 2px; background-color: black; text-align: center">
  <span style="background-color: white; position: relative; top: -0.5em;">
    WHAT OUR CUSTOMERS ARE SAYING
  </span>
</div>


They both work properly outside of SS.. Is there something I'm missing?

Thanks,
Joe

[Jim]

Where are you entering the code, in a page text field or in a custom template?

I tried adding the code to a page text field here is what I saw
The first example adds a full width hr then on a new line the text and then on another new line the last hr.
-----------------------------------------------------------------------
WHAT OUR CUSTOMERS ARE SAYING
----------------------------------------------------------------------

The second example works just like what I think you were trying to describe,
a leading black line WHAT OUR CUSTOMERS ARE SAYING a following black line
---------------------WHAT OUR CUSTOMERS ARE SAYING---------------------------

Some of the built in themes already have styles defined for hr, .left, .right etc so you may want to check the style sheet the template is using and see if those are overriding your styles.

[nsd999]

Hi Jim,

Thanks for the reply. It turns out I didn't link my custom stylesheet correctly. Thought it was being used - but I was off by a capital "M".

All is well now, thanks.

- Joe