0

please visit this link : http://demo.kidsdial.com/

below slideshow images, you can see " TOP OFFERS" text displaying between line

if you scroll down below, you can see " TOP CATEGORIES" text, i used same code for above also , but

"TOP CATEGORIES" text is not displaying between lines.

basically i am using following link . but why it's not working.

CSS technique for a horizontal line with words in the middle

for above link code i am using this one too : 

<div class= "horizontal_line_1 ">
<div><span>text TEXT</span></div>
</div>
Community
  • 1
  • 1

2 Answers2

0

Just change 

span:before, span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}

to

span:before, span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 12px;
}

Essentially, you're just changing 1.2em to 12px, as 1.2em is equivalent to 24px.

Blake
  • 84
  • 12
  • hi, thanks for reply, please check now..... when i gave 12px, it did't worked.... i gave top: 753px, it's working.... is it any problem if i use 753px this..... –  Apr 08 '15 at 07:03
  • @user12345 no, it's fine, I just had 12px as it was in a JSFiddle, and didn't have your body. Just whatever works, really. Trial and error I guess. – Blake Apr 08 '15 at 07:06
  • but some problem in menu, if you hover mouse on "small animals", menus are't displaying properly. it should display like here : http://demo1.kidsdial.com/ please inform me what is the problem? –  Apr 08 '15 at 07:19
  • Sorry, but I won't be able to tell without code. Please post another question about your problem and provide your HTML and CSS. I'll try to figure it out then. – Blake Apr 08 '15 at 07:26
0

Lines of "TOP CATEGORIES" are displaying with "TOP OFFERS". Two top line are from "TOP CATEGORIES". You need to push it down. If you need two lines use this for "TOP OFFERS". border-top, height and top are changed.

.horizontal_line span::before, .horizontal_line span::after {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 22px;
  width: 35%;
}

This is for "TOP CATEGORIES". border-bottom, height and top are changed.

.horizontal_line_3 span::before, .horizontal_line_3 span::after {
  border-top: 1px solid red;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 5px;
  width: 35%;
  border-bottom: 1px solid red;
}

You might need to add some margin too.

.horizontal_line_3 span {
  display: inline-block;
  font-size: 25px;
  margin: 0 0 22px 0;
}
Sithija Darshana
  • 57
  • 6