Horizontal rule not showing at the right place

HTML & CSS
#1

Hey guys!

I have the following code and trying to place some hr tags but it is not showing up at the correct position and hence, I have to use position to move it around. I just like to know if this is normal with a hr tag? Here is my code and I am assuming that I have to use the three backticks to format it?

while ($row = mysqli_fetch_assoc($result))  {

                               
                                 echo '<div class="update_heading">';
                                 echo '<b><h2>Below are your premium membership information for Level 1</b></h2>';
                                 echo '</div>';
                                 echo '<br></br>';
                                 echo '<div class="update_text">';
                                 echo '<h3>';
                                 echo 'Your premium membership subscription plan A is: <div class="information">'.$row['subscriptionplan'].'</div>';
                                 echo '<br></br>';
                                 echo 'Your premium membership date of subscription for subscription plan A is: <div class="information"> '.$row['subscriptionplandate'].'</div>';
                                 echo '<br></br>';
                                 if ($row['feesmonthly'] === null) {
                                     echo 'Your premium membership fee for subscription plan A is: <div class="information"> $'.$row['feesyearly'].'</div>';
                                 } else {
                                     echo 'Your premium membership fee for subscription plan A is: <div class="information"> $'.$row['feesmonthly'].'</div>';
                                 }
                                 echo '<br></br>';
                                 if ($row['paid'] == 0) {
                                      echo 'Your premium membership payment status for subscription plan A is: <div class="information"> Not paid </div>'; 
                                 } else {
                                      echo 'Your premium membership payment status for subscription plan A is: <div class="information">Paid</div>';
                                 }
                                 echo '<br></br>';
                                 echo 'Your premium membership expiry date for subscription plan A is: <div class="information">'.$row['expirydate'].'</div>';
                                 echo '<br></br>';
                                 echo 'Your premium membership paid by date for subscription plan A is: <div class="information">'.$row['paidbydate'].'</div>';
                                 echo '<br></br>';
                                 if ($row['emailreminder'] == 0) {
                                    echo 'You have <div class="information">no overdue fees </div> for subscription plan A';
                                 } else {
                                      echo 'You have <div class="information"> overdue fees </div> for subscription plan A';
                                 }
                                 echo '<br></br>';
                                 if ($row['activate'] == 0) {
                                    echo 'You <div class="information">need to activate</div> your premium membership for subscription plan A';
                                 } else {
                                      echo 'You <div class="information">have already activated</div> your premium membership for subscription plan A';
                                 }
                                 echo '<br></br>';
                                 echo '<br></br>';
                                 echo '</h3>';
                                 echo '<hr>';
                                 echo '</div>';
                                 
                                 echo '<div class="update_heading2">';
                                 echo '<b><h2>Below are your premium membership information for Level 2</b></h2>';
                                 echo '</div>';

It is showing up as

image
image1000Ă—362 41.2 KB

#2

Hey there!

I’ve taken a look at the given code snippet, first I would advice you the following:
Try to separate your PHP-driven logic and front-end logic, this will save you a ton of headache with these kind of problems. :slight_smile: But, that is just a suggestion.

Back to your question, are you using any form of CSS? If so, would you mind including this in your code snippets? It would help us a lot pin-pointing your problem.

Thanks a lot.

#3

Hello!

Appreciate the advice and quick response… I am using CSS and can only get it to work using the position property… here is the working code:

div.update_text hr {
  border: solid 1px black;
  position: relative;
  bottom: 300px;
}
#4

Thanks for the code sample, unfortunately I meant the CSS code of all elements on that page :wink: sorry if I wasn’t clear enough! This way we can figure out if your problem lies within overruling CSS rules or within your HTML structure.

As for your solution, please note that this will not work on devices with smaller screens. :wink:

#5

Here is all of my css code for pc media

@media only screen and (min-width: 1000px) {

/*My Code*/

.main-wrapper {
  margin: 0 auto;
  width: 2000px;

}

div.sharp {
  font-size: 150px;
  position: relative;
  bottom: 50px;
}

div.natural {
  font-size: 150px;
  position: relative;
  left: 550px;
  bottom: 150px;
  

}

div.flat {
  font-size: 150px;
  position: relative;
  right: 500px;
  top: 600px;
}

div.treble_clef {
  font-size: 100px;
  position: relative;
  right: 400px;
  bottom: 400px;
  
}

div.crotchet_rest {
  font-size: 100px;
  position: relative;
  left: 400px;
  bottom: 500px;
}

div.crotchet {
  font-size: 100px;
  position: relative;
  top:200px;
  bottom: 100px;

}

div.minim {
  font-size: 100px;
  position: relative;
  right: 400px;
  bottom: 50px;
  
}

div.quaver {
  font-size: 100px;
  position: relative;
  left: 400px;
  bottom: 150px;

 
}

div.trumpet {
   font-size: 100px;
   position: relative;
   top: 100px;
   right: 400px;

}

div.guitar {
   font-size: 100px;
   position: relative;
}

div.drum {
  font-size: 100px;
   position: relative;
   left: 400px;
   bottom: 100px;
}

div.level1_staff {
   font-size: 100px;
   position: relative;
   top: 100px;
   right: 400px;
}

div.level1_quavers {
  font-size: 100px;
   position: relative;
}

div.level1_demi {
  font-size: 100px;
   position: relative;
   left: 400px;
   bottom: 100px;
}

div.level2_semiquaver {
  font-size: 100px;
   position: relative;
   top: 100px;
   right: 400px;

}

div.level2_crotchet {
  font-size: 100px;
   position: relative;
}

div.level2_minim {
  font-size: 100px;
   position: relative;
   left: 400px;
   bottom: 100px;
}

div.level3_repeat {
  font-size: 100px;
   position: relative;
   top: 100px;
   right: 400px;
}

div.level3_fermata {
  font-size: 100px;
   position: relative;
}

div.level3_crescendo {
  font-size: 100px;
   position: relative;
   left: 400px;
   bottom: 100px;
}

div.return {
  text-align: center;
  top: 400px;
  font-size: 30px;
  position: relative;
}



div.update_heading h2 {
  text-decoration: underline;
  text-align: center;
}


div.update_text h3 {
  font-size: 16px;
  line-height: 40px;
  position: relative;
  bottom: 300px;
}


div.update_heading2 h2 {
  text-decoration: underline;
  text-align: center;
  position: relative;
  bottom: 300px;
 
}


div.update_text2 h3 {
  font-size: 16px;
  line-height: 40px;
  position: relative;
  bottom: 600px;
}



div.update_heading3 h2 {
  text-decoration: underline;
  text-align: center;
  position: relative;
  bottom: 600px;
}



div.update_text3 h3 {
  font-size: 16px;
  line-height: 40px;
  position: relative;
  bottom: 900px;
}



div.update_text hr {
  border: solid 1px black;
  position: relative;
  bottom: 300px;
}


div.update_text2 hr {
  border: solid 1px black;
  position: relative;
  bottom: 600px;
}

div.update_form {
   position: relative;
   bottom: 900px;
   line-height: 50px;
}

div.update_buttons {
  position: relative;
  bottom: 800px;
}


div.information {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
}

.profile_picture {
  position: relative;
   top: 30px;
   left: 50px;
   bottom: 50px;
   width: 100px;
   height: 60px;

}

.default_picture  {
   position: relative;
   top: 30px;
   left: 50px;
   bottom: 50px;
   width: 100px;
   height: 60px;

}

.star1 {
   display: inline-block;
   color:black;
  }

.star2 {
  display:none;
}

div.review {

  font-family: "brush script mt", cursive;
    font-size: 25pt;
    line-height: 35px;
    width: 700px;
    position: relative;
    top: 3000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;           
  
}


.pc101 {
   position: absolute;
   top: 400px;
   left: 700px;
   width: 402px !important;
   height: 116px !important;
   font-family: 'Lobster', cursive;
  font-family: 'Great Vibes', cursive;
  font-family: 'Monoton', cursive;
  font-family: 'Orbitron', sans-serif;

}


.snoopy {
  position: relative;
   bottom: 100px;
   left: 80px;
   width: 300px;
   height: 200px;

}

.clearfix::after {
      content: "";
     clear: both;
    display: table;
}

.float.left{
    float:left;
}

.float.right {
   float:right;
}


div.services_main {
  position: relative;
  top: 800px;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  font-color: #008B8B;
}
  
div.services {
  position: relative;
  top: 1000px;
  left: 100px;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
}



div.container {
  
  background-color: black;
  max-width: 2000px;
  padding: 0 30px;
  margin: 0 auto;
  border: 1px solid #000000;
  box-sizing: border-box;
}

footer {
  display:block;
  width: 100%;
}

footer div.copyright {
  position: relative;
  top: 8000px;
  display: block;
  width: 100%;
  background-color: #000000;
  padding: 20px 0;
}

footer div.copyright div.text {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  margin-top: 10px;
}

footer div.copyright ul.links {
  margin: 0;
  padding: 0;
  display: inline-block;
}

footer div.copyright li {
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none
}

footer div.copyright li a{
  color : #ffffff;
  font-size: 24px;
  margin-left: 10px;
}





div.first {
   position:relative;
  
  bottom: 300px;
   line-height: 100px;

}

div.title h1{
   position: absolute;
   left: 700px;
   top: 700px;
   
   line-height: 100px;

   font-family: 'Aldrich', sans-serif;
   font-family: 'Mr Dafoe', cursive ;
   font-size: 50px;
}

div.header_title h1{
  font-family: 'Aldrich', sans-serif;
   font-family: 'Mr Dafoe', cursive ;
   font-size: 50px;
}

div.heading h2{
    text-align: center;
    line-height: 5px;
}

.form {
   position: relative;
   bottom: 200px;
 
}

div.newsletters {
  font-family: 'Lobster', cursive;
  font-family: 'Great Vibes', cursive;
   font-size: 30px;
   color: #8A2BE2;
}



div.music {
  position: relative;
  bottom: 50px;
  top: 100px;
  left: 200px;
}

a {
  text-decoration: none;
}

h3 {

  text-align: center;
  font-weight: bold;
  font-size: 40px;
}

h2 {
  text-align: left ;
  font-weight: bold;
  font-size: 20px;

  line-height: 80px;
}

 h1 {

  text-align: center;
  margin-top: 40px;
  font-size: 40px;
  text-decoration: underline;
}



div.heading {
  text-align: center !important;
  font-size: 20px;
 

}



body {
    background-color: #ccc;

}

 header nav {
    width: 100%;
    height: 150px;
    background-color: #F0F8FF;
}

 header nav ul {
    float: left;
  
  
}

  header nav ul li {
    float: left;
    list-style:none;
    position: relative;
    padding-top: 50px

    
}

  header nav ul li a{
    font-family: arial;
    font-size: 14px;
    color: #111;
    font-weight: bold;
    display: block;
    padding: 22px 8px;
    text-decoration: none;


}

 header nav ul li ul{
    display: none;
    position: absolute;
    background-color: #F0F8FF;
    padding: 14px;
    border-radius: 0px 0px 4px 4px;
  
    
}



 header nav ul li:hover ul{
    display: block;
    
}

 header nav ul li ul li {
    width: 200px;
   border-radius: 4px;
    

}

 header nav ul li ul li a {
    padding: 5px 14px;
    

}

 header nav ul li ul li a:hover {
    background-color: #f3f3f3;

}

table {
   padding-top: 50px;
   padding-left: 100px;
}

td, th {
  text-align: center;
  border: solid 1px black;
  background-color: #00ccff;
  line-height: 30px;
 
}







.main-container {
    padding-top: 40px;
}

.main-container h3 {
    font-family: arial;
    font-size: 40px;
    color: #111;
    line-height: 50px;
    text-align:center;
    text-decoration: none;
}


.main-container h2 {
    font-family: arial;
    font-size: 30px;
    color: #111;
    line-height: 50px;
    text-align:center;

}

.main-container h1 {
    font-family: arial;
    font-size: 70px;
    color: #111;
    line-height: 50px;
    text-align:justify;
    margin: 0 auto;
    width: 30em;
}

.main-container img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 50%;
height: 500px;

}

.paypal {
  
  margin-top: 100px;
  color: blue;
  line-height: 50px;
}




/*signup.php styling*/


p {
  text-align: center;
  

}


div.error {
  color: red;
  position: relative;
  bottom: 2500px;
  left: 900px;
}

div.success {
  color: green;
  position: relative;
  bottom: 2500px;
  left: 900px;
}

.signup-form {
    width:400px;
    margin: 0 auto;
    padding-top: 30px;
}

.signup-form input{
   width: 100%;
   height: 40px;
   padding: 0px 5%;
   margin-bottom: 4px;
   border:none;
   background-color: #fff;
   font-family: arial;
   font-size: 16px;
   color: #111;
   line-height: 40px;

}

.signup-form button{
   display:block;
   margin: 0 auto;
   width: 70%;
   height: 40px;
   border:none;
   background-color: #222;
   font-family: arial;
   font-size: 16px;
   color: #fff;
   cursor:pointer;
  
}

.signup-form button:hover{
   background-color: #111;
}

header .nav-login {
   float:right;
   position: relative;
  bottom: 10px;
   
   
}

header .nav-login form{
   float:left;
   padding-top: 40px;
  
}

header .nav-login form input{
   float:left;
   width: 110px;
   height: 40px;
   
   margin-right: 10px;
   border:none;
   background-color: #ccc;
   font-family: arial;
   font-size: 14px;
   color: #111;
   line-height: 20px;

}

header .nav-login form button{
   float:left;
   width: 60px;
   height: 30px;
   margin-right: 10px;
   border:none;
   background-color: #FFF8DC;
   font-family: arial;
   font-size: 14px;
   color: #111;
   cursor:pointer;

}

header .nav-login form button:hover{
   background-color: #ccc;

}

header .nav-login a{
    display: block;
    width: 60px;
    height: 60px;
    border:none;
    float:left;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    cursor:pointer;
}

textarea {
  width: 300px;
  height: 150px;
}
.service1 {
  width: 298px;
  border: 1px solid #c1c1c1;
  margin: 20px 50px;
  padding: 0 5x;
  float: left;
}

.service1 > p {
   font-size: 20px;
   color: #000000;
   max-width: 250px;
   padding-top: 30px;
   text-align: center;
   
}

.services {
  width: 1500px;
  margin: 0 auto;
  padding-left: 20px;
}

.services  h1 {
  font-size: 50px;
  font-weight: bold;
  background-color: #c1c1c1;
  color: #000000;
  padding: 10px 0;
  
}

div.image {
  max-width: 200px
  margin: 15px 0 0 0;
  padding-top: 30px;
}

div.services_main {
  text-align: center;
  font-size: 40px;
  color: #6495ED;
  margin: 100px 0 50px 0;
}

div.image:hover {
  opacity: 0.2;
  max-width: 200px;
  margin-top: 15px;
}

div.down  {
 padding-left: 50px;
}

.instruction {
  font-weight: bold;
  font-size: 50px;
  font-color: blue;
}
#del-countdown {
  width: 850px;
  margin: 15% auto;
}

