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>
Related
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>
So, I'm trying to redesign how our product descriptions look on eBay, but am having trouble figuring out how to get the first tab to be open automatically. With how its setup now, it's you have to click on Product Description (tab) to display its contents. I can't seem to figure out where or what I have to add to have it automatically open.
Can anyone offer any assistance?
Thanks!!
<style type="text/css">.css-tabs {
position: relative;
text-align: center;
/* This is only if you want the tab items at the center */
}
.css-tabs ul.menu {
list-style-type: none;
display: inline-block;
/* Change this to block or inline for non-center alignment */
}
.css-tabs ul.menu>li {
display: block;
float: left;
}
.css-tabs ul.menu li>a {
color: #000;
text-decoration: none;
display: absolute;
text-align: center;
border: 1px solid #808080;
padding: 5px 10px 5px 10px;
margin-right: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 5px;
-moz-user-select: none;
cursor: pointer;
}
.css-tabs ul.menu li>div {
display: none;
position: absolute;
width: 100%;
left: 0;
margin: -1px 0 0 0;
z-index: -1;
text-align: left;
padding: 0;
}
.css-tabs ul.menu li>div>p {
border: 0px solid #808080;
padding: 10px;
margin: 0;
}
.css-tabs ul.menu li>a:focus {
border-bottom: 1px solid #fff;
}
.css-tabs ul.menu li:target>a {
cursor: default;
border-bottom: 1px solid #fff;
}
.css-tabs ul.menu li:target>div {
display: block;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Ebay Template</title>
</style>
</head>
<body>
<center>
<p><img src="https://centralvalleycomputerparts.com/product_images/uploaded_images/location.png" width="100%" height="166" /></p>
<table style="height: 651px; width: 100%;" border=0>
<tbody>
<tr style="height: 493px;">
<td style="width: 18.9401%; height: 493px;">
<table style="height: 485px;" width="152">
<tbody>
<tr>
<td style="width: 142px; text-align: right;"><strong>
<font size = 5>
Categories<font></strong></td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">
<hr>All Products
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Add-On Cards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Accessories
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Cables
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Cisco
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Desktops/Laptops/Servers
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Electronics
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Hard Drives
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Heat Sinks
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Keyboards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Memory / RAM
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Motherboards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Power Supplies
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Processors
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Server Components
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">SSDs
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Video Cards
<hr>
</td>
</tr>
<tr>
<td style="width: 142px; text-align: right;">Other
<hr>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 78.9688%; height: 493px;">
<p>
<!-- it goes here -->
<form method="get" action="http://www.ebay.com/sch/i.html" target="_blank">
<table style="margin:auto; font-family:arial; text-align:left; background:#ddd; border:1px solid #888; border-radius:.25em">
<tbody>
<tr>
<td>
<input type="hidden" name="_ssn" value="central_valley_computer_parts_inc">
<input type="hidden" name="_sop" value="12">
<input type="text" name="_nkw" value="">
<input type="submit" value="Search">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="LH_TitleDesc" value="1">
<small>include description</small>
</td>
</tr>
</tbody>
</table>
</form>
<div id="tab2" class="css-tabs">
<ul class="menu">
<li id="item-1">
<a href="#item-1">
<font face="Helvetica" size=5>Product Description</font>
</a>
<div>
<p>
<!-- ******************************-->
<!-- Product Description goes here -->
<!-- ******************************-->
<center>
<img src="https://cdn8.bigcommerce.com/s-bxaxkh/product_images/uploaded_images/product-description.png?t=1532892462&_ga=2.208211035.830779260.1532892407-1079763816.1532576134">
</center>
<!-- ******************************-->
<!-- Product Description Ends here -->
<!-- ******************************-->
</p>
</div>
</li>
<li id="item-2">
<a href="#item-2">
<font face="Helvetica" size=5>About Us</font>
</a>
<div>
<p>Central Valley Computer Parts, Inc. has been in business since 2010. What started as a home business and hobby 7 years ago has since grown into a full-blown business supporting 10 team members! We operate out of a warehouse in Ripon,
California and strive to provide the best customer service we can. We hope to serve you for many years to come!</p>
</div>
</li>
<li id="item-3">
<a href="#item-3">
<font face="Helvetica" size=5>Return Policy</font>
</a>
<div>
<p>
<!-- ******************************-->
<!-- Start Return Policy -->
<!-- ******************************-->
<img src="https://cdn6.bigcommerce.com/s-bxaxkh/product_images/uploaded_images/terms2-a.jpg?t=1504814802&_ga=2.109104901.102196424.1504814843-1761240196.1503617547">
<!-- ******************************-->
<!-- end return policy -->
<!-- ******************************-->
</p>
</div>
</li>
<li id="item-4" title="click for Tab 4">
<a href="#item-4">
<font face="Helvetica" size=5>Tab 4</font>
</a>
<div>
<p>Tab Content 4</p>
</div>
</li>
</ul>
</div>
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
<p>
 
<p>
 
<p>
<p>
 
<p>
<p>
 
</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
</body>
</html>
You can do it with javascript like following.
location.href=location.href+"#item-1";
http://jsbin.com/hogasozucu/edit?html,output
of course it is possible only with css3 like following
.css-tabs ul.menu li:first-child>a { cursor: default; border-bottom: 1px solid #fff; }
.css-tabs ul.menu li:first-child>div { display: block; }
please try it on jsbin.com/mazazomamu/edit?css,output
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>
not in container
I am trying to get the picture to stay into the left column but it doesn't seem to stay. As you can see, it hovers over the table. What can I do to make it stay within the table?
<table align="center" style="width:550px" id="table" cellpadding="5">
<tr>
<th style="text-align: left" rowspan="2">
<img src="avi.png" alt="" id="avatar" />
</th>
<th style="text-align: left">
<h1 id="hello">My Resume</h1>
</th>
</tr>
<tr>
<td style="text-align: left">
<p>Hello this is a crazy little test that i am doing to see if this code works</p>
</td>
</tr>
</table>
If you specifically want something like the example you gave, using tables is the old clunky way of doing it. I'd suggest using flexbox, it's a simple way of lining things up and making them look nice.
Here is an example:
body {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.resume {
display: flex;
align-items: center;
justify-content: center;
}
.resume-picture {
border: 10px solid #1976D2;
border-radius: 50%;
background: #f3f2f1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
height: 175px;
}
.resume-content {
padding: 0 15px;
}
.resume-content h2 {
color: #1976D2;
margin-top: 0;
}
.resume-content p {
color: #333;
margin: 0;
}
<div class="resume">
<img class="resume-picture" src="https://avatars2.githubusercontent.com/u/3534427?v=3" />
<div class="resume-content">
<h2>My Resume</h2>
<p>Hello this is a crazy little test that i am doing to see if this code works.
<br>Hello this is a crazy little test that i am doing to see if this code works.
<br>Hello this is a crazy little test that i am doing to see if this code works.</p>
</div>
</div>
I hope this is the sort of thing you are looking for.
Override image on text
<table align="center" style="width:550px;border:1px solid #c2c2c2; position: relative;" id="table" cellpadding="5" border="0">
<tr>
<th style="text-align: left;border-right:1px solid #c2c2c2;min-width:50px;" rowspan="2">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png" alt="" id="avatar" width="100" height="100" style="
position: absolute;
bottom: 0;
left: 14px;
top: 33px;
z-index: 2;
opacity: 0.5;" />
</th>
<th style="text-align: left;border-bottom:1px solid #c2c2c2;">
<h1 id="hello">My Resume</h1>
</th>
</tr>
<tr>
<td style="text-align: left">
<p>Hello this is a crazy little test that i am doing to see if this code works</p>
</td>
</tr>
</table>
image in table container update style
<table align="center" style="width:550px;border:1px solid #c2c2c2;" id="table" cellpadding="5" border="0">
<tr>
<th style="text-align: left;border-right:1px solid #c2c2c2;" rowspan="2">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png" alt="" id="avatar" width="100" height="100" />
</th>
<th style="text-align: left;border-bottom:1px solid #c2c2c2;">
<h1 id="hello">My Resume</h1>
</th>
</tr>
<tr>
<td style="text-align: left">
<p>Hello this is a crazy little test that i am doing to see if this code works</p>
</td>
</tr>
</table>
I have a table that is inside of a div. In responsive mode, the table goes outside of the div area and looks like this:
I am trying to have the table move to center in responsive mode. I want it to look like this:
Currently, when the screen width gets small, the table will not get close enough to the left to fit in the container. I do not want the table to go outside of the container.
Does anyone know how I can accomplish this?
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: hand;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How about adding
overflow-x: auto;
To the div.inner element. Altough I´m not sure if this is what you want. Your CSS would be something like
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
overflow-x: auto; // When the table exceeds the size of the container, the container creates a scrollbar.
}
I took the liberty of adding a second cell for demostrations sake.
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: hand;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
overflow-x: auto;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
<td width="401" height="400" align="center" valign="middle" bgcolor="red">Cell 2</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try the img-responsive class on your images like this:
<!DOCTYPE html>
<html>
<head>
<style>
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: grab;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
</style>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" class="table-responsive" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="38">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_01.png' %}" width="400" height="4" alt="">
</td>
<td>
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/spacer.gif' %}" width="1" height="4" alt="">
</td>
</tr>
<tr>
<td rowspan="48">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_02.png' %}" width="2" height="395" alt="">
</td>
<td width="61" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
<td rowspan="5">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_04.png' %}" width="2" height="50" alt="">
</td>
<td width="58" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 2</td>
<td colspan="27">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_06.png' %}" width="212" height="2" alt="">
</td>
<td width="62" height="206" colspan="2" rowspan="24" align="center" valign="middle" bgcolor="#75904A">Cell 3</td>
<td rowspan="48">
<img class="slice-table img-responsive" src="#" width="3" height="395" alt="">
</td>
<td>
<img class="slice-table img-responsive" src="#" width="1" height="2" alt="">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>