The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> put the text in the bottom of the grid element
spalisetty
post Sep 11 2020, 08:43 AM
Post #1


Novice
**

Group: Members
Posts: 22
Joined: 2-August 20
Member No.: 27,469



Hello,
I have created a grid with 4 elements and I named them Element-1, Element-2, Element-3 and Element-4. These text is coming on the top within the element. I could do text-align center. Now, the text is coming in the center. I want to place the text in the bottom of the grid cell/ element. Please help. vertical-align: center did not work

This post has been edited by spalisetty: Sep 11 2020, 09:16 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 11 2020, 03:18 PM
Post #2


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

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



There are several options. What works with your grid I don't know.

Take this HTML as an example.

HTML
<div id="foo">
<p>
Text text text</p>
</div>


You could use display: table-cell. Then vertical-align will work as you want.

CODE
#foo    { display: table-cell;
          vertical-align: bottom;
          height: 20em;
          background: yellow }


Or use the newer display: flex. I think browser support is good enough, but I'm not sure. You can check that yourself.

CODE
#foo       { display: flex;
             height: 20em;
             background: yellow }
#foo p     { align-self: flex-end }


Maybe absolute positioning could also be used. Hard to say without knowing what you have really.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spalisetty
post Sep 12 2020, 01:49 AM
Post #3


Novice
**

Group: Members
Posts: 22
Joined: 2-August 20
Member No.: 27,469



QUOTE(pandy @ Sep 11 2020, 03:18 PM) *

There are several options. What works with your grid I don't know.

Take this HTML as an example.

HTML
<div id="foo">
<p>
Text text text</p>
</div>


You could use display: table-cell. Then vertical-align will work as you want.

CODE
#foo    { display: table-cell;
          vertical-align: bottom;
          height: 20em;
          background: yellow }


Or use the newer display: flex. I think browser support is good enough, but I'm not sure. You can check that yourself.

CODE
#foo       { display: flex;
             height: 20em;
             background: yellow }
#foo p     { align-self: flex-end }


Maybe absolute positioning could also be used. Hard to say without knowing what you have really.





Hi Pandy,
Thank you for the reply. Do you know Bootstrap as well? Here is my code. I am asking about the last part of the code, here text, Element-1 etc are within the grid but they are coming in the top. I want it to come at the bottom. Actually, I am trying to make a movie website. I want this text to be the title of the movie and i want it at the bottom.

CODE


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.css">>
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <style>

  .navbar{
    background-color: black;
    font-size: 20px;
    padding-top: 10px;
    margin: 0;
    margin-top: -20px;
    margin-left: -5px;
    margin-bottom: -5px;
  }
  .navbar-brand{
    float: left;
  }
  .form-control{
    border-radius: 10px;
    margin-top: 9px;
    width: 250px;
  }