#clock span {
  float: left;
  text-align: center;
  font-size: 84px;
  margin: 0 2.5%;
  color: #fff;
  padding: 20px;
  margin-top: 50px;
  width: 20%;
  border-radius: 20px;
  box-sizing: border-box;
}

#clock span:nth-child(1) {
    background: #fa5559;
}

#clock span:nth-child(2) {
    background: #26c2b9;
}

#clock span:nth-child(3) {
    background: #f6bc58;
}

#clock span:nth-child(4) {
    background: #2dcb74;
}

#clock:after {
   content: "";
   display: block;
   clear: both;
}

#units span {
  float: left;
  width: 25%;
  text-align: center;
  margin-top: 30px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px rgba(10,10,10,0.7);
}

div.timer {
  margin: 15% auto;
  text-align:center;

}

 #buttons {

position: relative;
left: 200px;
}

div.timer_display {
   font-family: 'Lobster', cursive;
   font-size: 40px;
   color: blue;
   padding-top: 100px;
}
}
#6

Confused on why you have so many blocks set to position:relative. Relative blocks are relative to the location they should normally be displayed on the screen. I think you do not understand the POSITION setting for CSS blocks. Basically, if you are going to set that value, it is relative to the parent’s settings. Therefore, you would normally only set it for blocks that need to have absolute blocks placed inside of them.

