I know there are probably multiple ways of accomplishing what I'm about to inquire, but I don't have full understanding of excel's functional capacity so I'm working with what I know.
Here's how the set up looks in my excel workbook.
|---|---------------------|--------------------|---------------------|
| | A | B | C |
|---|---------------------|--------------------|---------------------|
| 1 |image_north.001.jpg |image_north.002.jpg | x |
|---|---------------------|--------------------|---------------------|
| 2 |image_south.002.jpg image_south.002.jpg | y |
|---|---------------------|--------------------|---------------------|
And Cell C1 (x) contains all of this below....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<TABLE>
<TBODY>
<TR>
<TD><IMG style="HEIGHT: 200px; WIDTH: auto"
src="https://example.web.link/image/property/" width=486 height=647>
</TD>
<TD><IMG style="HEIGHT: 200px; WIDTH: auto"
src="https://example.web.link/image/property/" width=486 height=647>
</TD>
</TR>
</TBODY>
</TABLE>
What formula do I have to write to get this output on C1 itself or D1?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<TABLE>
<TBODY>
<TR>
<TD><IMG style="HEIGHT: 200px; WIDTH: auto"
src="https://example.web.link/image/property/**image_north.001.jpg**"
width=486 height=647>
</TD>
<TD><IMG style="HEIGHT: 200px; WIDTH: auto"
src="https://example.web.link/image/property/**image_north.002.jpg**"
width=486 height=647>
</TD>
</TR>
</TBODY>
</TABLE>
**Y would just be a matter of dragging the formula down.
I guess what I'm not able to figure out is how to INSERT string into string. I tried making the template into a formula by placing "=" before it, but I kept getting an error.
May I get some help with this please?
Thank you!
Replace the C1 template with this text:
Notice the placeholders after "property/" -> "< image 1>" and "< image 2>"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<TABLE>
<TBODY>
<TR>
<TD><IMG style="HEIGHT: 200px; WIDTH: auto"
src="https://example.web.link/image/property/<image 1>" width=486 height=647>
</TD>
<TD><IMG style="HEIGHT: 200px; WIDTH: auto"
src="https://example.web.link/image/property/<image 2>" width=486 height=647>
</TD>
</TR>
</TBODY>
</TABLE>
In D1 enter this formula:
=SUBSTITUTE(SUBSTITUTE(C1;"<image 1>";A1);"<image 2>";B1)
This would be the set up
Related
I have no practice as a bootstrap user.
I have a table. when i set dark mode in browser then the color of text is wrong (black on black background).
What am I doing wrong?
(fg-color is only bad in table when class="table" added)
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/nav_sidebar.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/dashboard.css">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
</head>
<body>
<table class="table table-responsive table-bordered">
<thead>
<tr>
<th class="text-center" scope="col">Name</th>
<th class="text-center" scope="col">Price</th>
<th class="text-center" scope="col">Qnt</th>
</tr>
</thead>
<tbody>
<tr>
<td>product 1</td>
<td class="text-end">12,48</td>
<td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
</tr>
<tr>
<td>product 2</td>
<td class="text-end">12,48</td>
<td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
</tr>
<tr>
<td>product 3</td>
<td class="text-end">12,48</td>
<td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
</tr>
</tbody>
</table>
</body>
</html>
I tried using a div container and some classes but it doesn't change anything.
For styling depending on browser based color mode/theme, you can use the prefers-color-scheme media query as it is used to detect whether the user has requested a light or dark theme based on operating system setting or user agent (browser in this case) settings.
You can set the color for the table using this query:
#media (prefers-color-scheme: dark) {
your-selector {
color: white;
}
}
Reference - MDN
I need to use the same code for my mobile site as my desktop site (below). How can I enlarge my mobile site's text size so it looks the same as my desktop site?
This is my header info and title:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Title</title>
This is my Cascading Style Sheet data:
<style type="text/css">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
img {
height: auto;
max-width: 100%;
object-fit: contain;
}
table {table-layout: fixed; width: 100%;}
td {word-wrap: break-word;}
-->
</style>
</head>
This is my cream background colour:
<body style="background-color: rgb(255, 239, 227);">
This is the content of my site, where I would insert text between the <p> and </p> tags:
<div style="text-align: center;">
<table width="80%">
<tbody>
<tr>
<td>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</body>
</html>
Insert the following code before the </head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This makes the text size appear the same size as your desktop site.
I'm having the same issue Cosmin Popovici pointed out in this thread https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios where Gmail on iOs, particularly the iPhone 6, is pushing content to the right and cutting it a bit like so:
I have tried the suggested fixes of adding CSS code that targets the div gmail generates for the body, adding a class to the main wrapper table like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#media only screen and (max-width: 599px) {
u ~ div .wrapper {min-width: 100vw;}
}
</style>
</head>
<body style="box-sizing:border-box;margin:0;padding:0;width:100%;">
<table class="wrapper" bgcolor="#EEEEEE" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
But this didn't work for me at all. Has anyone tried something else that has worked?
Here is some of my code:
<style>
#media screen and (max-width: 480px) {
u~div {
min-width: 100vw;
}
}
</style>
<body>
<table class="wrapper" width="98%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<table class="mobile-shell" width="750" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="750" style="font-family: Arial, Helvetica, sans-serif !important; font-size: 0pt; font-weight: normal; line-height: 0pt; margin: 0; min-width: 750px; padding: 0; width: 750px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
/** Content goes here **/
</td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I've had this issue too and got my hopes up with the u ~ div .wrapper {min-width: 100vw;} hack, but I've never gotten it to fix both Gmail iOS and Android at the same time.
I've settled on the following code to remove the right gutter in Gmail iOS app. It's a little verbose, but should make the email go edge to edge in Gmail.
<style>
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
.mobile-shell {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.mobile-shell {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
#media only screen and (min-device-width: 414px) {
.mobile-shell {
min-width: 414px !important;
}
}
</style>
Create one of these media queries for each additional viewport size you'd like to fix.
I am trying to extract html code from a div:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="tbParams">
<table class="ParametrList" style="border-collapse: collapse; width: 100%;">
<tr class="Parametr altrow">
<td class="Nazev">
Hello </td>
<td class="Hodnota" style="vertical-align: top;">
</td>
</tr>
</table>
</div>
</body>
</html>
...with xidel:
xidel input.html -e '//div[#id="tbParams"]' --output-format html
For some reason it keeps adding XMLNS attributes to the output:
<div xmlns="http://www.w3.org/1999/xhtml" id="tbParams">
<table class="ParametrList" style="border-collapse: collapse; width: 100%;">
<tbody xmlns=""><tr xmlns="http://www.w3.org/1999/xhtml" class="Parametr altrow">
<td class="Nazev">
Hello </td>
<td class="Hodnota" style="vertical-align: top;">
</td>
</tr>
</tbody></table>
</div>
If I remove xmlns="http://www.w3.org/1999/xhtml" from the <html> tag, then it is OK.
How can I automate the task of populating values in handsontable using Watir?
I have list of values in excel. Watir reads these values and then populates handsontable in their respective column. The challenge is none of the fields in handsontable has an identification property, which makes the job more difficult.
Pls find HTML Code as requested:
<html>
<head>
<body>
<form action="importer.php" method="POST">
<div class="selections">
<div id="buildingSelector" style="display: none;">
<script src="js/importer/buildingselect.js">
<script type="text/javascript">
<div id="importdata" class="handsontable">
<div class="wtHolder" style="position: relative; display: table;">
<div class="wtHider" style="position: relative; overflow: hidden; width: 1904px;">
<div class="wtSpreader">
<table class="htCore" style="display: table;">
<colgroup>
<thead>
<tr>
<thead>
<tbody>
<tr>
<td class=""></td>
<td class=""></td>
<td class=""></td>
</tr>