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.
Related
I want to make two div content center "16) test". here please don't remove table. So. Please let me know. How i can do in my case using css ?
Result like . No need line but content center
<div style="width:946px;">
<div style="display: inline-block;">
<div style="float: left; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="float: left; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:15.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="width:946px;">
<div style="display: table;">
<div style="display:table-cell; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="display:table-cell; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;position:relative;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="position:absolute;">
<tbody>
<tr>
<td>
<span style="font-size:15.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Vertical alignment of text can be achieved easily by tables. Just make your floating divs displayed as table cell as in the code snippet below.
This code has a lot of inline styles and unused HTML. If needed you can use the code at the bottom to achieve the same result in very less code.
<div style="width:946px;">
<div style="display: table;">
<div style="display:table-cell; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="display:table-cell; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--Simpler approach with inline styles-->
<table>
<tr>
<td style="font-size:11pt; padding: 0 15px 0 30px;"><b>16)</b></td>
<td style="font-size:30.0pt; text-align: left; width: 765px;">Test</td>
</tr>
</table>
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 this definition:
<g:HTMLPanel ui:field="container" styleName="{style.itemcontainer}">
<table style="width:100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td width="25px" valign="bottom">
<b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span>
</td>
<td width="60px">
<span ui:field="valueLabel" class="{style.valueLabel}">0%</span>
</td>
<td width="24px" class="{style.selectedIcon}">
<b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon>
</td>
</tr>
</table>
</g:HTMLPanel>
I would like to convet the html table in 3 div´s.
Could you help me?
Check out float and box model. You could make this simpler with css.
<div style="float:left">
<b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span>
</div>
<div style="float:left">
<span ui:field="valueLabel" class="{style.valueLabel}">0%</span>
</div>
<div style="float:left">
<b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon>
</div>
<br style="clear:left" />