The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to align elements inside div vertically ?
R1S8K
post Oct 9 2020, 09:18 AM
Post #1


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578



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

IPB Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 9 2020, 11:11 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



That's what happens if you basically do nothing. All that's needed is a little styling to remove the list dots and the left margin/padding from the list.
CODE

ul,li  { margin: 0; padding: 0 }
li  { list-style: none }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 9 2020, 09:54 PM
Post #3


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578



QUOTE(pandy @ Oct 9 2020, 11:11 AM) *

That's what happens if you basically do nothing. All that's needed is a little styling to remove the list dots and the left margin/padding from the list.
CODE

ul,li  { margin: 0; padding: 0 }
li  { list-style: none }



1. I actually put this line inside div style and it worked.

CODE
display: block;


but a strange thing, is that I removed this line from the css and the page didn't go back to the unarranged state as before !


2. I have another issue, which is the heading font size. In the picture, there's the css code and the output of the code:

IPB Image

the heading example "Products Links out" is inside body and "Products Links in" inside section.


so the size is different automatically when I put h1 inside body or section.

here is the html code:


CODE
<body>
    <h1>Products Links out</h1>
    <section class="heading_blocks_container">
        <h1>Products Links in</h1>
    </section>
</body>


This post has been edited by R1S8K: Oct 9 2020, 09:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 10 2020, 04:00 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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'. mellow.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 11 2020, 11:14 AM
Post #5


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578



QUOTE(pandy @ Oct 10 2020, 04:00 AM) *

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:

IPB Image



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2020, 03:41 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Afraid an image doesn't tell us much. Please post the HTML and CSS instead.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 11 2020, 04:34 PM
Post #7


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578



QUOTE(pandy @ Oct 11 2020, 03:41 PM) *

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


oh smile.gif

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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2020, 04:52 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 11 2020, 06:19 PM
Post #9


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578



QUOTE(pandy @ Oct 11 2020, 04:52 PM) *

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.

IPB Image

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2020, 06:42 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 12 2020, 01:32 PM
Post #11


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578



QUOTE(pandy @ Oct 11 2020, 06:42 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:44 AM