Hyosoka Poipo Hyosoka Poipo - 3 months ago 17
CSS Question

Horizontal Line Inside a Tab in HTML

I'm following these pages to create a horizontal line :
horizontal line and right way to code it in html, css

http://www.w3schools.com/tags/tag_hr.asp

http://www.jacklmoore.com/notes/jquery-tabs/

but It seems that It doesn't work inside my tab element. Here is my code :

<div class="container-fluid">
<div class="tabbable js-report-tab-container">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div id="circle"></div> <div class="h_line"> **<!-- horizontal line should be here -->**</div> <span id="circle"></span>
<br/><br/>
<p>Choose one of these type of reports : </p>
<input type="checkbox" name="report" value="reportValue" checked > Summary <br/>
<input type="checkbox" name="report" value="reportValue" > Candidate Details <br/>
<input type="checkbox" name="report" value="reportValue" > . . . .
</div>
<div class="tab-pane" id="tab2">
This is the second step view...
</div>
<div class="tab-pane" id="tab3">
This is the third step view...
</div>
<div class="tab-pane" id="tab4">
This is the fourth step view...
</div>
</div> {{-- end of tab-content --}}
</div> {{-- end of tabbable --}}
</div>
<style type="text/css">
#circle {
width: 40px;
height: 40px;
background: blue;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
}

.hline {
width:100%;
height:13px;
background: #ff0000;
clear:both;
display:inline;
}

hr{
display:inline;
margin-top: 0.5em;
border-width: 0.5px;
border-style: inset;
margin-bottom: 0.5em;

height:2px;
background: #00FF00;
width: 20%;
align:left;

</style>


I have tried to use
<hr align="left" />
and with css style :

hr{
display:block;
margin-top: 2.5em;
border-width: 1px;
border-style: inset;
margin-bottom: 0.5em;
border-top:1px solid;
height:2px;
background: #00FF00;
width: 20%;
align:left;
}


the result is like this :
enter image description here

I also tried to use
<div class="block_1">Lorem</div> <div class="h_line"></div>

css :
.hline { width:30%; height:13px; background: #fff }

Result is nothing :
enter image description here

Is there something I missed here...?? My goal is to create a horizontal between those 2 circles..

Thanks in advance... Need heelp here.. :)

Answer

I'm not entirely clear on what you're looking for, but here is one method of rendering a horizontal line between numbered circles. I've used something like this for a progress indicator in the past.

.circles {
  border-bottom: 10px solid #000;
  display: block;
  height: 0;
  list-style-type: none;
  margin: 15px auto;
  position: relative;
  width: 80%;
}

.circle {
  background: #00f;
  border-radius: 50%;
  color: #fff;
  height: 40px;
  line-height: 40px;
  margin: -20px 0 0 -20px;
  position: absolute;
  text-align: center;
  top: 5px;
  width: 40px;
}

.circle:nth-child(1) {
  left: 0;
}

.circle:nth-child(2) {
  left: 50%;
}

.circle:nth-child(3) {
  left: 100%;
}
<p>Lorem ipsum dolor sit amet.</p>
<ul class="circles">
  <li class="circle">1</li>
  <li class="circle">2</li>
  <li class="circle">3</li>
</ul>
<p>Lorem ipsum dolor sit amet.</p>

Comments