How to align elements inside div vertically ? Options

[R1S8K]

Hi,

I'm trying to put stuff in vertical order. Which are a h4 heading and its subsequent points.

This is my html

CODE

        <div class="links_blocks">
            <h4 class="blocks_headings">Extra block</h4>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>

This is my CSS

CODE

.links_blocks {
    background: bisque;
    display: flex;
    position: relative;
    padding: 20px;
    margin: 5px;
    width: 100%;
}

.blocks_headings {
    padding: 0px;
    margin: 0px;
    display: flex;
    vertical-align: text-top;
}

li {
    color: brown;}

ul {
    /*to remove list bullets*/
    list-style-type: none;
    padding: 0;
}

This is my result



1. I want the black heading text to be at top like a title
2. and the numbers at the same left alignment and below the heading

This post has been edited by R1S8K: Oct 9 2020, 09:19 AM

[pandy]

Afraid I don't understand what you want to do. And I don't see how the CSS you posted a screen shot of relates to section.heading_blocks_container. And I don't see the promised output either.

Basically I think you do to much and in a way to complicated way. You don't need the latest tricks to accomplish simple things. Less is more is very true when it comes to HTML/CSS. And to go with the flow as much as possible if often the best approach, to work with how a web page works instead of against it.

Above all you would benefit from learning the basics before you learn the latest. Just sayin'.

[R1S8K]

Afraid I don't understand what you want to do. And I don't see how the CSS you posted a screen shot of relates to section.heading_blocks_container. And I don't see the promised output either.

Basically I think you do to much and in a way to complicated way. You don't need the latest tricks to accomplish simple things. Less is more is very true when it comes to HTML/CSS. And to go with the flow as much as possible if often the best approach, to work with how a web page works instead of against it.

I know it could be a bit not so obvious what I'm doing.

I learned some stuff about html/css the past couple weeks, I started by the basics.

I learned about headings, header, body and footer of a page.
How to embed link and images, I also learned how to resize the image automatically which is a cool thing I guess.

Now I reached the tables, and I'm facing some problems:
1. I can't display the borders of the table.
2. border - attribute is displayed in red color.
3. I can't control the columns/rows

Here's my current work:

[pandy]

Afraid an image doesn't tell us much. Please post the HTML and CSS instead.

[R1S8K]

Afraid an image doesn't tell us much. Please post the HTML and CSS instead.

oh

I really forgot to include the html and css.

CODE

            <h5>Table 1</h5>
            <table border="1" class="table1">
                <th>
                    <td class="columns">c1</td>
                    <td class="columns">c2</td>
                </th>
                <tr>
                    <td class="rows">r1</td>
                    <td class="rows">r2</td>
                </tr>
            </table>

CODE

.table1 {
    background: rgb(11, 214, 151);
    padding: 5px;
    margin: 0px;
    width: 100%;
}

.columns {
    padding: 5px;
    margin: 5px;
    background: rgb(195, 210, 228);
    width: 50%;
    display: block;
}

.rows {
    padding: 5px;
    margin: 5px;
    background: rgb(219, 211, 128);
    width: 50%;
    display: block;
}

[pandy]

The HTML border does show. But use CSS for borders instead.

The table is broken. You've omitted TR for the first row and instead used TH. TH is just a special type of cell, on the same level as TD. You can't put one cell inside another and all cells must be in a TR.

What do you want to accomplish by changing the display property of the table cells? Don't you want it to look like a table? And what's with .rows and .columns? Those class names don't make sense. You can name classes what you want, but if you expect those cells to show up as a column and a row, they won't.

[R1S8K]

The HTML border does show. But use CSS for borders instead.

The table is broken. You've omitted TR for the first row and instead used TH. TH is just a special type of cell, on the same level as TD. You can't put one cell inside another and all cells must be in a TR.

What do you want to accomplish by changing the display property of the table cells? Don't you want it to look like a table? And what's with .rows and .columns? Those class names don't make sense. You can name classes what you want, but if you expect those cells to show up as a column and a row, they won't.

Yep, you're right.

I've done some progress.

CODE

            <h5>Table 1</h5>
            <table>
                <tr>
                    <th>c1</th>
                    <th>c2</th>
                </tr>
                <tr>
                    <td>r1</td>
                    <td>r2</td>
                </tr>
            </table>

            <table>
                <tr>
                    <th>Person</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>Ann</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>Susie</td>
                    <td>22</td>
                </tr>
            </table>

CODE

table {
    background: rgb(11, 214, 151);
    padding: 5px;
    margin: 5px;
    width: 100%;
}

th {
    border-style: dashed;
    border-width: 1px;
    border-color: black;
    padding: 5px;
    margin: 5px;
    background: burlywood;
    width: 50%;
}

td {
    border-style: dashed;
    border-width: 1px;
    border-color: black;
    padding: 5px;
    margin: 5px;
    background: rgb(219, 211, 128);
    width: 50%;
}

Just need to know why the margin from the right isn't as the left one ?

Also why the pictures are displayed very big ? That's absolutely not the original size.

This post has been edited by R1S8K: Oct 11 2020, 06:20 PM

[pandy]

You aren't much for answering questions, are you?

No idea why it looks like that since the what you posted doesn't produce what the screen cap shows.

[R1S8K]

You aren't much for answering questions, are you?

No idea why it looks like that since the what you posted doesn't produce what the screen cap shows.

Yep, I think for now I solved much of the problems I faced.

Now I can do tables, images, divs ... etc.

How to put the main perspective of the webpage.

I'm actually not a desktop webpage programmer. I just want to learn the basic stuff like, buttons, text boxes, getting data from sensors with microcontrollers.

Then do the related JavaScript programming to transmit/receive data and that's all I want for now.