CODEWITHSUNDEEP
htmlcss
JayJay Simpson
JayJay Simpson

Reputation: 155

How do you add text vertically underneath a heading

I am creating a marking form and there are four headings, one for comments, one for max, one for mark and the last one for section. How do I create those subheadings directly underneath the Section heading so they are vertically inline with each other.

**Section** **Max** **Comments** **Mark**

Dynamic

Intellij

Control

Active

Database

Underneath my comments heading I have 5 textboxes created already which are all centred in the middle of the page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    p {
    text-align: center;
    color: red;
    font-weight: bold;

    }

    p1 {
    position: relative;
    left: 1040px;
    color: red;
    font-weight: bold;
    bottom:32px
    }

    p2 {
    position: relative;
    left: 100px;
    color: red;
    font-weight: bold;
    top:35px
    }

    p3 {
    position: relative;
    left: 350px;
    color: red;
    font-weight: bold;
    top:35px
    }
</style>

<script type="text/javascript">
    function Run() {
        // alert("Running");
        var ipNode = document.getElementById("Input");

        var opNode = document.getElementById("Output");
        opNode.textContent = ipNode.value;
        var evalNode = document.getElementById("Eval");
        try {
            evalNode.textContent = eval(ipNode.value);
        } catch (e) {
            evalNode.textContent = e;
        }
    }
</script>
</head>
<body>
<body class="main">
<div>


<p2>Section</p2>
<p3>Max</p3>
<p>Comments</p>
<p1>Mark</p1>
</div>
<form action="">
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea>
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea>
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea>
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea>
<p><textarea rows="6" name="Input" id="Input" cols="61"></textarea>
<br>
<br>
    <input type="reset" value="Clear" name="B2"></p>
</form>
<pre id="Output">&nbsp;</pre>
<pre id="Eval">&nbsp;</pre>
</body>
</html>

Upvotes: 1

Views: 57

Answers (2)

Rounin
Rounin

Reputation: 29463

You can probably simplify your markup and your styles quite a lot.

Below I have outlined one approach which divides the page into vertical columns, which span the page from left to right, each one 24% the width of the viewport.

The <h3> subheadings are lined up vertically with the <h2> heading above and they are also lined up with the <textarea>s, two columns to the right.

.column {
display: inline-block;
width: 24%;
vertical-align: top;
}

h2 {
color: rgb(255,0,0);
margin-left:35%;
}

h3 {
height: 64px;
line-height: 64px;
margin: 24px 0 24px 35%;
}

textarea {
height: 60px;
}

textarea, input[type="reset"] {
display: block;
margin: 24px auto;
}
<div class="column">
<h2>Section</h2>

<h3>Dynamic</h3>
<h3>Intellij</h3>
<h3>Control</h3>
<h3>Active</h3>
<h3>Database</h3>
</div>

<div class="column">
<h2>Max</h2>
</div>

<div class="column">
<h2>Comments</h2>
<form>
<textarea name="input1" id="input1"></textarea>
<textarea name="input2" id="input2"></textarea>
<textarea name="input3" id="input3"></textarea>
<textarea name="input4" id="input4"></textarea>
<textarea name="input5" id="input5"></textarea>
<input type="reset" value="Clear" name="B2"></p>
</form>
</div>

<div class="column">
<h2>Mark</h2>
</div>

Upvotes: 1

xotix
xotix

Reputation: 520

Maybe you mean this: https://jsfiddle.net/v4awe9p8/

small {
  color: grey;
  font-size: 0.5em;
}

<h1>
  Title
  <small>Subtitle</small>
</h1>

Final version (see comments): https://jsfiddle.net/u34tcaja/

Upvotes: 1

Related Questions