CODEWITHSUNDEEP
htmlcss
Barry B Benson
Barry B Benson

Reputation: 39

How to move horizontal to create a table using CSS and HTML

I a making a countdown clock as part of a project. I have gotten the back end program to function as desired (using JS). However, I am not as confident with front end programming, and therefore I am having some difficulty in manipulating CSS and HTML using the <hr> tag to display as a vertical line in the correct place.

Here is the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OPMS2 Countdown</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src = "main.js"></script>
</head>
<h1>Countdown Clock</h1>
<div id="clockdiv">
    <div>
        <span class="days" id="day"></span>
        <div class="smalltext">Days</div>
    </div>
    <hr width="1" size="100">
    <div>
        <span class="hours" id="hour"></span>
        <div class="smalltext">Hours</div>
    </div>
    <hr width="1" size="100">
    <div>
        <span class="minutes" id="minute"></span>
        <div class="smalltext">Minutes</div>
    </div>
    <hr width="1" size="100">
    <div>
        <span class="seconds" id="second"></span>
        <div class="smalltext">Seconds</div>
    </div>
    <hr width="1" size="100">
</div>

<p id="demo"></p>

</body>
</html>

Here is the associated CSS:

body{
    text-align: center;
    background: #000000;
    font-family: sans-serif;
    font-weight: 100;
    background-image: url("logo.png");
}
p{
    text-align: center;
    font-size: 60px;
}
h1{
    color: #ffffff;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}
#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}
#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #000000;
    display: inline-block;
}
#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #000000;
    display: inline-block;
}
smalltext{
    padding-top: 5px;
    font-size: 16px;
}
hr{

}

As evident the <hr> tags are after every div in order to make a table, but the results of the above code are below:

enter image description here

I just want the lines to move to the side of each section. Any help would be greatly appreciated. Thanks!

Upvotes: 2

Views: 92

Answers (2)

Jon P
Jon P

Reputation: 19797

In my opinion, your first mistake is using hr. The h is for horizontal after all.

What you really have is borders. Use this to your advantage. Get rid of hr and use border styling: border-right: double 4px white; . It makes your html cleaner and removes an element which you are not using semantically. This also makes your life easier if you adjust the layout with media queries.

body{
    text-align: center;
    background: #000000;
    font-family: sans-serif;
    font-weight: 100;
    background-image: url("logo.png");
}
p{
    text-align: center;
    font-size: 60px;
}
h1{
    color: #ffffff;
    font-weight: 100;
    font-size: 40px;
    margin: 40px 0px 20px;
}
#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}
#clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #000000;
    display: inline-block;
    /*Border Styling Here*/
    border-right: double 4px white;
}
#clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #000000;
    display: inline-block;
}
smalltext{
    padding-top: 5px;
    font-size: 16px;
}
<h1>Countdown Clock</h1>
<div id="clockdiv">
    <div>
        <span class="days" id="day">1</span>
        <div class="smalltext">Days</div>
    </div>

    <div>
        <span class="hours" id="hour">2</span>
        <div class="smalltext">Hours</div>
    </div>

    <div>
        <span class="minutes" id="minute">3</span>
        <div class="smalltext">Minutes</div>
    </div>

    <div>
        <span class="seconds" id="second">4</span>
        <div class="smalltext">Seconds</div>
    </div>

</div>

<p id="demo"></p>

Upvotes: 0

bobjoe
bobjoe

Reputation: 673

Like div, hr also defaults to display: block; which is making each hr appear on a new line.

You'll want to add in a new style.

hr {
 display: inline-block;
 vertical-align: middle;
}

Upvotes: 2

Related Questions