How to align elements inside div vertically ? |
How to align elements inside div vertically ? |
R1S8K |
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 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 |
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 } |
R1S8K |
Oct 9 2020, 09:54 PM
Post
#3
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
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: 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 |
pandy |
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'. |
R1S8K |
Oct 11 2020, 11:14 AM
Post
#5
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
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 |
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.
|
R1S8K |
Oct 11 2020, 04:34 PM
Post
#7
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
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 |
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. |
R1S8K |
Oct 11 2020, 06:19 PM
Post
#9
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
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 |
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. |
R1S8K |
Oct 12 2020, 01:32 PM
Post
#11
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
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. |
Lo-Fi Version | Time is now: 29th March 2024 - 05:26 PM |