.navbar-brand{
  font-size: 30px;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-bottom: 50px;
}
.box{
  border: 30px solid white;
  background: orange;
  height: 300px;
  width: 300px;
  margin:auto;
}
#recent1{
  text-align: center;
}
#best1{
  text-align: center;
}
.col-lg-3{
  text-align: center;
}
.carousel-inner{
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>



  <nav class="navbar navbar-default">
                  <div class="navbar-header">
                        <a href="#" class=navbar-brand>SP</a>
                  </div>
                  <ul class="nav navbar-nav">
                      <li id="Telugu"><a href="#">  Telugu Movies  </a></li>
                      <li id="Hindi"><a href="#">  Hindi Movies  </a></li>
                      <li id="English"><a href="#">  English Movies  </a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                      <li><input class="form-control" type="text" placeholder="Search" aria-label="Search"></li>
                      <li><a href="file:///C:/Users/spali/OneDrive/Documents/new%20laptop/HTML_Learn/BootStrap/website/ContactUs.html">  Contact Us  </a></li>
                  </ul>
  </nav>

  <div class="container">
  <div id="demo" class="carousel slide" data-ride="carousel" data-interval="3000">

  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="TeluguMovies.JPG" alt="TeluguMovies" width="1100" height="300">
    </div>
    <div class="carousel-item">
      <img src="HindiMovies.jpg" alt="HindiMovies" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="EnglishMovies.jpg" alt="EnglishMovies" width="1100" height="500">
    </div>
  </div>

  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</div>

<div class="container">
<h1 id="recent1">Recently Added</h1>
<div class="row" >
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">Element - 1</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">Element - 2</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">Element - 3</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">Element - 3</div>
</div>
</div>



<div class="container">
<h1 id="recent1">Recently Added</h1>
<div class="row" >
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">Element - 1</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">Element - 2</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">Element - 3</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box">Element - 3</div>
</div>
</div>
</body>
</html>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 12 2020, 02:34 AM
Post #4


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

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



No, I don't use Bootstrap.

Are you going to put videos in those boxes as well?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spalisetty
post Sep 12 2020, 03:35 AM
Post #5


Novice
**

Group: Members
Posts: 22
Joined: 2-August 20
Member No.: 27,469



QUOTE(pandy @ Sep 12 2020, 02:34 AM) *

No, I don't use Bootstrap.

Are you going to put videos in those boxes as well?


Yes Pandy, that is my future plan. For now, I am creating a template. Any idea on how to put the text in the bottom?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 12 2020, 05:37 AM
Post #6


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

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



Those I told you already. If it doesn't work it's because bootstrap contradicts the CSS rules. But at least position: absolute seems to work in spite of bootstrap.

But you go about it the wrong way. Put the videos in first and then place the text below that. The whole concept of putting both video and text into fixed size boxes is asking for trouble. Or will the video also size down when the box does? I haven't tried that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spalisetty
post Sep 12 2020, 05:58 AM
Post #7


Novice
**

Group: Members
Posts: 22
Joined: 2-August 20
Member No.: 27,469



QUOTE(pandy @ Sep 12 2020, 05:37 AM) *

Those I told you already. If it doesn't work it's because bootstrap contradicts the CSS rules. But at least position: absolute seems to work in spite of bootstrap.

But you go about it the wrong way. Put the videos in first and then place the text below that. The whole concept of putting both video and text into fixed size boxes is asking for trouble. Or will the video also size down when the box does? I haven't tried that.


Pandy,
I want to put something like this. Please go to one of the english movies online site like https://www.streamdor.com/#!/?topic=mov...anguage=English

There are many movies there. There is a name of the movie below the video. I want to do that, please.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 12 2020, 06:39 AM
Post #8


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

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



So you are not going to have videos there but posters. Arte the posters all the same size?

Again, put the posters in first and add the text under it as a starting point. On a webpage everything flows and it starts (for most languages) from the top left, not from the bottom. You can't pin everything down in an exact spot.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spalisetty
post Sep 12 2020, 02:18 PM
Post #9


Novice
**

Group: Members
Posts: 22
Joined: 2-August 20
Member No.: 27,469



QUOTE(pandy @ Sep 12 2020, 06:39 AM) *

So you are not going to have videos there but posters. Arte the posters all the same size?

Again, put the posters in first and add the text under it as a starting point. On a webpage everything flows and it starts (for most languages) from the top left, not from the bottom. You can't pin everything down in an exact spot.


Here is the top portion, am still struggling with header.

https://ibb.co/vdcFjGw

below

https://ibb.co/sy9J81R

As of now, it is like this. I need to put the video inside the grid. If it doesn't work, i will just use a table

This post has been edited by spalisetty: Sep 12 2020, 02:21 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 13 2020, 01:11 AM
Post #10


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

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



It would help if you listened. tongue.gif

Try the below. Isn't that what you want? If it isn't, I'm afraid I don't understand at all what it is you want to do.

CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap.css">>
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <style>

  .navbar{
    background-color: black;
    font-size: 20px;
    padding-top: 10px;
    margin: 0;
    margin-top: -20px;
    margin-left: -5px;
    margin-bottom: -5px;
  }
  .navbar-brand{
    float: left;
  }
  .form-control{
    border-radius: 10px;
    margin-top: 9px;
    width: 250px;
  }
.navbar-brand{
  font-size: 30px;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-bottom: 50px;
}
.box{
  border: 30px solid white;
  background: orange;
  height: 300px;
  width: 300px;
  margin:auto;
}
#recent1{
  text-align: center;
}
#best1{
  text-align: center;
}
.col-lg-3{
  text-align: center;
}
.carousel-inner{
  width: 100%;
  height: 100%;
}

.box    { height: auto !important;
          padding: .5em 0 0.3em 0 }
.box p  { margin: 0 }