You can also use any browser’s debugger to view the CSS that is really being used. In FireFox, right-click on the HR and select inspect element. It other browsers use the gear and show the console. Once inspecting, select the style or css tab and look at what you actually are using for that part of the display.

Another thought is to remove the HR all together and just add a border to the bottom of the DIV instead. This is done something like style=“border-bottom: 1px solid black;” which would do basically the same thing for your needs. ( On the update-text DIV ) Just a thought.

#7

Thanks for your explanation and you are right that i am starting to learn about position relative and absolute… how does this work? Do we have 1 absolute in the parent class and the rest of the child is relative?

#8

Well, explaining how positioning works in CSS can be a long discussion. Basically, there are these options for positioning.
Static, fixed, relative, absolute and sticky.

Each of these positions relate to other positions and to the layout of the blocks you are actually positioning. And, each of them do different things depending on the parents and even grandparents settings too. And, some are null if you do not use the correct positioning tools such as left/right/top/bottom/float. All of these are intertwined.

You basically have to think of your page as a series of “blocks” and then use the CSS to move them where you need them to be on the page. But, explaining how it all works is a long talk. You should google something like “css simple tutorial css positioning” and you will find hundreds of nice talks to start you off. I would suggest the one early in that list to start with. I suggest this site a lot as it is great for beginners and contains a wealth of knowledge to start with. So, read over this page and run some of the samples they show and play with them to get a basic understanding first and come back here and ask your questions when you get stuck. The link is: w3Schools-positioning This will explain the basics to start you off…

1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service