I have some boxes of div element; each of the box I would like to have text of .... underneath, center-aligned .
This is what I already have:
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
Here is final result I tried to achieve
Yet, I could not have ..... text underneath the box correctly. Thanks.
What about using flex?
It's a bit hacky to get it beneath to box but there you go.
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-flex;
align-items: flex-end;
justify-content: center;
}
.box p {
position: relative;
bottom: -25px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
I have also a solution just with edit on the p.
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
}
.box>p{
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
You can make the p element absoultely positioned, with position: relative for the .box element and according position settings as in the example below:
.box {
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto;
display: inline-block;
margin-bottom: 30px;
}
.box p {
position: absolute;
bottom: -30px;
left: 0;
right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table style="width:100%;border:none;">
<tr class="moul">
<th style="width:10%;">
<p class="text-center">Winest</p>
</th>
<th>
<p class="text-center">Party B</p>
</th>
<th style="width:50%;">
<p class="text-center">Party A</p>
</th>
</tr>
<tr>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
</td>
<td class="text-center">
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
<div class="box">
<p>............</p>
</div>
</td>
<td>
<p class="text-center">MFI Institution</p>
<p class="text-center">Signature</p>
<p class="text-center">............</p>
</td>
</tr>
</table>
Related
This is my first post on Stack Overflow.
Basically, I'm trying to create an image gallery including car pictures and information about the cars.
I created a table with details about the car that I want to be visible when I hover over the image.
I tried working with opacity but that doesn't seem to work. Or am I doing something wrong?
Do I have to use JavaScript to show/hide the tables, then please advise.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Gallery</title>
</head>
<body>
<div class="ImageGallery">
<div class="image">
<div class="imagehover">
<img src="C:/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/LaFerrari.jpg" alt="Ferrari_LaFerrari">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari LaFerrari</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/812_Superfast.jpg" alt="Ferrari_812_Superfast">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari 812 Superfast</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_GTB.jpg" alt="Ferrari_488_GTB">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_Pista.jpg" alt="Ferrari_488_Pista">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso.jpg" alt="Ferrari_GTC4Lusso">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso_T.jpg" alt="Ferrari_GTC4Lusso_T">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/Portofino.jpg" alt="Ferrari_Portofino">
</div>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ImageGallery{
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
display: flex;
flex: 100%;
padding: 1em;
justify-content: center;
align-items: center;
}
.imagehover:hover {
opacity: 0.1;
transition: 1s ease;
}
.imagehover:hover .imageinfo{
opacity: 0.5;
z-index: 2;
}
.imageinfo{
position: absolute;
opacity: 0;
}
.imageinfo table{
background-color: #FFFFFF;
}
.imagehover td{
padding: 0.5em;
}
.imageinfo:hover{
transition: 0.5s ease;
}
.centered-text{
position: absolute;
top: 15%;
left: 42.5%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1024px){
.ImageGallery{
flex-direction: row;
}
.image{
flex: 50%;
}
}
try this code..hope this code will work !!!
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ImageGallery{
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
display: flex;
flex: 100%;
padding: 1em;
justify-content: center;
align-items: center;
}
.imagehover{
transition: all 0.5s linear;
}
.imagehover:hover .imageinfo{
opacity: 1;
z-index: 2;
}
.imageinfo{
position: absolute;
opacity: 0;
transition: all 0.5s linear;//added
}
.imageinfo table{
background-color: #FFFFFF;
}
.imagehover td{
padding: 0.5em;
}
.imageinfo:hover{
opacity: 1; //added
/* transition: 0.5s ease; *///remove
}
.centered-text{
position: absolute;
top: 15%;
left: 42.5%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1024px){
.ImageGallery{
flex-direction: row;
}
.image{
flex: 50%;
}
}
<div class="ImageGallery">
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_LaFerrari">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari LaFerrari</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_812_Superfast">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari 812 Superfast</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_GTB">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_Pista">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso_T">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_Portofino">
</div>
</div>
</div>
I Have Updated This Code Hope This Will Work For You.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.ImageGallery{
display: flex;
flex-wrap: wrap;
}
.image {
position: relative;
display: flex;
flex: 100%;
padding: 1em;
justify-content: center;
align-items: center;
}
.imagehover{
transition: all 0.5s linear;
}
.imagehover:hover .imageinfo{
opacity: 0.5;
z-index: 2;
}
.imageinfo{
position: absolute;
opacity: 0;
transition: all 0.5s linear;//added
}
.imageinfo table{
border: 1px solid #000;
background-color: #FFFFFF;
position: absolute;
top: -23px;
}
.imagehover td{
padding: 0.5em;
border: 1px solid #000;
}
.imageinfo:hover{
opacity: 0.5; //added
/* transition: 0.5s ease; *///remove
}
.centered-text{
position: absolute;
top: 15%;
left: 42.5%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1024px){
.ImageGallery{
flex-direction: row;
}
.image{
flex: 50%;
}
}
<div class="ImageGallery">
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_LaFerrari">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari LaFerrari</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_812_Superfast">
<div class="centered-text">
<div class="imageinfo">
<table >
<tr>
<td>Type</td>
<td>Ferrari 812 Superfast</td>
</tr>
<tr>
<td>Motor</td>
<td> </td>
</tr>
<tr>
<td>Vermogen</td>
<td> </td>
</tr>
<tr>
<td>0-100 km/u</td>
<td> </td>
</tr>
<tr>
<td>Topsnelheid</td>
<td> </td>
</tr>
<tr>
<td>Gewicht</td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_GTB">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_Pista">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso_T">
</div>
</div>
<div class="image">
<div class="imagehover">
<img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_Portofino">
</div>
</div>
</div>
Run code snippetHide results
I have dynamically generated content into DIVs and need DIVs widths to get adjusted depending on the content in the DIV by two preset values.
It should work like this: if we have a long content - the width should be = 960px, if there is a very few contents - just 480px.
So only two values and only two variations of the width: 960px or 480px.
* {
box-sizing: border-box;
}
.page-list-img {
clear: both;
width: 100px;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
padding: 5px !important;
opacity: 1.0;
transition: opacity 500ms;
}
.page-list-img:hover {
opacity: 0.5;
transition: opacity 500ms;
}
.button-page-list-p {
text-align: left;
}
span.lister {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.page_list_container {
width: 960px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
}
.column2 table {
border: none;
width: 100%;
height: 130px;
}
.column2 table td {
border-style: none !important;
vertical-align: middle;
}
.column1 {
text-align: center;
line-height: 130px;
float: left;
width: 150px;
padding-left: 10px;
height: 130px;
}
.column2 {
border-left: solid 0.7px #ddd;
text-align: justify;
/*line-height: 130px;*/
float: initial;
/* width: 789px; */
padding-left: 10px;
height: 130px;
display: table;
}
.row-lister {
min-inline-size: 460px;
max-inline-size: 100%;
/*float: left;*/
border-radius: 2px;
background-color: #f9f9f9;
border-top: solid 0.7px #ddd;
border-bottom: solid 0.7px #ddd;
border-left: solid 0.7px #ddd;
border-right: solid 0.7px #ddd;
/*width: 940px;*/
/* width:460px; */
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
flex-grow: 1;
}
<div class="page_list_container">
<div class="row-lister">
<div class="column1">
<span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here..... This is also a bit longer</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here longer a bit ...</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1">
<span class="lister">
<img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" />
</span>
</div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
And the last DIV in the page (even if it has a small content, but it is left only one in the last row) it's width has to be set to 960px anyway.
I was said to use flex for this purpose. But it solves only the sole DIV in the last row and content-depending width of the DIV. But, if you have many DIVs with different amount of contents in them you have different sizes of the DIVs, however rows will be filled by 100%.
EDIT
I have a table in the DIV with the content, so it could be useful to determine the length of the content (as we cannot predict the size of the content, as it can consist of images and text of different styles).
I am looking for CSS or jQuery.
Thank you!
You can use max-width and a dynamic unit as %. To limit the space any conent or element can use, depending on the parrent element.
In this case use :
.row-lister {
max-width: 49%;
}
This will limit each element to 49% of it parent .page_list_container.
I used 49% because you have margins between each element. I would recommend you to set does margins in % so they all add up to 100%.
Hope this helps :)
* {
box-sizing: border-box;
}
.page-list-img {
clear: both;
width: 100px;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
padding: 5px !important;
opacity: 1.0;
transition: opacity 500ms;
}
.page-list-img:hover {
opacity: 0.5;
transition: opacity 500ms;
}
.button-page-list-p {
text-align: left;
}
span.lister {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.page_list_container {
width: 960px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
}
.column2 table {
border: none;
width: 100%;
height: 130px;
}
.column2 table td {
border-style: none !important;
vertical-align: middle;
}
.column1 {
text-align: center;
line-height: 130px;
float: left;
width: 150px;
padding-left: 10px;
height: 130px;
}
.column2 {
border-left: solid 0.7px #ddd;
text-align: justify;
/*line-height: 130px;*/
float: initial;
/* width: 789px; */
padding-left: 10px;
height: 130px;
display: table;
}
.row-lister {
min-inline-size: 460px;
max-inline-size: 100%;
max-width: 49%;
/*float: left;*/
border-radius: 2px;
background-color: #f9f9f9;
border-top: solid 0.7px #ddd;
border-bottom: solid 0.7px #ddd;
border-left: solid 0.7px #ddd;
border-right: solid 0.7px #ddd;
/*width: 940px;*/
/* width:460px; */
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
flex-grow: 1;
}
<div class="page_list_container">
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here Long description here </em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here..... This is also a bit longer</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here longer a bit ...</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row-lister">
<div class="column1"><span class="lister"><img class="page-list-img" src="https://vignette.wikia.nocookie.net/shararam-smeshi/images/1/1c/CSS.png/revision/latest?cb=20161102175256&path-prefix=ru" /></span></div>
<div class="column2">
<table>
<tbody>
<tr>
<td>
<h4>Title</h4>
<em>Description here</em>
<p class="button-page-list-p">Find out more</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I have a table with user names in a tag. I need the table to be responsive and to be able to handle long usernames. As the table shrinks I need the first and last name to wrap, but then as it continues to shrink I would like to show an ellipsis as the names start to get cut off. I am struggling to make this work.
How do I get the user column to shrink in a responsive way and how do I get the text to behave as I described above?
.leaderboard {
max-width: 800px;
}
.media-left, .media-body {
display: table-cell;
vertical-align: middle;
}
.media-left {
padding-right: 10px;
}
td a {
padding: 5px;
display: block;
text-decoration: none;
color: inherit;
}
.user-column {
max-width: 225px;
}
.leaderboard .name {
display: inline-block;
}
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet"/>
<table id="user-leaderboard" class="leaderboard table table-condensed">
<colgroup><col>
<col>
<col width="22%">
<col width="22%">
<col width="22%">
</colgroup><thead>
<tr>
<th class="text-center">Rank</th>
<th>User</th>
<th class="text-center">dataset1 </th>
<th class="text-center">dataset2 </th>
<th class="text-center">dataset3 </th>
</tr>
</thead>
<tbody class="user-rows">
<tr class="clickable-row" id="">
<td class="text-center">1</td>
<td class="user-column">
<a href="#">
<div class="media">
<div class="media-left media-middle">
<img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
</div>
<div class="media-body media-middle">
<div class="name truncate">First</div>
<div class="name truncate">Last</div>
</div>
</div>
</a>
</td>
<td class="text-center sort-column">6</td>
<td class="text-center ">9</td>
<td class="text-center ">3</td>
</tr>
<tr class="clickable-row" id="leaderboard-user-row">
<td class="text-center">2</td>
<td class="user-column">
<a href="#">
<div class="media">
<div class="media-left media-middle">
<img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
</div>
<div class="media-body media-middle">
<div class="name truncate">Reallyreallyrealylreallylongfirstname</div>
<div class="name truncate">Reallyreallyreallyreallyreallylonglastname</div>
</div>
</div>
</a>
</td>
<td class="text-center sort-column">4</td>
<td class="text-center ">3</td>
<td class="text-center ">3</td>
</tr>
<tr class="clickable-row" id="">
<td class="text-center">3</td>
<td class="user-column">
<a href="#">
<div class="media">
<div class="media-left media-middle">
<img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
</div>
<div class="media-body media-middle">
<div class="name truncate">Firstname</div>
<div class="name truncate">Lastnamelong</div>
</div>
</div>
</a>
</td>
<td class="text-center sort-column">3</td>
<td class="text-center ">2</td>
<td class="text-center ">3</td>
</tr>
</tbody>
</table>
jsfiddle
You need to set a max-width for the .truncated. Since they aren't being shortened, they'll automatically stretch to the full width.
https://jsfiddle.net/yak613/jsdwcox9/
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 150px;
}
The problem is that the .name cells are actually extruding past the widths of the cells. What you need to do is give them a fixed width of 66.66% (two thirds):
.leaderboard .name {
width: 66.66%;
}
I've created a new fiddle demonstrating this here.
Hope this helps!
This is what I ended up doing. I used some of the info from the other answers but I needed additional tweaks to make it behave how I wanted.
I think the most important things were getting rid of display: table-cell and using display: flex instead. Also to get the cell to shrink beyond the width of the contents I had to set max-width on the <td>.
This is what I ended up with.
.text-center {
width: 15%;
}
.media-left,
.media-body {
vertical-align: middle;
}
.contents {
display: flex;
}
.avatar,
.name,
.full-name {
display: inline-block;
}
td {
max-width: 100px;
min-width: 100px;
}
.media-left {
padding-right: 10px;
}
td a {
padding: 5px;
display: block;
text-decoration: none;
color: inherit;
}
.leaderboard .name {
display: inline-block;
}
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet"/>
<table id="user-leaderboard" class="leaderboard table table-condensed">
<thead>
<tr>
<th class="text-center">Rank</th>
<th>User</th>
<th class="text-center">dataset1 </th>
<th class="text-center">dataset2 </th>
<th class="text-center">dataset3 </th>
</tr>
</thead>
<tbody class="user-rows">
<tr class="clickable-row" id="">
<td class="text-center">1</td>
<td class="user-column">
<a href="#">
<div class="media contents">
<div class="media-left media-middle avatar">
<img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
</div>
<div class="media-body media-middle full-name">
<div class="name truncate">First</div>
<div class="name truncate">Last</div>
</div>
</div>
</a>
</td>
<td class="text-center sort-column">6</td>
<td class="text-center ">9</td>
<td class="text-center ">3</td>
</tr>
<tr class="clickable-row" id="leaderboard-user-row">
<td class="text-center">2</td>
<td class="user-column">
<a href="#">
<div class="media contents">
<div class="media-left media-middle avatar">
<img class="img-rounded" src="http://twemoji.maxcdn.com/36x36/1f47e.png" width="36px">
</div>
<div class="media-body media-middle full-name">
<div class="name truncate">Reallyreallyrealylreallylongfirstname</div>
<div class="name truncate">Reallyreallyreallyreallyreallylonglastname</div>
</div>
</div>
</a>
</td>
<td class="text-center sort-column">4</td>
<td class="text-center ">3</td>
<td class="text-center ">3</td>
</tr>
</tbody>
</table>
I currently have a table setup that holds images in a table of varying sizes and is able to resize the image accordingly. How can I make the image maintain aspect ratio?
/* THIS PART IS FOR PAGE SETUP*/
.page-wrap {
min-height: 100%;
/* equal to footer height */
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
margin: 0;
margin-top: 100px;
}
.site-footer {
border-top: 2px dashed #95a0b7;
margin-left: auto;
margin-right: auto;
}
/* this is styling! */
.post {
color: #843900;
font-family: Calibri;
font-size: 112%;
border: 2px solid #;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 10;
}
html,
body {
background-color: #d1d6e0;
height: 100%;
}
/* THIS STUFF IS FOR DESIGN */
table {
width: 100%;
height: 100%;
}
td {
padding-left: 10px;
padding-bottom: 10px;
}
th {
text-align;
left;
}
.postTableBorder {
border-bottom: 1px dashed #95a0b7;
}
.footer {
text-align: center;
color: #843900;
font-family: Calibri;
font-size: 112%;
padding-bottom: 10px;
font-weight: bold;
}
h1 {
color: #843900;
font-family: Calibri;
font-size: 500%;
text-align: center;
margin: 0;
border-bottom: 5px dotted #95a0b7;
}
a {
text-decoration: none;
color: #843900;
text-shadow: 1px 1px 2px #662c00;
}
a:hover {
color: #662c00;
}
.headerP {
font-weight: bold;
color: #843900;
font-family: Calibri;
font-size: 150%;
}
.headerPselected {
font-weight: bold;
color: #843900;
font-family: Calibri;
font-size: 150%;
border-solid: solid 2px #7684a2;
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
box-shadow: -1px -1px 3px #0a0c0f, 1px 1px 3px #47566b;
line-height: 0;
}
.imageTD {
vertical-align: top;
padding-bottom: 10px;
}
h2 {
position: absolute;
bottom: 0px;
left: 10px;
width: 100%;
color: black;
font-family: Calibri;
}
/* COLORS FOR H2*/
.blue {
color: #0033cc;
text-shadow: 1px 1px 1px #002699;
}
.red {
color: #4d0000;
text-shadow: 1px 1px 1px #1a0000;
}
.imageLink:hover {
opacity: 0.66;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<title>Marc</title>
</head>
<body>
<div class="page-wrap">
<header>
<h1>
Homeless Helpers
</h1>
<table class="headerTable" , width="100%">
<tr>
<th width="20%">
<p class="headerP">
Message
</p>
</th>
<th width="20%">
<p class="headerP">
Goal
</p>
</th>
<th width="20%">
<p class="headerP">
Testimonials
</p>
</th>
<th width="20%">
<p class="headerP">
Media
</p>
</th>
<th width="20%">
<p class="headerP">
Donate
</p>
</th>
</tr>
</table>
</header>
<table>
<tr>
<td width="33%">
<div class="image">
<a href="code.html">
<div style='width:100%;height:100%'>
<img src='imgs/tweepy.png' style='width:100%;height:500px' alt='[]' class="imageLink" />
<h2 class="blue"> Care Packages</h2>
</div>
</a>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" />
</div>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" />
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' />
</div>
</div>
</td>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
<td width="50%" , class="imageTD" , rowspan="2">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:614px' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
</tr>
<tr>
<th colspan="2" , width="50%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x300' style='width:100%;height:300px' alt='[]' />
</div>
</div>
</th>
</tr>
</table>
</div>
<footer class="site-footer">
<p class="footer">
made by awesome people.
</p>
</footer>
</body>
</html>
How can I make it so that the images hold a ratio of 4:3 when the window is resized?
Change the <img> heights to auto works.
https://jsfiddle.net/JustusFT/3qtb1r9v/
However, I suggest you use a grid system such as bootstrap rather than using tables.
HTML:
<div class="page-wrap">
<header>
<h1>
Homeless Helpers
</h1>
<table class="headerTable" , width="100%">
<tr>
<th width="20%">
<p class="headerP">
Message
</p>
</th>
<th width="20%">
<p class="headerP">
Goal
</p>
</th>
<th width="20%">
<p class="headerP">
Testimonials
</p>
</th>
<th width="20%">
<p class="headerP">
Media
</p>
</th>
<th width="20%">
<p class="headerP">
Donate
</p>
</th>
</tr>
</table>
</header>
<table>
<tr>
<td width="33%">
<div class="image">
<a href="code.html">
<div style='width:100%;height:100%'>
<img src='imgs/tweepy.png' style='width:100%;height:auto' alt='[]' class="imageLink" />
<h2 class="blue"> Care Packages</h2>
</div>
</a>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' , align="top" />
</div>
</div>
</td>
<td width="33%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' , align="top" />
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
</div>
</div>
</td>
<td width="25%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
<td width="50%" , class="imageTD" , rowspan="2">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
<h2 class="red"> This is a test red</h2>
</div>
</div>
</td>
</tr>
<tr>
<th colspan="2" , width="50%" , class="imageTD">
<div class="image">
<div style='width:100%;height:100%'>
<img src='http://placehold.it/1000x300' style='width:100%;height:auto' alt='[]' />
</div>
</div>
</th>
</tr>
</table>
</div>
<footer class="site-footer">
<p class="footer">
made by awesome people.
</p>
</footer>
I have the following HTML table and there is a couple of problems with it. First the rows in the table are really large, the table row should be just large enough to fit the content inside of it. Second some of the inner divs are out of line with the rest of the divs in the row, in particular the ones that contains words that wrap onto a second line
<!DOCTYPE html>
<html>
<head>
<style>
.stopHoriz {
display:inline-block;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
.stopVertical {
margin-bottom:3px;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
</style>
</head>
<body>
<table border="1">
<tr style="height:75px">
<td colspan="2">
<div style="padding-right: 30px; vertical-align:top">
<div class="stopHoriz">Amusement</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Beaches</div>
</div>
</td>
<td rowspan="2" style="width:75px">
<div style="padding-bottom: 30px; vertical-align:top">
<div class="stopVertical">Amusement</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Beaches</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2" style="width:75px;">
<div style="padding-top: 30px">
<div class="stopVertical">Beaches</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Amusement</div>
</div>
</td>
<td>Main</td>
</tr>
<tr style="height:75px">
<td colspan="2">
<div style="padding-left: 30px">
<div class="stopHoriz">Beaches</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Amusement</div>
</div>
</td>
</tr>
</table>
</body>
</html>
I figured out the answer. The rowspan is causing the problem and I had to remove the rowspan and use a negative margin on the second row instead.
<!DOCTYPE html>
<html>
<head>
<style>
.stopHoriz {
display:inline-block;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
.stopVertical {
margin-bottom:3px;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
</style>
</head>
<body>
<table border="1">
<tr style="height:75px;">
<td colspan="2">
<div style="padding-right: 30px; vertical-align:top">
<div class="stopHoriz">Amusement</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Beaches</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2" style="width:75px;">
<div style="padding-top: 30px">
<div class="stopVertical">Beaches</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Amusement</div>
</div>
</td>
<td>Main</td>
<td style="width:75px">
<div style="padding-bottom: 30px; vertical-align:top; margin-top: -83px">
<div class="stopVertical">Amusement</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Beaches</div>
</div>
</td>
</tr>
<tr style="height:75px">
<td colspan="2">
<div style="padding-left: 30px">
<div class="stopHoriz">Beaches</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Amusement</div>
</div>
</td>
</tr>
</table>
</body>
</html>