Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
The code I wish to learn how to code with HTML <Math> is in the table below
They want more details:
Coding parenthesis around fractions
Coding fractions
Coding radical signs (third root in the example)
Coding exponential notation (I used x<sup>y</sup>)
…
<!DOCTYPE html>
<html>
<head>
<style>
.M {
vertical-align: middle
}
OLi {
text-decoration: overline;
display: inline
}
/* used for top of radical sign */
BF {
font-size: 180%
}
/* for large parentheses around fractions */
.TF {
border-bottom: 2px solid black
}
/* to put fraction line below numerator */
.C {
text-align: center
}
</style>
</head>
<body>
<table style="font-size: 14pt; font-family; New Times Roman">
<colgroup>
<col span='2' style='min-width:4in'>
</colgroup>
<tr>
<td class='M'>
<table class='MATH'>
<tr>
<td rowspan='2'>log<sub>b</sub>
<BF>(</BF>
</td>
<td class='TF C'>√<sup>3</sup>
<OLi><i>x</i></OLi><i>y</i><sup>4</sup>
</td>
<td rowspan='2'>
<BF>)</BF> = log<sub>b</sub> √<sup>3</sup>
<OLi><i>x</i></OLi> + log<sub>b</sub> <i>y</i><sup>4</sup> -
log<sub>b</sub> <i>z</i><sup>5</sup>
</td>
</tr>
<tr>
<td class='C'><i>z</i><sup>5</sup></td>
</tr>
</table>
</td>
<td class='M' style="position:relative; top:8px">
<table>
<tr>
<td rowspan='2'>since log<sub>b</sub></td>
<td class='TF C'><i>mn</i></td>
<td rowspan='2'> = log<sub>b</sub> <i>m</i> +
log<sub>b</sub> <i>n</i></sup> - log<sub>b</sub> <i>p</i></td>
</tr>
<tr>
<td class='C'>
<i>p</i></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</body>
</html>
Well, I haven't done much of maths in html. But, I can suggest you to use a javascript library, you can try https://www.mathjax.org/ . Its pretty cool from the docs. You should be able to use reading docs.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
Here is how it should look
Here how it looks
`
https://codepen.io/SevastianBah/pen/VwBaPVB
`
I suppose that it is related some how to the big red block. In code inspector, there is no any margins or paddings for block.
I have gone through your code pen. You tried to demonstrate the table using nested table inside the tag. However it can may be fulfill your target. But using colspan and rowspan property you can easily demonstrate the table.
Here I have demonstrated it using colspan rowspan. Well the concept is pretty easier. Look carefully at your targeted table. There you can easily equally divided each cells in total 4 rows and 3 columns. Where the 1st cell taken two column and two row. So we declared colspan value 2 and rowspan value 2. These will allow the cell to take two rows and two column. then the rest td will represent other cells. So as 1st td taken 2 columns and two rows so in 1st and second rows total td will be 3 and 2. but in third row each td will take one cell.
In css the border collapse will remove the spaces in between. Then you can add border to each td. Go through the code below. Hope this might help you.
table{
width: 600px;
height: 400px;
border-collapse: collapse;
}
td{
border: 2px solid black
}
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table>
<tr>
<td style='background-color: red' colspan='2' rowspan='2'></td>
<td style='background-color: blue'></td>
<td style='background-color: red'></td>
</tr>
<tr>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
</tr>
<tr>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
</tr>
</table>
</body>
</html>
Float td left:
td{
margin: 0;
padding: 0;
float: left;
}
.big{
width: 240px;
height: 240px;
}
.small{
width: 120px;
height: 120px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
div{
border: 2px black solid;
}
td{
margin: 0;
padding: 0;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="/css/style.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table>
<tr>
<td><div class="big red"></div></td>
<td>
<table>
<tr>
<td><div class="small blue"></div></td>
<td><div class="small red"></div></td>
</tr>
<tr>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
</tr>
</table>
</body>
</html>
Is there a simple way to remove or make invisible two characters from the beginning of a string using just html and css? You can keep for yourself the downvotes to the questions... I know it's a hack.
I'm using mailchimp to send abandoned cart reminder mails. The price of a product is displayed as
zl123
but I need to display it as
123 zl
I tried to change the settings of the money format, but I haven't found a solution, so I'll try to hack it in some other way. Mailchimp replaces automatically a placeholder so I have to process what they put instead of the price placeholder, I have no control on that.
I have an html mail template and I can use css with it but no javascript. If you know how to solve the format problem in the mailchimp settings directly it will also work of course. Any help is very appreciated.
This is the product list code and the tag is *|PRODUCT:PRICE|*:
*|ABANDONED_CART:[$total=3]|*
<table>
<tbody>
<tr>
<td rowspan="3" style="vertical-align:top" valign="top" width="80"><img src="*|PRODUCT:IMAGE_URL|*" /> </td>
<td style="padding: 10px 30px"><a class="ab-cart__name" href="*|CART:URL|*" target="_blank">*|PRODUCT:TITLE|*:</a></td>
</tr>
<tr>
<td style="padding: 10px 30px"><a class="ab-cart__price" href="*|CART:URL|*" target="_blank">*|PRODUCT:PRICE|*</a></td>
</tr>
<tr>
<td style="padding: 10px 30px">
<table cellpadding="0" cellspacing="0" style="background:#bed22c;">
<tbody>
<tr>
<td align="center" style="padding:9px 20px; padding-right:5px" valign="middle"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank"><img class="ab-cart__icon" data-file-id="1415814" height="13" src="https://gallery.mailchimp.com/6b8c9d4b13e018d718abc0a65/images/2226adf6-5cc3-4f24-aa98-39825c247c2c.png" width="14" /> </a></td>
<td style="padding:9px 0; padding-right:10px"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank">Zobacz w koszyku </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
*|END:ABANDONED_CART|*
A hacky way will be fixing and repeating the word twice!
p {
font-size: 20px;
}
.hide-first-two {
text-indent: -0.75em;
overflow: hidden;
display: inline-block;
}
.show-first-two {
width: 0.75em;
overflow: hidden;
display: inline-block;
}
<p>
<span class="hide-first-two">zl123</span>
<span class="show-first-two">zl123</span>
</p>
Or using inline style:
<p style="font-size: 20px;">
<span style="text-indent: -0.75em; overflow: hidden; display: inline-block;">zl123</span>
<span style="width: 0.75em; overflow: hidden; display: inline-block;">zl123</span>
</p>
Considering your text lz123 comming form server and appened in
<p>lz123</p>
You can add text in this <p> by using ::after and ::before css selectors
But if is not possible to remove or manipulate that text in <p> using css
For string manipulation i suggest to use Javascript or Jquery
I am not a programmer but try to do my best with my own website. I have an online apparel store and I want to display on the item description just the values available for the item, now I have a table with some rows that I want to hide and compress the table if there is not a value for it. for example...
<tr>
<td style="width:30%"><b>· Hip:</b> {{HIP}}</td>
</tr>
<tr>
<td style="width:30%"><b>· Inseam:</b> {{INSEAM}}</td>
</tr>
<tr>
<td style="width:30%"><b>· Rise:</b> {{RISE}}</td>
</tr>
it should display...
· Hip: {{HIP}}
· Inseam: {{INSEAM}}
· Rise: {{RISE}}
I want that if I didn't have the "inseam" value on my inventory file this row will hide and just display...
· Hip: {{HIP}}
· Rise: {{RISE}}
I can not use javascript as eBay don't allow it. Sorry if I do not express myself in the right programming language. Hope someone can help me. Thanks to all!!!
https://css-tricks.com/almanac/selectors/e/empty/
With a little bit of refactoring your code and the :empty pseudoselector:
HTML:
<table>
<tr>
<td class="hip" style="width:30%">{{HIP}}</td>
</tr>
<tr>
<td class="inseam" style="width:30%"></td>
</tr>
<tr>
<td class="rise" style="width:30%">{{RISE}}</td>
</tr>
</table>
CSS:
.hip:before {
content: '· Hip: ';
font-weight: bold;
}
.inseam:before {
content: '· Inseam: ';
font-weight: bold;
}
.rise:before {
content: '· Rise: ';
font-weight: bold;
}
.inseam:empty {
display: none;
}
fiddle: http://jsfiddle.net/3fL1y0mg/2/
try adding {{INSEAM}} into that table row
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have three pictures a picture of a dog, a bear and a cat. My goal is to turn them into a traffic light sequence going from bear, to cat, to dog.using a button and an array, The button is the part I'm confused by as I want all the pictures to be in a vertical line with a "change animal" button at the top. I'm quite new to Html so I'm not great at it.
<table border="0" style="width:100%">
<tr>
<td>
<img src="http://i0.wp.com/cdn.bgr.com/2015/10/bear.jpg?w=625">
</td>
</tr>
<tr>
<td>
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg">
</td>
</tr>
<tr>
<td>
<img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_220/cw_1255/ch_1255/APL/uploads/2014/11/dog-breed-selector-australian-shepherd.jpg">
</td>
</tr>
</table>
Here is a traffic light with animals.
var btn = document.querySelector("button");
var td = document.querySelectorAll("td");
var arr = ['#F00','#FF0','#0F0'];
var item = 0;
td[item + 1].style.backgroundColor = arr[item];
btn.addEventListener("click", function(e) {
td[item + 1].style.backgroundColor = 'transparent';
item = (item > 1) ? 0 : item + 1 ;
td[item + 1].style.backgroundColor = arr[item];
});
table {
width: 150px;
}
table img {
width: 100%;
height: auto;
}
table td {
border: 1px solid #000;
text-align: center;
padding: 10px;
}
<table>
<tr>
<td>
<button>CHANGE ANIMAL</button>
</td>
</tr>
<tr>
<td>
<img src="http://i0.wp.com/cdn.bgr.com/2015/10/bear.jpg?w=625">
</td>
</tr>
<tr>
<td>
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg">
</td>
</tr>
<tr>
<td>
<img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_220/cw_1255/ch_1255/APL/uploads/2014/11/dog-breed-selector-australian-shepherd.jpg">
</td>
</tr>
</table>
I am just starting with PHP and having trouble of getting my page result to print right. I call the page below from index.php. It looks ok if I displayed the page on a monitor but when I print the page and it is more than one page, the section at the end of the page got cut off and continue on the second page. I am looking for a way so that when I print the page, it will look if the section (each item number) will fit the whole section (repair desc, common cause, etc) in that page. If it does not then just print on the next page.
I also included the CSS file. Basically what it does is forcing the width of page to fit a letter-size paper. Thank you in advance.
<?php include_once $_SERVER['DOCUMENT_ROOT'] .
'/fms/includes/helpers.inc.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print Repair Form</title>
<link rel='stylesheet' type='text/css' href='/fms/css/letter-size.css' />
</head>
<body>
<div id="page-wrap">
<table>
<tr>
<td rowspan = "3" id="logo"><img src="/fms/images/flex_no_address_256.jpg" /></td>
<td rowspan = "3" id="address">Address<br />
City, State Zipcode <br />
Phone number <br />
website address
</td>
<td>
<table>
<tr>
<td id="repairinfo" class="theading" colspan = "2">Repair Detail</td>
</tr>
<tr>
<td><?php htmlout($custno); ?></td>
<td width="100px">WO: <?php htmlout($wonum); ?></td>
</tr>
<tr>
<td><?php htmlout($custname); ?></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<?php foreach($items as $item): ?>
<table border ="1">
<tr>
<td class="theading">Type of Repair</td>
<td class="theading">Repair ID</td>
<td class="theading">Fault Picture</td>
</tr>
<tr>
<td class="tablepadding"><?php htmlout($item['repairtype']); ?></td>
<td class="tablepadding"><?php htmlout($item['itemno']); ?></td>
<td rowspan="7" align="center">
<img src="/fms/images/wo_items/<?php htmlout($item['filename']); ?>" width="256" />
</td>
</tr>
<tr>
<td class="theading" colspan="2">Repair Description</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['repairdesc']); ?>
</td>
</tr>
<tr>
<td class="theading" colspan="2">Common Causes</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['commoncause']); ?>
</td>
</tr>
<tr>
<td class="theading" colspan="2">Preventive Measures and Maintenance</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['maintenance']); ?>
</td>
</tr>
</table>
<br />
<?php endforeach; ?>
</div>
</body>
</html>
CSS:
* { margin: 0; padding: 0;}
body {
font: 12px/1.4 Georgia, serif;
}
a img {
border: none;
}
#page-wrap {
width: 800px;
margin: 0 auto;
}
table {
width:100%;
}
#logo {
width: 256px;
}
#address {
width: 170px;
}
#repairinfo {
border-bottom: solid 1px;
text-align: center;
}
.theading {
font-weight: bold;
padding: 3px;
}
table tr td.tablepadding {
padding: 3px;
}
It should be achieved through CSS and no PHP, although you can use php as well as a workaround, google for css media.
There are some tricks for the CSS of your printing: http://slodive.com/web-development/css-print-page-tricks/
Can't give you specific details because I haven't worked too much with printings but it all comes to testing the total height that fits on the paper, and looking for a measure in php (maybe lines?) so if the size is bigger than the one you set, it creates another Table.
You could also use Javascript as you can detect element's (for example a table's) height, and call some function when the max height is reached.
Also I want to suggest you not using tables if it's not totally necesary, It's a very old-school approach and troublesome to modify, with more different behaviour across browsers, and with a lot more of unnecesary code.
Your issue is not with PHP but with CSS.
You need to include a print specific stylesheet as this will be different to your computer monitor styles.
Here's a good blog post about print CSS
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
In your html the print stylesheet <link> element will need a media="print" attribute
Then in your print stylesheet you can specify a width