I am building a button, using vml because it's the only way to make it rounded on Outlook emails. I need its width to depend on its content. However I can't find a way to do so. The only width I am able to give it is a fixed width.
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
style="width:200px; height:41px; v-text-anchor:middle;"
arcsize="10%"
stroke="f"
fillcolor="#d62828">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
Découvrir
</center>
</v:roundrect>
Is it possible to make its width depend on its content width? And if not, is it possible to make it equal to 100% of its parent (I tried mso-width-percent but it depends on the viewport width, not the parent width)?
Related
how to crop image for email template? I have an image that is of particular width (example 520px). I want to ensure that the height is never more than 150px. This is for email only... If I use max-height or just height css, then it gets pixelated? What other better option do I have?
Ideally, you would crop the image (either manually or programmatically), and have it stored somewhere (on a CDN), where you can embed the image, and it will display as intended.
If this ^ isn't an option, your limitations are based on what email clients you need to support.
I am using Campaign Monitor CSS as a reference.
Option 1: If you aren't concerned with supporting Outlook.com and/or Outlook 2007/10/13, you could set the image as a background property on an element as such:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520)">
</div>
Here we are using a 520x520 (square) image, and setting the parent element to the desired size (520x150 as per your example).
Now you are faced with the issue of positioning the image background. As per the guide, if you attempt positioning, you will lose Gmail, which is probably a deal breaker. However, as an exercise, you could do this:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520);
background-position: 50%;>
</div>
Now you've got an image positioned (centered), at your desired size. on an element.
Option 2: Is also limited to a specific set of clients. You could feasibly use position: relative, on the wrapper, and position: absolute, on the tag. Then use top, left properties to position.
Of course, you lose Yahoo, in addition to Outlook and Gmail.
HTML emails are tricky. I'm sure there are several other options out there. I hope this response gets you pointed in the right direction.
With various mail clients having limited support for html and CSS attributes you're going to have to have trouble achieving a cropped image affect using vanilla CSS and HTML techniques.
The following is supported by most mail clients other than Outlook and Outlook.com
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x200.jpg)
"></div>
Unfortunately most mail clients have no support for clip, overflow:hidden or background-clip.
Even an embedded image has very little support. Send a base64 image in HTML email
The best solution would be to render a copy of the image as you need it without any CSS trickery. This is the only real solution to your problem.
I am working on a CSS tumblr theme header found here grandneue.tumblr.com.
(1) Stretch: I want it to be able to stretch but only up to a maximum size as the header gets too pixelated otherwise), probably around 800px.
(2) Shrink: The second issue I have is, while the header does shrink down to a certain size (it does when I change the desktop browser window and to a certain extent on the iphone5), it doesn't shrink down fully so it fits 100% on a vertical iphone5 browser display.
Can anyone please help me solve these two queries? The content is totally fine so I don't understand why the header won't follow suit!
Looks like the problem is with the image, there's a lot of white space around the logo. Edit the header image to be 800px width and make sure the logo fits right to the edges. Then set the background properties on .header-image.cover to;
.header-image.cover{
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
margin: 0 -1px;
}
Then finally make the container div .header-image-wrapper ;
.header-image-wrapper{
max-width: 800px;
}
If on mobile the image is right to the edges, just add padding to the container with a media query :)
Hope this helps!
<window height="300px">
<borderlayout >
<north height="60px" ></north>
<west width="200px" ></west>
<center></center>
<east width="200px" ></east>
<south height="40px"></south>
</borderlayout>
</window>
Currently i have to set the window height to a pixel value for this to work properly..
So if my screen resolution height is 300px then it will cover the complete screen.
But will not fill up the complete screen for different resolutions...
How to make this hardcoded value to be dynamic based to user screen resolution ?
I cannot remove window tag.
zkfiddle example
<window height="100%">
should do the trick.
Maybe Media Queries could be interesting for you too.
How do I center align fluid layout (no fixed px values, only % values) for multiple screens ?
i.e. I am going to view the same HTML on desktop (can be multiple resolutions), can be mobile (e.g. iPhone) OR even a tablet (e.g. iPad).
I think the following solutions would not work in my case;
Using width:100% (there won't be any space left to center align)
Using widdth:80% or so and then using margin:0 auto (this would
work fine on desktops, but would waste space on mobile devices..i.e i
want to optimize limited space on mobile devices)
Using text-align:center (I want to center align the layout and not
the text)
Please suggest.
<div style="width:100%; text-align:center;">
<img style="margin:auto; display:block;" src="images/web_banner.gif"/>
<p>Website coming soon…</p>
</div>
Use align="center" in div then u will get content in div will center
It's extremely difficult to set a page unless it's just text to be completely liquid. Just because images need to be displayed at a certain size and then would need to be re-sized to fit smaller resolutions. That being said if this is just a text based site then the
width: 80%;
margin: 0 auto;
text-align: center;
iphone supports the the margin so this should work fine. If you have images and need to resize then you should really look at a jquery or javascript to adjust the images on resize.
Also use the text-align: center for backwards compatibility. Use all of that as a wrapper and then set for you content and navigation
text-align: left;
I am designing a fluid layout and am thinking on the right approach to code the layout ..Below is the structure which i am thinking;
<body>
<div id=container>
<div id=col1></div>
<div id=col2></div>
</div>
</body>
For the CSS, I am thinking of coding the container as {width:90%;margin:0 auto;overflow:hidden}
For the 2 cols, they would be floated left with some % widths..
As you can see, since i want a fluid layout, i am not using px value anywhere..
My other requirements are;
1 It should adjust based on viewport automatically e.g. Same html page when viewed on desktop or iPad (to some extent mobile phone) should adjust proportionally with respect to viewport..
2 It shoukd be compatible across most of the desktop browsers and iPad with easily extensible in future for other tablets..
3 The page should appear center aligned (not sure if There would be enough space for this on iPad)
Pleasepoint any issues you may think can Be caused by the above structure or css..
Please suggest if my HTML and CSS code (specially the container) are coded correctly..I am a bit aprehensive about getting this right, as the same is going to be applied to almost 500+ htmls...So woukd not want to get into any kind of major issues at a later stage..
Please suggest as many ideas..I am open to all of them..
Thank you..
You could do that quite easily in terms of it being flexible:
(I have left the styles inline because i'm lazy right now!)
<div id="container" style="width:90%; margin:0 auto; overflow:hidden">
<div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div>
<div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div>
</div>
The 90% width on the container with be 90% of the viewport. The columns will be 50% of the calculated 90% width whatever that may be.
I would use masterpages or similar so if you did indeed need to change things around you would have to apply it across each html page :)
Also although the columns will be fluid your content could determine minimum widths - e.g. if you have an image in one column that is 500px wide then the minimum width of that column will be 500px when resized and might cause you issues. In short you need to consider the type of content you will have of the site and how that could potentially affect layout.