Following JS Fieddle shows expected output on IE & Chrome, But in Firefox, it's completely different.
Whats problem?
http://jsfiddle.net/webtiki/kQXkt/7/
table {
width:90%;
}
td {
width:30%;
position:relative;
}
td .dummy{
margin-top:100%;
}
td .content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:gold;
}
<table>
<tr>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
</tr>
<tr>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
</tr>
<tr>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
<td>
<div class="dummy"></div>
<div class="content">1</div>
</td>
</tr>
<table>
Related
In my project, I have four pictures.
Theses pictures can be displayed one by one when page is loading successfully.
Now I am in trouble for these four picture's size is not the same because these pictures have different original size
I have tried to define height of each tr, but it works fail.
Here is my html code:
<table style="width:100%;height:100%;position:absolute;top:0;right:0;font-size:20px;">
<tr style="height:80px">
<td>
<div style="float:left">
<span>
CompanyNetworkStruct
</span>
</div>
<div style="float:left">
<img src="pic/nsccnetwork.jpg">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
GovenmentCloudStruct
</span>
</div>
<div style="float:left">
<img src="pic/govCloud.jpg">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
PublicCloudStruct
</span>
</div>
<div style="float:left">
<img src="pic/publicCloud.jpg">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
ScienctBNetWorkStruct
</span>
</div>
<div style="float:left">
<img src="pic/officeBS.jpg">
</div>
</td>
</tr>
</table>
I want to define each picture size is width:400px height:400px, who can help me ?
Simply set the width and height on img in your CSS:
img {
width: 400px;
height: 400px;
}
<table style="width:100%;height:100%;position:absolute;top:0;right:0;font-size:20px;">
<tr style="height:80px">
<td>
<div style="float:left">
<span>
CompanyNetworkStruct
</span>
</div>
<div style="float:left">
<img src="http://placehold.it/100">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
GovenmentCloudStruct
</span>
</div>
<div style="float:left">
<img src="http://placehold.it/100">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
PublicCloudStruct
</span>
</div>
<div style="float:left">
<img src="http://placehold.it/100">
</div>
</td>
</tr>
<tr style="height:80px">
<td>
<div style="float:left">
<span>
ScienctBNetWorkStruct
</span>
</div>
<div style="float:left">
<img src="http://placehold.it/100">
</div>
</td>
</tr>
</table>
try adding max-height, max-width
<tr style="height:80px">
<td>
<div style="float:left">
<span>
GovenmentCloudStruct
</span>
</div>
<div style="float:left">
<img style="max-height:400px;max-width:400px;" src="pic/govCloud.jpg" >
</div>
</td>
</tr>
First, add in style img {width: 400px; height: 400px;} then set same height and width into img tag, like:
<img src="pic/officeBS.jpg" width="400" height="400" style="width: 400px; height: 400px;">
Hope, this will help you.
I have an html table on my website (emma-moore.com) that I'm using for layout instead of tabular data:
<table border="0" cellpadding="5px" width="100%" class="followFont">
<tbody>
<tr>
<td align="left">Follow your heart</td>
</tr>
<tr>
<td align="left" style="padding-bottom: 10px">and you'll always</td>
</tr>
<tr>
<td align="left">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</td>
</tr>
<tr>
<td align="left" style="padding-top: 10px">end up where your</td>
</tr>
<tr>
<td align="left">soul needs to be.</td>
</tr>
</tbody>
</table>
Best practice is not to use inline styles and tables for layout, and I'm wondering how to replace the table with a div block and put the text and the jpg inside the div block in such a way that the text and jpg display the same way as they do when using the table. How can I best do this with css and a div block?
Thanks,
William
.followFont
{
padding:5px;
border:0;
cellpadding:5px;
width:100%;
display:table;
}
<div class="followFont">
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">Follow your heart</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-bottom: 10px;">and you'll always</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-top: 10px;">end up where your</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
soul needs to be.
</div>
</div>
</div>
Link:-https://html-cleaner.com/features/replace-html-table-tags-with-divs/
<h2>Phone numbers</h2>
<table width="300" border="1" cellpadding="5" style="text-align: center">
<tr>
<th width="75"><strong>Name</strong></th>
<th><span style="font-weight: bold;">Telephone</span></th>
<th> </th>
</tr>
<tr>
<td>John</td>
<td>0123 456 785</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
<tr>
<td>Cassie</td>
<td>9876 532 432</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
</table>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell">0123 456 785</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell">9876 532 432</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>
You can use
<div id="table" style="display: table;">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You'll be using like table
Div can have the same properties as table
like
#table
{
vertical-align:middle;
text-align:center:
border:solid 1px #ddd;
width:100%;
}
.cell
{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px #ddd;
width:25%;
padding:10px;
}
and soon....
Hope this helps
What I am trying is to display message row by row, and finally display a text box for input to send message, now the problem I faced is that I can display the message row by row, however the text box will be show near to the display message horizontally. The text box cannot be show at the bottom row of the page. Here is the unexpected result image. I tried many ways but seems cannot solve it.
Edited: And I need to display incoming message on left side and outgoing message on the right hand side
<div class="container">
<div class="row">
<div class="row" style="width:100%">
<table>
<tr>
<td bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="" alt="Smiley face" height="80" width="80">
</td>
<td></td>
<td></td>
<tr>
<tr>
<td bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="" alt="Smiley face" height="80" width="80">
</td>
<td></td>
<td></td>
<tr>
</table>
<br/>
<br/>
<table>
<form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
<tr>
<td>
<input type="text" id="body" name="body" style="width:700px;height:50px;">
</td>
<td>
<button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button>
</td>
</tr>
<br>
</form>
</table>
</div>
Use display: inline-table then float:right; and float:left if you want a <td> to be wider than the other <td>, use colspan. All and more properties and attributes are used in the Snippet below:
SNIPPET
.msg {
display: inline-table;
table-layout: fixed;
border-collapse: collapse;
width: 50%;
}
.left {
float: left;
text-align: left;
}
.right {
float: right;
text-align: right;
}
.input {
width: 100%;
}
img {
display: block;
padding:0 80% 0 0;
margin: 0 auto 0 0;
}
<div class="container">
<div class="row">
<div class="row" style="width:100%">
<form action="http://www.hashemian.com/tools/form-post-tester.php" method="post" name="myForm">
<table class='left msg'>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
</table>
<table class='right msg'>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
</table>
<table class='input msg'>
<tr>
<td colspan='5'>
<input type="text" id="body" name="body" style="width:100%;height:50px;">
</td>
<td>
<input type='submit' style="width:100px;height:50px;" id="sent_1" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
if you are using Twitter Bootstrap in this,
insert <div class="clearfix"></div>
just before
<table>
<form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
<tr><td><input type="text" id="body" name="body" style="width:700px;height:50px;"></td>
<td><button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button></td>
</tr><br>
</form>
</table>
css:
table,
tr{
width:100%;
}
If the table is not compulsory for you, then you can use flex-box
You can understand the advantage of using flexbox after executing the following code snippet.
It is more customisable and in my html code, The position of image is before message. But in the output for sent message, image is coming after message.
.row{
display: flex;
align-items: center;
}
img{
width: 35px;
}
.reciever{
justify-content: flex-start;
}
.sender{
justify-content: flex-end;
}
.sent, .recieve{
align-items: center;
display: flex;
max-width: 50%;
}
.sent{
flex-direction: row-reverse;
}
form{
padding: 1em;
text-align: center;
}
input{
width: 85%;
height: 20px;
}
button{
height: 25px;
}
<div class="container">
<div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 1</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 1</span>
</div>
</div>
<div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 2</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 2</span>
</div>
</div><div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 3</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 3</span>
</div>
</div>
<form action="">
<input type="text" >
<button>Submit</button>
</form>
</div>
Here is the working Demo
I have 4 divs and 4 images and each of them has an ID. I need to show another div when you hover the first div's image.
I wrote this code but only the first image with ID="insta2" and div ID="iinsta2" worked.
<style type="text/css">
#insta1{display:none}
#insta2{display:none}
#insta3{display:none}
#insta4{display:none}
#iinsta1:hover + #insta1 {
display: block;
}
#iinsta2:hover + #insta2 {
display: block;
}
#iinsta3:hover + #insta3 {
display: block;
}
#iinsta4:hover + #insta4 {
display: block;
}
</style>
And body:
<tr>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta1"><p> Hover 1 </p></div>
<img id="iinsta2" src="url" style="width:100% ; height:auto">
<div id="insta2"> <p> Hover </p></div>
</td>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta1" src="url" style="width:100% ; height:auto">
</td>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta3"><p> Hover 3 </p></div>
<img id="iinsta3" src="url" style="width:100% ; height:auto">
<div id="insta4"> <p> Hover 4 </p> </div>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta4" src="url" style="width:100% ; height:auto">
</td>
</tr>
Use this way:
#insta1,
#insta2,
#insta3,
#insta4 {
display: none;
}
#iinsta1:hover + #insta1,
#iinsta2:hover + #insta2,
#iinsta3:hover + #insta3,
#iinsta4:hover + #insta4 {
display: block;
}
<table>
<tr>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta1">
<p>Hover 1</p>
</div>
<img id="iinsta2" src="url" style="width:100% ; height:auto">
<div id="insta2">
<p>Hover</p>
</div>
</td>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta1" src="url" style="width:100% ; height:auto">
</td>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<img id="iinsta3" src="url" style="width:100% ; height:auto">
<div id="insta3">
<p>Hover 3</p>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta4" src="url" style="width:100% ; height:auto">
<div id="insta4">
<p>Hover 4</p>
</div>
</td>
</tr>
</table>
The + object can be used only with siblings that are next. Also, I have reduced your CSS. Please use absolute positions for positioning the :hovers. And, if you wanna maintain the HTML layout, you need to use JavaScript for this.
img ~ p {
visibility: hidden;
}
img:hover ~ p {
visibility: visible;
}
<table border=1>
<tr>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
</tr>
</table>
The example here seems complicated so I boiled it down to what I understood the question to be. I hope this helps. Feed back is welcome.
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>