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
Related
In the footer of the website, I would like to include social widgets. Facebook one is working just fine, Tripadvisor comes with a many lines of code and and is not really styled, jumps off my footer etc.
How do I eventually style the widget which is not styled? If I change anything in the code, a message:
"Please check the TripAdvisor code and install again."
This is their code
<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
<ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
<a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393- Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
<img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
</a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&uniq=675&locationId=6883393&color=green&size=rect&lang=en_US&langversion=2"></script>
The main problem is that it jumps out of the footer and does not stay in line like I would like to.
Screenshot:
The whole site to check is : http://ilovesegway.com
The best way for you to get it exactly like you want is for you to open your site in your browser of choice and tinker with the styling in the browsers developer tools.
I went in and slightly modified the parent div. I gave it a display: inline-block
<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...
That wasn't enough so I also changed two children divs to inherit the vertical-align styles.
<div class="socialWidgetContainer" had a style of display: table-cell which I removed.
<div class="socialWidget" style="vertical-align: inherit;"
I assume the second modification was generated content by trip advisor, but you should still be able to style this via a .css file or even some JavaScript.
I did all this through the chrome dev tools.
Have you tried using an iframe, similar to what the Facebook widget uses? That way, you could put the TripAdvisor code in a separate HTML fragment and let the iframe dictate where you want the widget to go. That way, you're not fighting against whatever styles are being pushed at you from TripAdvisor's scripts.
<!-- Facebook widget -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FI-Love-Segway%2F540468152732697&width=100&layout=button&action=like&show_faces=false&share=false&height=35&appId=487866241269315" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;padding-top:15px;" allowTransparency="true"></iframe>
<!-- Trip Advisor widget; add whatever styles or parameters you need -->
<iframe src="YOURSITE/tripaddvisor.php"></iframe>
You can still apply css rules to the included content. Consider making #TA_socialButtonBubbles675 position:relative and moving it manually to where you would like it to appear. I had some luck with:
#TA_socialButtonBubbles675
{
position: relative;
top: -116px;
left: 360px;
}
I'm trying to add several images on my wordpress page but I don't want any spaces in between all of the images. All of them stacked on top of another..trying to create one big vertically inclined image but all of them have a white line or space in between.
I've tried the following:
No spaced between the tags:
<img src="http://www.test.com/images/packages/unnamed (1).jpg"></img><img src="http://www.test.com/images/packages/unnamed.jpg"></img>
I read this in another post on here:
<div>
<img border="0" src="http://www.test.com/images/packages/unnamed (1).jpg">
</div><div>
<img border="0" src="http://www.test.com/images/packages/unnamed.jpg">
</div>
Any help would be greatly appreciated.
Thanks
you might need to play with the margins/ border with a little css. Both can add space between anything.
Example for your code:
you will need to do a couple things:
1) make the images part of a css class (lets call it noBorder)
ex:
<img src="file" class="noBorder" >
you will add this class to all of your image tags
2) make the actual class
pretty much like this:
<head>
<other head tags>
<style>
.noBorder{
margin:0px;
border:0px;
}
</style>
</head>
3) alternatively, you could just insert this inline code to each of your image tags:
style="border:0px;margin:0px;"
ex:
<img src="file" style="border:0px;margin:0px;" >
note that these styles will also work on those divs you have there
A great resource for these things is: http://www.w3schools.com/css/default.asp
and on this subject: http://www.w3schools.com/css/css_boxmodel.asp
I actually got it fixed, thanks for the help.
All I did was this code for all of the images one after another and boom fixed.
<img src="http://www.domain.com/images/packages/unnamed (1).jpg" style="display:block"></a>
I am building a html email. it looks fine in outlook 2003, outlook 2007, hotmail, gmail, yahoo but in outlook web app has breaks between the rows. has anyone had these issues with outlook web app?
i have display block on the images but it looks like they get stripped out.
This was fixed by wrapping the elements in <span style="display:block"></span>
E.G:
<a href="http://www.url.com">
<img src="example.jpg" />
</a>
becomes
<a href="http://www.url.com">
<span style="display:block;">
<img src="example.jpg" />
</span>
</a>
but needs doing on all broken elements
Various styling is being stripped, so inline-styling will NOT work with images in OWA.
Here's a simple example of what Bill the Lizard was referring too:
<span style="display:block"><img src="myFancyImage.gif"/></span>
Without the above code it may look like extra padding/margin is creating space between tables and table rows/columns.... basically the issue that brought you to this page.
Use this inline css
<span style="margin:0; padding:0; display:block;"><img src="myFancyImage.gif"/></span>
I had the same problem, and unfortunately none of these solutions worked.
The display:block was always being striped out, no matter whether I wrapped the image in span or font tags.
Eventually, I found that wrapping the image in a DIV with inline width and height solved the problem. I guess because DIVs are block elements already, and it seems the only styles that OWA doesn't strip out are width and height.
e.g.
<td width="475" height="73" valign="top" bgcolor="#e9e9e9">
<div style="display:block;width:475px;height:73px"><img src="../images/email/email_02.jpg" alt="Three Barrels" width="475" height="73" style="display:block;border:none;outline:none;line-height:0;float:left;" /></div>
</td>
I tried the fix above and it didn't work - but this worked for me:
I just added this code at the top of the email code.
/* FIX FOR OWA */
.bdyItmPrt img { display:block !important; }
I have always struggled designing css forms, I can never get the input and label side by side. Do you have any words of wisdom that may help me.
I usually use a 10px margin on the bottom but cannot get them aligned
My Common form:
Name:
Email:
Phone:
Message:
text area
I know I'm going to get backlash for this from people who think that the only possible way to do things is with pure CSS, divs, spans, etc. However, your form is tabular. You have a column of titles, and a column of input fields. In this case, because of the tabular layout, a valid solution could be tables.....GASP!
Tables are not valid for page layout...let me repeat that again, tables are not valid for layout. However, you've got an element of a page, you're not doing a full page layout. You can easily use <th> elements to style the labels for the inputs, which is quick and simple. Overall, the table (tabular) solution would be less verbose than many of the CSS layouts given, which from a pure HTML standpoint is a win. It will continue to work and layout properly even when the server gets backed up and can't load the external CSS document. To all those who believe that tables are never ok, let me remind you that this solution will validate with W3 100% of the time provided your table is properly structured. And it's far more cross browser compatible, with no box-model issues in the "crabby" legacy browers. Certainly continue to progressively enhance with CSS as is best practice.
Theory and practice, especially in the web world, are two entirely different things. In theory, all of us should be producing 100% HTML5/CSS3/Semantic/SEO Optimized...blah blah blah. In practice, theory only goes as far as the first customer complaint. Progressive enhancement is key to survival. When a webform breaks in a big corporate setting, money is lost and people get fired. For that reason, the International Bank I recently did work for had requirements that demanded all its webforms were tabular (assembled with tables) It's hard to argue with a portfolio of sites whose users generate the company hundreds of millions of $$$ annually.
<style>
ul.anyclassname{
padding:0;
}
ul.anyclassname li{
list-style-type:none;
clear:left;
}
ul.anyclassname li label{
width:300px;
float:left;
}
.inputs{
float:left;
}
</style>
<form>
<ul class="anyclassname">
<li>
<label>Name:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Email:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Phone:</label>
<div div class="inputs"><input type="text"></div>
</li>
</ul>
</form>
I usually do this:
<div>
<label for="txtname">Name:</label>
<input type="text" id="txtname" name="txtname"/>
</div>
<div>
<label for="txtEmail">Email:</label>
<input type="text" id="txtEmail" name="txtEmail"/>
</div>
<div>
<label for="txtPhone">Phone:</label>
<input type="text" id="txtPhone" name="txtPhone"/>
</div>
etc...
Then with my CSS:
label { width: 100px; display: inline-block; }
Something along those lines. Nothing fancy, but they are side-by-side and with the surrounding div you get a block level element to give you a line return after each pair.
I wrote a complete form in this answer: how can we make forms like this with css & html? . It has the html markups and the css classes you need to start.
The code is also in a fiddle here: http://jsfiddle.net/vSqR3/64/ (Now with the nice addition of the for attribute, thanks Kyle!)
You will find in that link not only how to put one markup next to the other, but how to set sizes and borders for each.
I strongly suggest you to play on the jsfiddle.net website. You'll be able to modify and test immediately all your changes.
This might be a stupid question but if there's a better or proper way to do this, I'd love to learn it.
I have run across this a few times, including recently, where small spaces show up in the rendered version of my HTML page. Intuitively I think these should not be there because outside of text or entities the formatting of a page's HTML shouldn't matter but apparently it does.
What I'm referring to is this - I have some Photoshop file from the client on how they want their site to look. They want it to look basically pixel perfect to the image in this file.
One of the places in the page calls for a menu bar, where each one does the changing bit on hovering, acts like a hyperlink, etc. In the Photoshop file this is one long bar, so a cheap and easy way to do this is to just split that segment into multiple images and then place them next to each other in the file.
So instinctively I lay it out like so (there's more to it but this is the gist)
<a href="page1.html">
<img src="image1.png" />
</a>
<a href="page2.html">
<img src="image2.png" />
</a>
<a href="page3.html">
<img src="image3.png" />
</a>
and so forth.
The problem is the images have this tiny space between them which is unacceptable since the client wants this thing pixel-perfect (and it just plain looks bad).
One way to get it to render properly is to remove the carriage returns between the images
<a href="page1.html">
<img src="image1.png" />
</a>
<a href="page2.html">
<img src="image2.png" />
</a>
<a href="page3.html">
<img src="image3.png" />
</a>
Which makes the images go right up against each other (the desired effect) but it makes the line incredibly long and the code more difficult to maintain (it wraps here in SO and this is a simplified version - the real one has longer filenames and JavaScript sprinkled in to do the hovering).
It seems to me that this shouldn't happen but it looks like the carriage return in the HTML is being rendered as a small empty space. And this happens in all browsers, looks like.
Am I right or wrong for thinking the two snippets above should render the same? And is there something I'm doing wrong? Maybe saving the file with the wrong encoding? Should I make every one of these links a perfectly positioned CSS element instead?
The whitespace (carriage return included) is usually rendered as space in all browsers.
You need to put the elements one after another, but you can use a trick:
<a href="page1.html"><img src="image1.png"
/></a><a href="page2.html"><img src="image2.png"
/></a><a href="page3.html"><img src="image3.png"
/></a>
This also looks a little ugly, but it's still better than one single line. You might change the formatting, but the idea is to add carriage returns inside the elements and not between them.
I don't know if this is general enough for your page, but you could class these particular a tags and float them all left, then they'll bunch together no matter how your HTML is formatted.
<style>
a.together {
float:left;
}
</style>
<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>
That's part of the HTML specification - the spaces are in the markup so they're considered part of the document.
The only other options you've got, since you dislike the formatting, is to break the html tags:
<a href="..."><img src=".." /></a
><a href="..."><img src=".." /></a
><a href="..."><img src=".." /></a
which is undesirable in my opinion, or create the html dynamically - either via JavaScript or using a templating system and dynamic html.
The reason is simple: In HTML white space matters, but only once. Repeated white space is ignored, only the first is shown.
The only reliable way to avoid this is, as you did, by putting no white space between elements.
When table based layout would be less out than it is currently, you could use a zero-border, zero padding table to align your elements while having them on separate lines in the source code.
The way I handle this is to use an unordered list, and make each image/link an item.
Then use CSS to display each item inline and and float them to the left.
This will give you a lot more flexibility and make the markup very readable.
The behavior you demonstrated above is true as the browser treats carriage returns as a space. To fix it, you can style it like so with:
a { display: block; float: left; }
Please note that the above rule applies it to all links, so you might want to narrow the selector to certain elements only, ie:
#nav a { display: block; float: left; }
If you're going to do a tabbed interface on a website, take great pains to do it properly, and it will be worthwhile. There are many websites with great examples of CSS tab implementations. Consider using one of them.
This one has a lot of CSS+Javascript/AJAX tabs. Or see this set of simple CSS examples (some styled). Finally, check out this actually-pretty-cool tabs generator.