I'm trying to wrap content to display in an HTML email in a container that will display with rounded corners.
I wanted to even show the rounded corners when the recipient views it from Outlook so I was hoping to use VML's "roundrect" as described in:
https://gist.github.com/elidickinson/9424116#file-html_email_buttons_1-html
It looks like this only works for fixed sized content though. My container would need to grow to fit the size of the content. Is there anyway to make roundrect do that?
Is there any better option for displaying rounded corners in Outlook? I'd like to stay away from using images for the rounded corners.
Thank you!
As far as I can recall if you are creating a button using VML then it needs to have a fixed width and height.
If you are creating a background image then dont need the width and height. Background.cm is a really good resource for you to create VML based buttons or backgrounds. Hope that helps.
Cheers
Related
I have a background image and I need to add bunch of oval buttons or images on in my case the "greenish" buttons on top of the background image, that I can click in each one of them and call a function passing a parameter. Please look on the screen shot and let me know how I can position every one of the buttons on top of the image and access them with a click (onPress). I guess the only way is using flex box but I couldn't figure out the style for it.
Thanks
Just style all the green buttons on relatively to the image's boundaries with position: absolute. Percentage values for positioning should work, if your image scales properly on screen size change.
Good evening,
I'm using Eclipse with the UI-Framework Codename One.
I would like to know how it would be possible to scale an image to fit the width of the screen?
I would like to create a list with one image( or even an imageslider if this is possible), which has the full width of the phone, and under that some text.
Another question is, how can I set an Image via Hastable and Vector from code ? I tried everything but I can't find a solution.
Thank you a lot,
Greetings Patric
It depends on what you are trying to do.
Normally you would just set the image as the background image of the component and select the background behavior as SCALE_TO_FIT which can be done both via the theme designer and via the Style object of the component.
You can also use the ImageViewer class if you want to have a viewable/zoomable image.
You can also just scale the image to the size you want using either the scaled() method or ImageIO.
I run into a problem with Geoserver.
I'm drawing multiple icons which each represent a place all over my map using ExternalGraphic.
But geoserver didn't draw them correctly as they are. I attach an image as the result of geoserver drawing:
As you can see, the 2 car icon, both got cut off around 1 pixel comapre to its original size (1 got cut off from top down while another from bottom up). It make same icon look differentfrom place to place. And i think because of this cutting, after lose some pixel, they resize the image back to its original size, which make the $ on top left look blurry compare to the one next to it.
Also as in External graphic document mention, i didn't use any Size attribute so they won't get resize or anything. So i'm not sure why the image got cut off like that.
Any1 can help me about this case ? Thank you in advance.
I suggest you open a report at http://jira.codehaus.org/browse/GEOS attaching one of the images and your style document.
Wondering if anybody could help me out. I have the Masonry jquery plug-in which is laying out a set of images and when you zoom in or out in the browser, they change place to fit more/less of the images on the screen. Is there a way to, when i hover over these images, they would fade to black and a description of the image would appear in it's place.
A bit like http://www.flickr.com/ but rather than the small box at the bottom when you hover on an image, a box that covers the whole image and each seperate image can have a seperate description.
some possible hover effects is like Image effects, like grayscale, blur, sepia, etc. I still haven't figure out the best hover effect that have fix height/width.
It seemed so simple just a day ago, but I can't figure it out:
How do I center an image on a page, giving it fixed % margins (10% on all sides) and still have it scale with the window on resize?
It's very important that the page and the image display well on all platforms, without scrollers (!).
The page itself is very simple and only contains the image (which on different versions of the page has different dimensions), and a bar on the top with a link to send it to another page.
The max size of the image would be 1500x1000px, no minimum size.
I wholeheartedly hope someone can help me out with this, thanks so much!
Best way to do that is using JavaScript. Get the window size, subscribe for window.onresize event and update the image size and position accordingly.
Using CSS only will NOT work, because any position properties depend on the container. In your case the container is the window, which will size itself based on the content. This creates a sort of circular dependency (window size depends on the image, the image size and position depend on the window size).
For information about getting the exact available window size in cross-browser way you could check this post: Get the size of the screen, current web page and browser window - haven't done that in a while to provide you with exact code.
Also note that you don't mention keeping the aspect ratio of the image. If it should not be maintained there is no way to do it HTML/CSS only, because all operations with them do maintain AR of images.