even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)
Related
Trying to put two tables next to one another. One col-md-4 and the other col-md-8 I want the 4 to be on the left and the 8 to be on the right. Left table being game messages and buttons while the right table is the tic tac toe board. My understanding is when using bootstrap I just need columns to add up to a total of 12.
</head>
<body class="bodyNormal">
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">ЁЯФД New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg"</td>
<td class="vert grid">8<img src="O.jpg"</td>
<td class="grid">9<img src="X.jpg"</td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg"</td>
<td class="vert hori grid">5<img src="X.jpg"</td>
<td class="hori grid">6<img src="O.jpg"</td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg"</td>
<td class="vert grid">2<img src="O.jpg"</td>
<td class="grid">3<img src="X.jpg"</td>
</tr>
</table>
</div>
</div>
</div>
<br />
<script src="index.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
You forgot one div close for col-md-4
</table></div> /*Close Here One div*/
<div class="col-md-8">
https://jsfiddle.net/lalji1051/y0k4bs6p/3/
Problem is you forgot to close div for col-md-4.
Updated code
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">ЁЯФД New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
</div>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg" </td>
<td class="vert grid">8<img src="O.jpg" </td>
<td class="grid">9<img src="X.jpg" </td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg" </td>
<td class="vert hori grid">5<img src="X.jpg" </td>
<td class="hori grid">6<img src="O.jpg" </td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg" </td>
<td class="vert grid">2<img src="O.jpg" </td>
<td class="grid">3<img src="X.jpg" </td>
</tr>
</table>
</div>
</div>
</div>
currently i have table like these
<div class="col-md-4 col-sm-4 col-xs-6">
<table class="table">
<tr>
<td><span class="test2">S1</span></td>
<td class="pic" rowspan="2"><img src="images/image.jpg" alt=""> </td>
</tr>
<tr>
<th>
<span class="rub">hahahaha</span><br>
hahaha<br>
<span class="rub">ferix tom</span>
</th>
</tr>
<tr>
<td class="prof">
<script>
<!--
var birthday = "1980/11/03";
document.write(birthday converter(birthday));
//-->
</script>
</td>
</tr>
<tr>
<td class="prof">90</td>
</tr>
</table>
</div>
which produce table like this picture
how to produce ribbon on the S1 span
i tried using http://www.css3d.net/ribbon-generator/#preview
but it's not covering the table
what my boss wants, look like this
please help css master
found the answer, using these
<tr>
<td><span class="rub2"><br></span></td>
<p class="ribbon">this is ribbon</p>
<td class="pic" rowspan="4"><img src="images/image.jpg" alt=""> </td>
</tr>
https://jsfiddle.net/4xwzuqpn/3/
I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> рдЖрдкрдиреЗ рдЕрдкрдиреЗ рдмрдЪреНрдЪреЗ рдХреА рдлреАрд╕ рдкреЗрдореЗрдВрдЯ рдореЗрдВ рдмрд╣реБрдд рджреЗрд░ рдХрд░ рджреА рд╣реИ. рдХреГрдкрдпрд╛ рдЬрд▓реНрджреА рд╕реЗ рдЬрд▓реНрджреА рднреБрдЧрддрд╛рди рдХрд░реЗрдВ.
</div>
</div>
</div>
Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO
I need to make the picture to have a width on 100%, which means that the picture should fill out the white space, and align vertical with the text there is below.
My Example Site
The code is for email newsletters, therefore I am using foundation. I cannot find how I am doing that in the documentation, therefore I have to try something else.
How can I make the picture fill out the whitespace?
Relevant HTML code
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: blue;">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: red;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: yellow;">
<table>
<tr>
<th>Here is all my text is gonna be. Here is all my text is gonna be.Here is all my text is gonna be.Here is all my text is gonna be.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: pink;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: green;">
<table>
<tr>
<th>Here is all my text is gonna be.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Well, you have to modify two things.
First of all:
Original code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
Final code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0;">
And second: Original code:
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
Final code:
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" style="width:100%;">
</center>
My best regards!
Sure!, try this:
Original code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0;">
Final code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0 !important;">
EDIT ** THIS WILL WORK **
Final version
Change the < img> to < div> with image background:
<th class="small-12 large-12 columns first last" style="padding: 0 !important;">
<table>
<tbody>
<tr>
<th>
<center>
<div style="background:blue url('http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg') no-repeat center; background-size:cover;" alt="image of clever meme that made me chuckle">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" style="display:hidden;">
</div>
</center>
</th>
</tr>
</tbody>
so after the text containing the emergency hotlines were aligned properly, I just cant seen to place the text under the image in order to present the data three in a row (I tried col-4 but json messed it up). My goal is image, then content of the numbers directly below it. I tried: text-align, float, display, media. any help would be appreciated thank you.
heres the current situation:
enter image description here
UPDATE: here is the JSfiddle of the question, placeholders are used to show the positioning. https://jsfiddle.net/ktbmLaq8/
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country"></h4>
<table class="table">
<tr class="remove-border">
<td ng-bind="service.hl1"></td>
<td class="text-left">
<div ng-bind="service.hl1num1"></div>
<div ng-bind="service.hl1num2"></div>
<div ng-bind="service.hl1num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl2"></td>
<td class="text-left">
<div ng-bind="service.hl2num1"></div>
<div ng-bind="service.hl2num2"></div>
<div ng-bind="service.hl2num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl3"></td>
<td class="text-left">
<div ng-bind="service.hl3num1"></div>
<div ng-bind="service.hl3num2"></div>
<div ng-bind="service.hl3num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl4"></td>
<td class="text-left">
<div ng-bind="service.hl4num1"></div>
<div ng-bind="service.hl4num2"></div>
<div ng-bind="service.hl4num3"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_cambodia.png">
<table class="services">
<tr>
<td class="country-title">Cambodia</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td></td>
<td>:023 723 555</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:023 366 841</td>
</tr>
<tr>
<td></td>
<td>:023 720 235</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:119</td>
</tr>
<tr>
<td></td>
<td>:023 724 891</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_indonesia.png">
<table class="services">
<tr>
<td class="country-title">Indonesia</td>
</tr>
<tr>
<td>Police</td>
<td>:110</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
<tr>
<td>Fire</td>
<td>:113</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:118</td>
</tr>
<tr>
<td>Medical Emergencies</td>
<td>:119</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_laos.png">
<table class="services">
<tr>
<td class="country-title">Laos</td>
</tr>
<tr>
<td>Fire</td>
<td>:190</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:195</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_malaysia.png">
<table class="services">
<tr>
<td class="country-title">Malaysia</td>
</tr>
<tr>
<td>Fire and Rescue</td>
<td>:994</td>
</tr>
<tr>
<td></td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance/Police  </td>
<td>:999</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_myanmar.png">
<table class="services">
<tr>
<td class="country-title">Myanmar</td>
</tr>
<tr>
<td>Fire</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:192</td>
</tr>
<tr>
<td>Police</td>
<td>:199</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_philippines.png">
<table class="services">
<tr>
<td class="country-title">Philippines</td>
</tr>
<tr>
<td>Disaster Risk    </td>
<td>:(02) 911-1406</td>
</tr>
<tr>
<td></td>
<td>:(02) 912-1406</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:911</td>
</tr>
<tr>
<td>Fire</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:(02) 729-5166</td>
</tr>
<tr>
<td></td>
<td>:(02) 410-6319</td>
</tr>
<tr>
<td>Red Cross</td>
<td>:(02) 527-0000</td>
</tr>
<tr>
<td></td>
<td>:(02) 527-8385</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_singapore.png">
<table class="services">
<tr>
<td class="country-title">Singapore</td>
</tr>
<tr>
<td>Fire and Ambulance  </td>
<td>:995</td>
</tr>
<tr>
<td>Police</td>
<td>:999</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_thailand.png">
<table class="services">
<tr>
<td class="country-title">Thailand</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td></td>
<td>:1195</td>
</tr>
<tr>
<td>Fire</td>
<td>:199</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:1554</td>
</tr>
<tr>
<td></td>
<td>:1669</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_vietnam.png">
<table class="services">
<tr>
<td class="country-title">Vietnam</td>
</tr>
<tr>
<td>Police</td>
<td>:113</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:115</td>
</tr>
</table>
</div> -->
The problem is that in your HTML structure, you are listing the information for all countries in a single collective table, while displaying the flags for each country outside of the table. It's not very easy to 'break up' this information that's all stored in the table.
The best way to solve this is to handle both the flag and service information for each country at the same time. In order to do this, first we convert all of your table elements to <div>s, add classes to each of the new divs, and slightly change their order:
<div class="country">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="country-info">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<div class="left" ng-bind="service.hl1">Service 1</div>
<div class="right" ng-bind="service.hl1num1">111</div>
<div class="left" ng-bind="service.hl2">Service 2</div>
<div class="right" ng-bind="service.hl1num2">222</div>
<div class="left" ng-bind="service.hl3">Service 2</div>
<div class="right" ng-bind="service.hl1num3">333</div>
</div>
</div>
Then you can target the respective contents much more easily :)
img.flagsize, .country-info {
max-width: 200px
}
.left {
float: left;
clear: left;
}
.right {
float: right;
clear: right;
}
You'll also need to specify that .country-info should be the same width as img.flagsize, or else the information will get pushed to the right of the page:
img.flagsize, .country-info {
max-width: 200px;
}
I've created a fiddle showcasing this here.
With this structure, you can change just about any aspect of the layout you'd like -- margins, padding, and heights no longer pose an issue ;)
Hope this helps! :)