</style>
</head>
<body>



  <nav class="navbar navbar-default">
                  <div class="navbar-header">
                        <a href="#" class=navbar-brand>SP</a>
                  </div>
                  <ul class="nav navbar-nav">
                      <li id="Telugu"><a href="#">  Telugu Movies  </a></li>
                      <li id="Hindi"><a href="#">  Hindi Movies  </a></li>
                      <li id="English"><a href="#">  English Movies  </a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                      <li><input class="form-control" type="text" placeholder="Search" aria-label="Search"></li>
                      <li><a href="file:///C:/Users/spali/OneDrive/Documents/new%20laptop/HTML_Learn/BootStrap/website/ContactUs.html">  Contact Us  </a></li>
                  </ul>
  </nav>

  <div class="container">
  <div id="demo" class="carousel slide" data-ride="carousel" data-interval="3000">

  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="TeluguMovies.JPG" alt="TeluguMovies" width="1100" height="300">
    </div>
    <div class="carousel-item">
      <img src="HindiMovies.jpg" alt="HindiMovies" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="EnglishMovies.jpg" alt="EnglishMovies" width="1100" height="500">
    </div>
  </div>

  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
</div>

<div class="container">
<h1 id="recent1">Recently Added</h1>
<div class="row" >
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"><img src="https://forums.htmlhelp.com/uploads/post-6-1599976481.jpg" width="178" height="250" alt="The Lion King"><p>Element - 1</p></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"><img src="https://forums.htmlhelp.com/uploads/post-6-1599976481.jpg" width="178" height="250" alt="The Lion King"><p>Element - 2</p></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"><img src="https://forums.htmlhelp.com/uploads/post-6-1599976481.jpg" width="178" height="250" alt="The Lion King"><p>Element - 3</p></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"><img src="https://forums.htmlhelp.com/uploads/post-6-1599976481.jpg" width="178" height="250"><p>Element - 4</p></div>
</div>
</div>



<div class="container">
<h1 id="recent1">Recently Added</h1>
<div class="row" >
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box style="display: table-cell; vertical-align: bottom"><img src="https://forums.htmlhelp.com/uploads/post-6-1599976481.jpg" width="178" height="250" alt="The Lion King"><p>Element - 1</p></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"><img src="https://forums.htmlhelp.com/uploads/post-6-1599976481.jpg" width="178" height="250" alt="The Lion King"><p>Element - 2</p></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"><img src="https://forums.htmlhelp.com/uploads/post-6-1599976481.jpg" width="178" height="250" alt="The Lion King"><p>Element - 3</p></div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 box"><img src="https://forums.htmlhelp.com/uploads/post-6-1599976481.jpg" width="178" height="250" alt="The Lion King"><p>Element - 4</p></div>
</div>
</div>
</body>
</html>



All I've added apart from the posters and putting the Element - n text in a P is the below. I needed to override the fixed height of the boxes.

CODE
.box    { height: auto !important;
          padding: .5em 0 0.3em 0 }
.box p  { margin: 0 }






User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 13 2020, 02:19 AM
Post #11


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

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



Change to this and the width of the boxes acts a little nicer.

CODE
.box    { height: auto !important; min-width: 250px !important;
          padding: .5em 0.3em 0.3em }
.box p  { margin: 0 }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spalisetty
post Sep 13 2020, 02:25 AM
Post #12


Novice
**

Group: Members
Posts: 22
Joined: 2-August 20
Member No.: 27,469



QUOTE(pandy @ Sep 13 2020, 02:19 AM) *

Change to this and the width of the boxes acts a little nicer.

CODE
.box    { height: auto !important; min-width: 250px !important;
          padding: .5em 0.3em 0.3em }
.box p  { margin: 0 }



Pandy,
I can't really thank you enough. I highly highly appreciate for your help. HUGS. Wow, you are amazing girl.
Regards
Suman P.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 13 2020, 02:43 AM
Post #13


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

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



It's a patchwork. I don't want to spend time dissecting the whole bootstrap, so I overrode what I could. It isn't perfect and it may break. It would have been easier to do it from scratch, without bootstrap.

Do you realize now that beginning with placing the text at the bottom was the wrong way to go? Let things be as much as possible. Work with the way a webpage works, not against it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spalisetty
post Sep 13 2020, 02:45 AM
Post #14


Novice
**

Group: Members
Posts: 22
Joined: 2-August 20
Member No.: 27,469



QUOTE(pandy @ Sep 13 2020, 02:43 AM) *

It's a patchwork. I don't want to spend time dissecting the whole bootstrap, so I overrode what I could. It isn't perfect and it may break. It would have been easier to do it from scratch, without bootstrap.


Still, you did try to help me. Never forget your help
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 29th March 2024 - 09:39 PM