Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ How to align elements inside div vertically ?
Posted by: R1S8K Oct 9 2020, 09:18 AM
Hi,
I'm trying to put stuff in vertical order. Which are a h4 heading and its subsequent points.
This is my html
<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
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
Posted by: 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.
ul,li { margin: 0; padding: 0 }
li { list-style: none }
Posted by: R1S8K Oct 9 2020, 09:54 PM
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.
ul,li { margin: 0; padding: 0 }
li { list-style: none }
1. I actually put this line inside div style and it worked.
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:
<h1>Products Links out</h1>
<section class="heading_blocks_container">
<h1>Products Links in</h1>
</section>
</body>
Posted by: 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.
Above all you would benefit from learning the basics before you learn the latest. Just sayin'. 
Posted by: R1S8K Oct 11 2020, 11:14 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:
Posted by: pandy Oct 11 2020, 03:41 PM
Afraid an image doesn't tell us much. Please post the HTML and CSS instead.
Posted by: R1S8K Oct 11 2020, 04:34 PM
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.
<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>
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;
}
Posted by: 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.
Posted by: R1S8K Oct 11 2020, 06:19 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.
<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>
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.
Posted by: 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.
Posted by: R1S8K Oct 12 2020, 01:32 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.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)