<style>
span {
font-family: "Fixedsys", "Courier New", Courier, mono, serif;
font-size: 14px;
background-color: #E7E5DC;
}
span{word-spacing:-10px}/*FireFox*/
*html span{word-spacing:0}/*ie6fixed*/
*+html span{word-spacing:0}/*ie7fixed*/
</style>
<div>
<span>IE firefox space width</span>
</div>
<div>
<span>IE firefox space width</span>
</div>
I run code above in FF and IE, line with shows same width space in IE as line with space. but is another story in FF.
I want code above to show same width of space, and space, in FF, what should I do?
Try tell you browser about monospace with <code tag. Here is my worked sample:
<style>
span {
font-family: "Fixedsys", "Courier New", Courier, mono, serif;
font-size: 14px;
background-color: #E7E5DC;
}
</style>
<div>
<code>
<span>IE firefox space width</span>
</div>
<div>
<span>IE firefox space width</span>
</code>
</div>
Related
I'm creating an HTML newsletter. I'm using nested array. I have two question : how do I import font? Because #import and #font-face are not working on my newsletter (but works on simple html)
And the second is this :
How can I " vertical align middle " 2 span with different font-size ? It's working on simple html but not on the newsletter...
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10px;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:60px;v-text-anchor:middle;width:180px;" arcsize="17%" stroke="f" fillcolor="#00436f">
<w:anchorlock/>
<center>
<![endif]-->
<a href="#"
style="background-color:#00436f;font-weight:bold;border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;padding-top: 25px; padding-bottom: 25px;"> <span style="font-size:2em;font-weight:bold;vertical-align:middle">15</span>
<span style="font-size:1.2em;font-weight:bold;text-transform:uppercase;vertical-align:middle">Février</span>
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!--<p style="Margin: 0;font-size: 14px;line-height: 17px;width: 100%;padding: 25px 0;text-align: center;border-radius: 10px;background: #00436f;-->
<!-- color: white;">-->
<!--</p>-->
<p style="padding-top:10px;Margin: 0;line-height:1;font-size: 1em;font-weight:bold;color:#797979">Réunion d'information Loiret Numérique</p>
<p style="Margin: 0;font-size: 12px;line-height: 14px">
Mairie de Montargis - Salle Montdignan
</p>
</td>
</tr>
</tbody>
</table>
What I get:
What I need:
My fonts :
#media screen{
#import url("https://use.typekit.net/jqe0zpu.css");
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
#font-face {
font-family: 'Walsheim';
font-weight: normal;
font-style: normal;
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Regular.eot');
}
#font-face {
font-family: 'Walsheim';
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Bold.eot');
src: url('https://www.site.fr/.../GT-Walsheim-Bold.ttf') format('truetype'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff') format('woff'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff2') format('woff2'),
url('https://www.site.fr/.../GT-Walsheim-Bold.eot?#iefix') format('embedded-opentype');
font-weight: 800;
font-style: normal;
}
}
As I mentioned in my comment, Outlook does not work with all web-fonts like Google fonts. You don't include full paths to resources so there is no way for us to test what you are doing and look for a solution.
My first suggestion is to open your email in a web browser and test to see if it works at all. If it does, then I suggest testing what you are doing in an Apple or IOS email client, since they seem to work well with web fonts. If it works, you know you have things coded correctly.
Generally an HTML document wih a web font needs a link to that font and applied in a class for use in the document.
You should have a link like this:
<style>
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
</style>
Or this:
<link href="https://use.typekit.net/jqe0zpu.css" rel="stylesheet">
Next, you need to find some way to get the font out into the document.
<style>
.classname {
font-family: GT-Walsheim, Arial, sans-serif;
}
</style>
In the last example, I added Arial as a fallback font that is pretty web-safe because Walsheim is not going to work with Gmail and most likely not work with Outlook 2007, 2010, 2013-2019.
Finally, apply the classname:
<p class="classname">Hello</p>
You could go fancy and add in inline styles as well:
<p class="classname" style="font-family: GT-Walsheim, Arial, sans-serif;">Hello</p>
This is a very basic plan on how to work with web fonts in email.
Good luck.
Here is a simpler method of using div tags:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#fevrier {
background: #00436f;
border-radius: 10px;
font-weight: bold;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
text-align: center;
text-decoration: none;
width: 180px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle -webkit-text-size-adjust:none;
padding-top: 25px;
padding-bottom: 25px;
}
#fevrier .text {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
</style>
<div id="fevrier">
15 <span class="text">FÉVRIER </span>
</div>
I'm having a headache of a time trying to code an image, that's in the same directory as the html and css files. My marker image for bullet points works without a problem, but my background-image for the header doesn't seem to work. I ran it through a css validator and nothing shows up.
EDIT: What I want to accomplish now that I know my image is loading, is to figure out how to overlay my image on top of the h1 element.
HTML5:
<!DOCTYPE html>
<head>
<link style = "text/css" rel ="stylesheet" href = "pacific.css">
<title>Pacific Trails Resort</title>
<meta Charset="utf-8">
</head>
<body>
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
Home
Yurts
Activities
Reservations
</nav>
<main>
<h2>Enjoy Nature In Luxury</h2>
<img src = "coast.jpg" alt = "Pacific Trails Resort" height = "250" width = "320">
<p><span class = "resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast.
Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours opf the redwoods</li>
</ul>
<div>
<span class ="resort">Pacific Trails Resort</span>
<br>
12010 Pacific trails Road
<br>
Zephyr, CA 95555
<br>
<br>
888-555-5555
<br>
</div>
<br>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort
<br>
Contact Ian Rosenberg
</footer>
</body>
CSS:
body{background-color: #FFFFFF; color: #666666; font-family: Arial, Helvetica, sans-serif}
header{ background-image: url('sunset.jpg');
background-position: right;
background-repeat: no-repeat;
line-height: 400%;
text-indent: 1em;}
h1{background-color: #000033;
color: #FFFFFF}
nav{background-color: #90C7E3;
font-weight: bold}
nav a{text-decoration: none}
h1{margin-bottom: 0;
font-family: Georgia, Times New Roman, serif}
h2{color: #3399CC;
font-family: Georgia, Times New Roman, serif}
h3{font-family: Georgia, Times New Roman, serif}
ul{list-style-image: url("marker.gif")}
dt{color: #000033}
footer{font-size: 70%;
font-style: italic;
text-align: center;
font-family: Georgia, Times New Roman, serif}
.resort{color: #5C7FA3;
font-weight: bold}
#contact{font-size: 90%}
Your background is loading its just hidden. The problem you are seeing is that your H1 element is covering up the entire background because it's display is set to block (which is default for H1 elements.
I am not sure how you want it to display but you have lots of options. You could remove the background-color from the H1 css definition. Which would make the background appear. DEMO
Or you could change the display of the H1 element to inline-block or inline depending on your requirements. DEMO
Finally you could set a height of your header class that would still allow the background color of the H1 to show up. DEMO
Again these are a few possibilities still plenty of other ways you could change it. I dont know what your ultimate design goal is so you have to determine the next steps really. But that is the cause of why you cannot see your background.
NOTE: I changed the H1 class in your CSS for the first two. If you do go this route I suggest that you target that H1 more precisely because I dont think you would want the same style for the H1 header applied to other H1's in your page. I did it simply to illustrate how you could fix it.
Remove your h1 color style it's overriding the background image style.
Also your .nav color rule.
Use firebug or chromes inspect element to go through your styles and see which ones are overriding which. You can turn off and on various styles to see which works.
body {
background-color: #FFFFFF;
color: #666666;
font-family: Arial, Helvetica, sans-serif
}
header {
background-image: url(http://fandom.wikia.com/wp-content/uploads/2016/09/Arrowverse.jpg);
background-position: right;
background-repeat: no-repeat;
line-height: 400%;
text-indent: 1em;
}
h1 {
/* remove this
background-color: #000033; */
color: #FFFFFF
}
nav {
background-color: #90C7E3;
font-weight: bold
}
nav a {
text-decoration: none
}
h1 {
margin-bottom: 0;
font-family: Georgia, Times New Roman, serif
}
h2 {
color: #3399CC;
font-family: Georgia, Times New Roman, serif
}
h3 {
font-family: Georgia, Times New Roman, serif
}
ul {
list-style-image: url("sqpurple.gif")
}
dt {
color: #000033
}
footer {
font-size: 70%;
font-style: italic;
text-align: center;
font-family: Georgia, Times New Roman, serif
}
.resort {
color: #5C7FA3;
font-weight: bold
}
#contact {
font-size: 90%
}
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
Home
Yurts
Activities
Reservations
</nav>
<main>
<h2>Enjoy Nature In Luxury</h2>
<img src="coast.jpg" alt="Pacific Trails Resort" height="250" width="320">
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours opf the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span>
<br> 12010 Pacific trails Road
<br> Zephyr, CA 95555
<br>
<br> 888-555-5555
<br>
</div>
<br>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort
<br>
Contact Ian Rosenberg
</footer>
I figured out what I was doing wrong, the exercise I was following did not have a background color or color attribute on the h1 element. To display the image on top of the background I changed my header code to
header{background-color: #000033;
color: #FFFFFF;
background-position: right;
background-repeat: no-repeat;
line-height: 400%;
text-indent: 1em;
background-image: url('sunset.jpg');}
I have a well boostrap component containing some text
<div class="well well-sm" id="well_job">
<p>
<h5><%= "#{job.job_description}" %></h5>
</p>
<p>
<h6><%= "#{job.from_date} -" %></h6><h6><%= "#{job.to_date}" %></h6>
</p>
</div>
when I try to select it by one of its classes to change the font family it doesn't change(I tried to select it by .well-sm but nothing changes as well):
.well{
font-family: 'Rock Salt', cursive;
}
How can I select the well and change the font-size to its inside text?
First of all, your syntax is incorrect as you cannot place a header tag inside a paragraph tag. The following syntax
<p>
<h1>Some Header</h1>
</p>
will be interpreted by the browsers as
<p></p>
<h1>Some Header</h1>
</p>
and you will end up having an unexpected </p> end tag. Validating your html will lead to this error:
No p element in scope but a p end tag seen.
Back to your question, in case of using header tags you also need to specify a style targeting that specific header tag.
.well {
font-size: 14px;
}
.well h5 {
font-size: 24px;
}
Have you import the font into the tag <head>?
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
Then for change the font size:
.well{
font-family: 'Rock Salt', cursive;
}
.well p h5{
font-size:30px;
}
.well p h6{
font-size:20px;
}
I currently have this code:
<div class="box" style="margin-bottom: 10px; max-width: 100%;">
<div class="clearfix"style="padding: 10px 10px 0 10px; background: #f3f3f3; text-align: center;"> <span style="font-size: 1.17em; color: #000000;">LINGERIE</span><br/>
<p style="color: #000000;"> </p>
<span style="color: #000000;">♦Lingerie Sets ♦Hosiery ♦Plus Size </span><span style="font-size: 12px;"> </span></div>
</div>
Im unsure where to add my font? I would like to use Montserrat, which is the current font of my menu, ect. Thanks in advance
You can do this with CSS:
font-family: Montserrat;
for example:
<span style="color: #000000;font-family: Montserrat;">♦Lingerie Sets ...</span>
Source: http://www.w3schools.com/cssref/pr_font_font-family.asp
In this link you have a full explanation about how to use the Montserrat font:
1) Add this code to your website (add it into your <head> section of your html page):
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
2) Create a new file i.e. styles.css and add it also yo your <head> section (or reuse an old one). Then integrate your fonts into your CSS:
font-family: 'Montserrat', sans-serif;
Example:
h1 {
font-family: ‘Metrophobic’, Arial, serif;
font-weight: 400;
}
I have a link and icon (font) after it. Need prevent wrapping between link and icon: for long link line break should appear between words not between word and icon. I've created parent block with nowrap and inner block with wrapping, it works in FireFox but doesn't work in Chrome and IE (IE10 for example). For test purpose I also created the same layout with image (instead of icon) and have the same result - http://jsfiddle.net/6ak7q/2/ - when I change window size I see that on new line there is only image without any word.
Maybe related question - Link arrows dropping to new line, but I can't use background for font icon...
Original code with font-icon:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#font-face {
font-family: 'Glyphicons Regular';
src: url('../fonts/glyphicons-regular.eot');
src: url('../fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-regular.woff') format('woff'), url('../fonts/glyphicons-regular.ttf') format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
.glyphicons {
display: inline-block;
position: relative;
color: #1d1d1b;
text-decoration: none;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.glyphicons.nl-icons.unlock {
font: 12px 'Glyphicons Regular';
height: 12px;
padding: 0 5px;
width: 22px;
}
.glyphicons.unlock:before {
content: "\E205";
}
//added for old IE
.glyphicons.unlock {
zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
body {
font-size: 11px;
}
.titleResult {
white-space: normal;
}
.resultHeader {
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width:30%">
<div class="resultHeader">
<span class="titleResult"><a href="example.com">Test long title Test long title Test long title Test
long title Test long title Test long title</a></span><span
class="small nl-icons glyphicons green unlock"></span>
</div>
</div>
</body>
</html>
Keep the icon and text inside one more span and apply nowrap class for that.
.titleResult {
white-space: normal;
}
.resultHeader, .nowrap {
white-space: nowrap;
}
<div style="width:30%">
<div class="resultHeader">
<span class="titleResult">Test long title Test
long title Test long <span class="nowrap">title <img
src="https://www.google.com/images/srpr/logo4w.png" height="15"/></span></span>
</div>
</div>