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
Related
I need help regarding this because frankly I have been stuck trying to fix it for a while.
Magento transporter wraps the table in a <div> and the <div> element breaks my table and I cannot find anywhere why.
This is the code. Can anyone help?
<table role="presentation" cellpadding="0" cellspacing="0" width="" style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px; margin-bottom:10px !important;" >
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan=65% style="">
<div> חולצת בייסיק ניקי</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan=30% style="">
<div > FOX </div>
</td>
</tr>
<tr>
<td colspan=33% style="">
</td>
<td colspan=33% style="">
<? echo ?> L מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=32% style="">
<div class="swatch-option color" option-type="1" option-id="<?=$k['optionId'] ?>" option-label="<?=$k['optionLabel'] ?>"></div>
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
M
</div>
</td>
<td colspan="35%"style="">
<div>
:החלפה ל
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
motiv pentru ca
</div>
</td>
<td colspan="35%"style="">
<div>
:סיבת החלפה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%" >
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('https://preview.redd.it/dafv3ne6kua21.jpg?width=640&crop=smart&auto=webp&s=7939967e8a33a8e9a18d999467e4f73a9ebb2e20') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 1;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החלפה
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table role="presentation" cellpadding="0" cellspacing="0" width="550" style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px;margin-bottom:10px !important" >
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan=65% style="">
<div> <? echo $k['name'] ?></div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan=30% style="">
<div > <? echo $k['brand'] ?> </div>
</td>
</tr>
<tr>
<td colspan=33% style="">
<div>
מחיר ₪<? echo (float)$k['price'] ?>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=33% style="">
<? echo $k['sizeReceived'] ?> מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan=32% style="">
<div class="swatch-option color" option-type="1" option-id="<?=$k['optionId'] ?>" option-label="<?=$k['optionLabel'] ?>"></div>
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
<? echo $k['reason'] ?>
</div>
</td>
<td colspan="35%"style="">
<div>
:סיבת החזרה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%" >
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('<? echo $k['image'] ?>') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 2;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
There's a lot of issue with the formatting of your code that can cause table breaking. When you fix these, it should look this:
<table role="presentation" cellpadding="0" cellspacing="0" width=""
style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px; margin-bottom:10px !important;">
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan="65%" style="">
<div> חולצת בייסיק ניקי</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="30%" style="">
<div> FOX</div>
</td>
</tr>
<tr>
<td colspan="33%" style="">
</td>
<td colspan="33%" style="">
L מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="32%" style="">
<div class="swatch-option color" option-type="1" option-id="<?php echo $k['optionId'] ?>"
option-label="<?php echo $k['optionLabel'] ?>">
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
M
</div>
</td>
<td colspan="35%" style="">
<div>
:החלפה ל
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
motiv pentru ca
</div>
</td>
<td colspan="35%" style="">
<div>
:סיבת החלפה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%">
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('https://preview.redd.it/dafv3ne6kua21.jpg?width=640&crop=smart&auto=webp&s=7939967e8a33a8e9a18d999467e4f73a9ebb2e20') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 1;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החלפה
</div>
</td>
</tr>
</tbody>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" width="550"
style="height: 205px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 15px 12px 19px;margin-bottom:10px !important">
<tbody>
<tr>
<td colspan="80%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: center; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;">
<td colspan="65%" style="">
<div> <?php echo $k['name'] ?></div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 2px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="30%" style="">
<div> <?php echo $k['brand'] ?> </div>
</td>
</tr>
<tr>
<td colspan="33%" style="">
<div>
מחיר ₪<?php echo (float)$k['price'] ?>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="33%" style="">
<?php echo $k['sizeReceived'] ?> מידה
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 2px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="32%" style="">
<div class="swatch-option color" option-type="1" option-id="<?php echo $k['optionId'] ?>"
option-label="<?php echo $k['optionLabel'] ?>">
צבע
</div>
</td>
</tr>
<tr>
<td colspan="65%" style="">
<div style="text-align:right">
<?php echo $k['reason'] ?>
</div>
</td>
<td colspan="35%" style="">
<div>
:סיבת החזרה
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="20%">
<div style="display:block;width:104px; height:145px;text-align: center; font-size: 0; background:url('<?php echo $k['image'] ?>') no-repeat center; background-size: cover; position: relative">
</div>
<div style="
position:absolute;
z-index: 2;
width: 104px;
height: 24px;
opacity: 0.8;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>
Can you please check this out?
I'm trying to align the last image on the right side of the page in order to make it looks like simmetric
The code I'm using on FTL is the following but it is always next to the middle section:
<table class="header">
<tr>
<td align="left" valign="middle">
<img src="${logo1}" style="float: left; margin: 7px; width: 120px; height: 67.5px" />
</td>
<td align="left" valign="middle" style=" margin-left: 50px;">
<span class="infos" style="font-size:17pt"><b>${info}</b></span><br/>
</td>
<td align="right" valign="right">
<img src="${lastLogo}" style="float: right; margin: 7px; width: 120px; height: 67.5px" />
</td>
</tr>
</table>
If you make your table take up 100% width, it will do as you desire.
<table class="header" style="width: 100%">
<tr>
<td align="left" valign="middle">
<img src="${logo1}" style="float: left; margin: 7px; width: 120px; height: 67.5px" />
</td>
<td align="left" valign="middle" style=" margin-left: 50px;">
<span class="infos" style="font-size:17pt"><b>${info}</b></span><br/>
</td>
<td align="right" valign="middle">
<img src="${lastLogo}" style="float: right; margin: 7px; width: 120px; height: 67.5px" />
</td>
</tr>
</table>
An example below, but don't use styly inline that way.
We currently use tables for tabular data, otherwise we create everything on div.
*,
:after,
:before {
box-sizing: border-box;
}
<table class="header">
<tr>
<td>
<img src="https://fakeimg.pl/120x60/ff0000/fff" style="width: 120px;" />
</td>
<td>
<div class="infos" style="border: 1px solid red; padding: 0 20px; font-size:17px; max-width: 120px;">
<b>Lorem ipsum dolor sit.</b>
</div>
</td>
<td>
<img src="https://fakeimg.pl/120x60/4efc03/000" style="width: 120px;" />
</td>
</tr>
</table>
Better solution
*,
:after,
:before {
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
}
.header img {
width: 120px;
}
.infos {
display: flex;
align-items: center;
}
<div class="header">
<div><img src="https://fakeimg.pl/120x60/ff0000/fff"></div>
<div class="infos">
<b>Lorem ipsum dolor sit.</b>
</div>
<div><img src="https://fakeimg.pl/120x60/4efc03/000"></div>
</div>
how to draw a horizontal line touching from td 1 td 4 with out using content css
I am expecting as below progress bar
<table>
<hr>
<tr style="border-bottom:1px solid black;">
<td>
<div class="circle"><span id="progressindex">1</span></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
Without using CSS you cannot do it.
Try this way but it uses CSS and also gives what you want.
HTML
<html>
<head>
<title>Step Progress bar</title>
</head>
<body>
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</body>
</html>
CSS
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style: none;
display: inline-block;
width: 30.33%;
position: relative;
text-align: center;
cursor: pointer;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height : 30px;
border: 1px solid #ddd;
border-radius: 100%;
display: block;
text-align: center;
margin: 0 auto 10px auto;
background-color: #fff;
}
.progressbar li:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index : -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
i think when you click Run code snippet you'll see the last table .. i think is better
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style type="text/css">
.addouterline{
border-bottom:1px solid red;
color:red;
}
.roundnormal{border-radius: 70%;
text-align:center;
margin-bottom:30px;
line-height:20px;
width:40px;
height:30px;
border:1px solid black;
}
.roundthis{border-radius: 70%;
text-align:center;
margin-bottom:30px;
line-height:20px;
width:40px;
height:30px;
border:1px solid red;
color:red;
}
</style>
From 1 to 4 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td>
</tr>
<tr align="center">
<td style="color:red">|</td><td></td><td></td><td style="color:red">|</td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> -->1<!-- </span> --></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
<br>
<hr>
<br>
From 1 to 3 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td><td width="200px"></td>
</tr>
<tr align="center">
<td>|</td><td></td><td>|</td><td></td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> -->1<!-- </span> --></div>
</td>
<td>
<div class="circle">2</div>
</td>
<td>
<div class="circle">3</div>
</td>
<td>
<div class="circle">4</div>
</td>
</tr>
</table>
<br>
<hr>
<br>
From 2 to 4 :
<table width="400px" cellpadding="0" cellspacing="0">
<!-- <hr>
<tr style="border-bottom:1px solid black;">-->
<tr align="center">
<td width="200px"></td><td align="right"><span style="width:100px;" class="addouterline"> </span></td><td class="addouterline" width="200px"></td><td align="left"><span style="width:100px;" class="addouterline"> </span></td>
</tr>
<tr align="center">
<td></td><td style="color:red">|</td><td></td><td style="color:red">|</td>
</tr>
<tr align="center">
<td>
<div class="circle"><!-- <span id="progressindex"> --><span class="roundnormal"> 1 </span><!-- </span> --></div>
</td>
<td>
<div class="circle"><span class="roundthis"> 2 </span></div>
</td>
<td>
<div class="circle"><span class="roundnormal"> 3 </span></div>
</td>
<td>
<div class="circle"><span class="roundthis"> 4 </span></div>
</td>
</tr>
</table>
</body>
</html>
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 to arrange my input text elements vertically. and with same height to all of them. I can make custom css class with height say height = "30px", It works perfect but when i zoom in or zoom out in browser there height increases or decreases.
How i can write correct css class to work them properly
ok this is complte html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Feedback System</title>
<script src="Jquery/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Jquery/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<link href="CSS/Header.css" rel="stylesheet" type="text/css" />
<link href="Jquery/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.textbox
{
font-weight:bold;
}
td
{
border:solid 1px #c1c1c1;
}
.style9
{
width: 500px;
border: 1px solid #00FFFF;
height: 442px;
}
.no
{
width:50px;
text-align:center;
}
.ques
{
width:250px;
}
.column
{
width:100px;
height:100%;
float:left;
border:none;
border-right:solid 1px gray;
overflow:hidden;
}
.ans_cell
{
width:94px;
}
input{
width:100%;
line-height:27.5px;
height:auto;
display:block;
text-align:center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="tabbox"
style="top: 160px; left: 7px; position: absolute; height: 38px; width: 100%; text-align: center;"
class="style6">
Feedback Form</div>
<div style="top: 216px; left: 98px; position: absolute; border-radius:20px; border-bottom:solid 1px #33ccff; height: 61px; width: 86%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; border-left-style: none; border-left-color: inherit; border-left-width: medium; border-right-style: none; border-right-color: inherit; border-right-width: medium; border-top-style: none; border-top-color: inherit; border-top-width: medium;">
<div style="top: 10px; float:left; left: 81px; position: absolute; height: 19px; width: 93%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; margin-left: 40px;">
<div style="position:absolute; top: 0px; left: -79px; width: 467px; margin-left: 80px;">Name :
<span class="style7">Yadav Sagar Sampatrao</span></div>
<div style="position:absolute; top: 1px; left: 479px; width: 179px; right: 449px;">
Roll No : <span class="style7">4242</span></div>
<div style="position:absolute; top: 0px; left: 675px; width: 177px; right: 255px;">Class :
<span class="style7">B. E.</span></div>
<div style="position:absolute; top: -1px; left: 883px; width: 219px;">Deparment :
<span class="style7">CSE</span></div>
</div>
</div>
<div style="position:absolute; top: 314px; left: 126px; width: 1119px; height: 499px; border:solid 1px #c1c1c1;">
<table class="style9">
<tr id="sub_name">
<td class="no">
Sr. No.</td>
<td class="ques" style="text-align:right;">
subject</td>
</tr>
<tr id="teacher_name">
<td class="no">
</td>
<td class="ques">
Parmeters to be Evaluated / Name of Teacher</td>
</tr>
<tr id="Tr1">
<td class="no">
1</td>
<td class="ques">
Punctuality and Regularity</td>
</tr>
<tr id="Tr2">
<td class="no">
2 </td>
<td class="ques">
Subject Knowledge and Preparation</td>
</tr>
<tr id="Tr3">
<td class="no">
3</td>
<td class="ques">
Clarity of Communication Skilll and Speed of Delivery</td>
</tr>
<tr id="Tr4">
<td class="no">
4</td>
<td class="ques">
Clarity of writing on Black Board</td>
</tr>
<tr id="Tr5">
<td class="no">
5</td>
<td class="ques">
Use of teaching aids (ex- PPT, OHP, Models, Charts)</td>
</tr>
<tr id="Tr6">
<td class="no">
6</td>
<td class="ques">
Timely completion of Syllabus</td>
</tr>
<tr id="Tr7">
<td class="no">
7</td>
<td class="ques">
Understanding and Interest Generated in Subject</td>
</tr>
<tr id="Tr8">
<td class="no">
8</td>
<td class="ques">
Efforts improving academic performance of Students</td>
</tr>
<tr id="Tr9">
<td class="no">
9</td>
<td class="ques">
Class Control and Discipline</td>
</tr>
<tr id="Tr10">
<td class="no">
10</td>
<td class="ques">
Availability Outside Classroom for Discussion</td>
</tr>
<tr id="Tr11">
<td class="no">
11</td>
<td class="ques">
The attitude of Teacher towards Student</td>
</tr>
</table>
<div id="ans_window" style="position:absolute; top: 0px; left: 501px; width: 616px; height: 441px; border:solid 1px #33ccff;">
<div class="column">
<input type="text" disabled="disabled" />
<input type="text" disabled='disabled'/>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="column"></div>
</div>
</div>
</body>
</html>
Change the CSS for input element as follow:
input{
width:100%;
line-height:27.5px;
height:auto;
display:block;
text-align:center;
}
Add this to your css file
input[type=text]{height:30px !important;}
unless you don't give us a fiddle we can't give you a straight answer!
But i answered yesterday something about the zooming on browsers that you can see it here .
So 'maybe' (cause we have no full code yet) there is a problem on your border width cause its not the same with your left table! Does the problem exists in IE? Try insdead of using 'border', the 'outline' css style in order to avoid messing with zooming...
EDIT: i've made some changes on yout code to find the problem cause it was little messy. Here is the snippet that works in my browsers, i hope it helps:
.textbox
{
font-weight:bold;
}
.no
{
width:50px;
text-align:center;
}
.ques
{
width:250px;
}
.ans_cell
{
width:94px;
}
.column
{
position: relative;
width:100px;
display: table;
}
.column input{
height:32px;
vertical-align :middle;
width:100%;
display:table-cell;
padding:1px;
outline:1px solid black;
text-align:center;
}
.tableone {
position:absolute;
top: 314px;
left: 126px;
width: 1119px;
height: 499px;
border:solid 1px #c1c1c1;
}
.style9 td
{
height:34px;
outline:solid 1px #c1c1c1;
}
.style9 .ques {
width: 500px;
}
.style9
{
position: relative;
display: inline-block;
}
#ans_window {
position:relative;
display: inline-block;
border:solid 1px #33ccff;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Feedback System</title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="Jquery/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<link href="Jquery/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
</script>
</head>
<body>
<div id="tabbox"
style="top: 160px; left: 7px; position: absolute; height: 38px; width: 100%; text-align: center;"
class="style6">
Feedback Form</div>
<div style="top: 216px; left: 98px; position: absolute; border-radius:20px; border-bottom:solid 1px #33ccff; height: 61px; width: 86%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; border-left-style: none; border-left-color: inherit; border-left-width: medium; border-right-style: none; border-right-color: inherit; border-right-width: medium; border-top-style: none; border-top-color: inherit; border-top-width: medium;">
<div style="top: 10px; float:left; left: 81px; position: absolute; height: 19px; width: 93%; font-family: 'Times New Roman', Times, serif; color: #666666; font-size: medium; font-weight: bold; margin-left: 40px;">
<div style="position:absolute; top: 0px; left: -79px; width: 467px; margin-left: 80px;">Name :
<span class="style7">Yadav Sagar Sampatrao</span></div>
<div style="position:absolute; top: 1px; left: 479px; width: 179px; right: 449px;">
Roll No : <span class="style7">4242</span></div>
<div style="position:absolute; top: 0px; left: 675px; width: 177px; right: 255px;">Class :
<span class="style7">B. E.</span></div>
<div style="position:absolute; top: -1px; left: 883px; width: 219px;">Deparment :
<span class="style7">CSE</span></div>
</div>
</div>
<div class="tableone">
<table class="style9">
<tr id="sub_name">
<td class="no">
Sr. No.</td>
<td class="ques" style="text-align:right;">
subject</td>
</tr>
<tr id="teacher_name">
<td class="no">
</td>
<td class="ques">
Parmeters to be Evaluated / Name of Teacher</td>
</tr>
<tr id="Tr1">
<td class="no">
1</td>
<td class="ques">
Punctuality and Regularity</td>
</tr>
<tr id="Tr2">
<td class="no">
2 </td>
<td class="ques">
Subject Knowledge and Preparation</td>
</tr>
<tr id="Tr3">
<td class="no">
3</td>
<td class="ques">
Clarity of Communication Skilll and Speed of Delivery</td>
</tr>
<tr id="Tr4">
<td class="no">
4</td>
<td class="ques">
Clarity of writing on Black Board</td>
</tr>
<tr id="Tr5">
<td class="no">
5</td>
<td class="ques">
Use of teaching aids (ex- PPT, OHP, Models, Charts)</td>
</tr>
<tr id="Tr6">
<td class="no">
6</td>
<td class="ques">
Timely completion of Syllabus</td>
</tr>
<tr id="Tr7">
<td class="no">
7</td>
<td class="ques">
Understanding and Interest Generated in Subject</td>
</tr>
<tr id="Tr8">
<td class="no">
8</td>
<td class="ques">
Efforts improving academic performance of Students</td>
</tr>
<tr id="Tr9">
<td class="no">
9</td>
<td class="ques">
Class Control and Discipline</td>
</tr>
<tr id="Tr10">
<td class="no">
10</td>
<td class="ques">
Availability Outside Classroom for Discussion</td>
</tr>
<tr id="Tr11">
<td class="no">
11</td>
<td class="ques">
The attitude of Teacher towards Student</td>
</tr>
</table>
<div id="ans_window" >
<div class="column">
<input type="text" disabled="disabled" />
<input type="text" disabled='disabled'/>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="column"></div>
</div>
</div>
</body>
</html>
Nest the input element in the table's column and set the height to inherit.