Okay, let me introduce the problem:
I'm trying to style prices to be displayed similar to this example: $XXxx. I'm trying to use inline styles only to make it usable in HTML emails.
This is what I try to achieve:
Option 2 is what I really want, but if it isn't possible I'll go with Option 1
I've accomplished it with this code, but now is there a way to make the code "better"?
<div style="width:69px; font-family:'Arial Black', Gadget, sans-serif; font-size:34px; text-align:left; float:left;">
$99
</div>
<div style="padding:8px;">.99<br />
<font style="line-height:70%;">cwt</font></div>
I am assuming you are wanting an HTML example of this. You can use superscript in addition to a smaller font size for the "change" portion of the cost. for example:
$XX<span style="vertical-align:super;font-size:xx-small">.XX</span>
This is a quick way to get results similar to your Option 1 example
Related
I am building a WordPress website focused on sports and I am using a sports API to get the latest 10-15 highlights videos from different leagues (basketball, soccer, etc). I have been able to get that information, the problem comes that data is displayed vertically, while I would like it to be shown horizontally with a slider/carousel if possible.
I have been looking at Elementor (it's the builder page I am using for WordPress) and several tutorials but I haven't been able to find anything helpful.
I have the following code:
<center>
[jsoncontentimporter url=API I AM USING]
{subloop:results:-1}
{subloop-array:results:-1}
<img src="{results.strThumb}" style="width:275px;height:125px;">
<br>
<strong style="font-size: 10px;">{results.strHomeTeam}</strong>
<strong style="font-size: 10px;">{results.intHomeScore}</strong>
-
<strong style="font-size: 10px;">{results.intAwayScore}</strong>
<strong style="font-size: 10px;">{results.strAwayTeam}</strong>
<strong style="color:#C3414D;font-size: 14px;">{results.dateEventLocal}</strong>
<br>
{/subloop-array:results}
{/subloop:results}
[/jsoncontentimporter]
</center>
I am using the free version of Elementor but I wouldn't mind too pay for the PRO version if necessary, though I believe there is not any block I could use there, and also would like to know if it's possible to do it with HTML since I would like to get deeper knowledge at it.
Does anyone have any idea or any guide I could check to be able to do this with HTML ?
Here's an example of what you could do using mostly CSS
https://codepen.io/panchroma/pen/jOGGPKq
I think what you want to try and do is see if you can add extra HTML around your JSON code. For example, see if you can make some of the text italic with something like
<emphasis>{subloop-array:results:-1}</emphasis>
If you're able to do this, then the next step would be to add additional divs that wrap all of the results, each individual result, and then details within each result. As shown in this screenshot
If you can get to this point then I think you have the problem solved.
You now have some classes that you can target with CSS styling, a basic CSS example would be:
.results-wrap {
display: flex;
overflow-y: scroll;
}
.result {
padding: 5px;
min-width: 200px;
}
.details {
background-color: #fff;
}
https://codepen.io/panchroma/pen/jOGGPKq
I have an HTA file, I put some buttons and a comboBox
When I added some text to say what to select, it was too big.
I tried to change the size in CSS
<body style="font-size: 10px;">
It didn't work.
Also tried
<body size="10">
Nothing worked, so I decided to ask here for help
I got results using span
<span style="font-size: 10px;"> Select office </span>
But I want a much elegant situation and easy to use.
Use points instead.
html, body{
font-size:10pt;
}
Add an external style or an internal style like,
html, body {
font-size: 10px;
}
It applies the style throughout the body.
Try to put your css in a separate file, it makes the code mach more understandable and prevents you from writing code twice.
Check for a without closure
If this doesn't work try sending us sum more code
I have the following code which I'm trying to test on how to use pre format on my site. After including the pre , the font changes and the lines does not break to fit on the 200px division . I want to maintain the default font size, style and family.
NB: I don't want to use overflow method .
I would like to have an output like this
"Sometimes it is very hard to code but by
circumstance you find yourself struggling
to fit in the game .
Awesome feelings come and disappear.
Niggas say this game is for the patient hearts.
You nigga is this true??
Nigga love style
keep in touch with us at any given time"
plus the default text font
<html>
<head>
<title>Test</title>
<style>
{
pre{
font-family: monospace;
text-wrap: unrestricted;
}
}
</style>
</head>
<body>
<div style='width:200px;'>
<pre>Sometimes it is very hard to code but by circumstance you find yourself struggling to fit in the game .Awesome feelings come and disappear.Niggas say this game is for the patient hesrts .. You nigga is this true??
Nigga love style
keep in touch with us at any given time</pre>
</body>
</html>
please help me solve this problem
Would this solution fit your need? <div style="white-space: pre-wrap;">content</div>
I've seen that here link
Remove the <pre> element and just add the style to the CSS as follows:
<div style='width:200px; white-space: pre-wrap;'>
Your text here
</div>
I am designing an HTML email for a company. I'm having a problem with the footer at the bottom. Currently, it looks like this:
I love it!
When it's resized a lot, it looks like this:
Wonderful! I DO want the footer to break onto 3 lines.
However, when I resize the window halfway, it looks like this:
What CSS code can I use to make the footer to either break ALL lines, or none? It needs to ALWAYS look like either this:
or this:
But NEVER this:
and NEVER this:
I tried numerous combinations of white-space: nowrap; to no avail. When ANY lines break, they need to ALL break at the same time. Maybe this could be accomplished with a <table>?
Thank you for your help. The CSS needs to be inline and without media queries. JavaScript support for HTML email is very limited and non-reliable, therefore, I wish to do without it.
A JSFIDDLE for editing can be found here.
The layout which you are trying is possible using media queries or javascript. but most of the email templates doesn't support both solutions.
So, as I see, you have two options:
it will be better if you always keep the footer items independent to each row i.e add br tags between the nav tags.
or
Create different email templates based on the resolution.
Personal suggestion: I would have gone with the first option.
<nav style="display:inline; white-space:nowrap;">
<a moz-do-not-send="true" style="text-decoration:none; word-break:break-all; color:white;" href="tel:1234567890">
(123) 456-7890
</a>
</nav>
Use
word-break:break-all;
Jsfiddle
http://jsfiddle.net/f1uuwexy/8/
You can do this using only html:
<div>
www.hazardmoving.com<br />
Patrickhazard#yahoo.com<br />
(123) 456 7890<br /></div>
You seem to try pushing css beyond its limits
If you feel comfortable including bootstrap you can try:
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div style="width: 600px; margin: 60px auto; text-align: center;">
<div class="col-md-4">www.hazardmoving.com</div>
<div class="col-md-4">Patrickhazard#yahoo.com</div>
<div class="col-md-4">(123) 456 7890</div>
</div>
That should do the work. Check my pen:
http://codepen.io/anon/pen/EajwXp
I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp