Hovering circle between two div's

HTML & CSS
1

I am wondering how i can add a circle above the middle of the two main sections in (#herospace) that says “Or”.

Basically showing the user to pick between one of the two types of programs.

Any ideas to point me in the right direction would be great.

Thanks
Ryan.

2

You could ad a <div class="or">OR</div> in your mark-up, between the container DIVs of each option. OR you could generate it with CSS using something like: #herospace:before { content:‘or’;}

you can style it into a circle doing something like:

   yourchosenselector { height:2.55em; width:4em;  border-radius:100%; padding-top:1.45em; background: gray; text-align: center; position:absolute;left: 50%;; margin-left:-2em; top: 50%;  top-left:-2em;}

hope that helps

3

Thanks Dresden - Definitely almost there. I have an issue with the text not being in the center of the circle.

Can you check out the new updated site/code?

Ryan.

4

Remove the padding top and just use line-height.

.circle{
padding:0;
line-height:95px;
text-align:center;
}

Line-height:100px would be perfectly centred if there were descenders so I just knocked a few px off.

5

There was a reason I used EMs, and why I did the padding the way I did … I should have mentioned that earlier. :smile:
If you place back those proportions the text will be centered in the circle. you can then control l the size of the whole thing simply by adjusting the font-size: property on the element

6

Thank you.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.