i want to display a div with a background image. I don´t want the div to have any other content than the background image and i don´t want to use a img instead.
It would work with fixed values like height: 100px, but i want to use percentage declaration.
Why is it not showing? Is it even possible with percentage values? Or do i have to declare anything else?
I want to build a RESPONSIVE mobile site, where i can use template buttons and fill it with html text so i don´t need to use several images for the same button with different text. Is there a better way?
Thanks in advance here is my code:
<div id="icon1">
</div>
#icon1 {
background-image: url(images/MyPicture.png);
width: 30% ;
height: 100%;
}
it'd only work if a percentage height is set to all of the parent elements of the DIV#icon1 up to the BODY and HTML tags.
http://fiddle.jshell.net/YJQcF/1/
Otherwise, it'll need fixed height or min-height values to be assigned to it;
Related
I want to use Adsense on my website for the first time, I encountered some problems in the start stages. I want to use the advertisement with the size manually written in the size space ( width:height ).
Display ads - image
Here I chose manual size for advertising link
width : 300px; | height : 250px;
Google Adsense says that fixed advertising cannot be responsive: Note that fixed-sized display ad units don’t dynamically change their size or respond to changes in screen orientation.
Finally my question, it is possible to create more ads from large to small from the beginning but with the change of the device to hide the advertising that is not adaptive
example > computer > html : <div class="div1"> </div> <div class="div2"> </div>
example > computer > css : .div1{display: block; width: 300px; height: 250px;} .div2{display:none}
And if device = tablet
CSS
#media only screen and (max-width: 425px) {
.div1 {
display: none;
}
div2 {
display: block;
width: 250px;
height: 250px;
}
}
The meaning of the post is if I can hide an ad from google adsesn on different devices.
!!!standard ad will be 300px X 250px if the device is less than 425px for the standard ad to write display none but for another ad that was hidden for the computer to write display block
Google adsense display fixed
Although there isn't a "proper" solution to this, i.e. not one that is using AdSense units the way they were intended to be used by Google, there is a practical workaround that I have been using for years on one of my sites, and that to my knowledge is in line with their policies (they have never complained to me about it.)
The workaround is to use Google's responsive ads, placing them inside divs with fixed widths but variable (unspecified) heights, and using CSS to hide the div's containing the ads if the browser width is outside a certain range. To make this work:
Make sure exactly one div displays for a particular screen width.
(Optional but recommended) set margin: auto; on each div so that it centers itself horizontally in the layout.
Set each div with a fixed width, but do not specify its height. This is because Google's responsive ads may serve ads of different heights so you must leave it flexible.
Make sure the div disappears if the screen width gets sufficiently narrow, because you don't want Google serving a fixed-width ad that is truncated because of your layout, that could violate policies.
You can then have up to three "sets" of such divs, and as long as only one div from each set is visible at a time, you will be in line with Google's 3 ad units per page limit. If a window is resized and it reaches a breakpoint in the CSS and triggers a display of a different div size, the ad will simply disappear until the page is reloaded.
How to code the media queries? I recommend only the max-width constraint...it's the property you need, you don't need to look at screen or anything else. E.g. here is some of my code:
div.container_320
{
margin: auto;
width: 320px;
display: none;
}
#media (max-width: 650px) { div.container_320 { display: block; } }
#media (max-width: 354px) { div.container_320 { display: none; } }
Then you can have:
<div class="container_320">
<! –– put adsense code here ––>
</div>
And this will achieve one of your divs. The div will appear only in a fixed range of widths; otherwise it will be hidden.
Then you need to make the others for whatever sets of different widths you want for the different max-widths of the user's browser. Put all div's of a set right after each other in the HTML. You can have as many such divs as you want, but I have found that usually having 3 is sufficient to optimize revenue while keeping the layout looking nice. Use Google Analytics or other data you have to look at the screen widths of people actually viewing your site.
You will need to adjust the dimensions and break points to fit your desired dimensions and layouts. Also, keep in mind the standard ad widths, and optimize that for your revenue. If you set the width to a non-standard size, you will find Google often serves very small ads with a lot of empty padding around them, and this is going to both look poor and forgo revenue because you're displaying in a small fraction of your available space.
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.
We're using Umbraco v7.2.1 to serve what is supposed to be responsive content.
When you add an image from the media library to the tinymce editor, this is the html that is inserted by tinymce:
<img style="width: 500px; height:500px;"
src="/media/1007/jobs-block.jpg?width=500&height=500" alt="undefined" rel="1097" />
I really don't want ANY w x h in the tag or image src.
I have found a couple of posts regarding the tinyMce.config file and the validElements node - i removed the height and width things from the img thing in there but that had no effect.
If you open the Data Type for the Richtext editor in question there is a setting called "Maximum size for inserted images". This is by default set to 500 pixels.
If you set it to 0 it will disable any resizing.
I think you can have your cake and eat it too, no need to restrict editor re-sizing.
Adding the following properties to your img elements: max-width: 100%; height: auto !important; will allow content editors to re-size their images while also making them responsive.
I processed the output. I removed the height and wrap images by a div by javascript and I can fully customize it via css
i have a webview in my application and it works fine. it fits horizontolly (not scrolls) and scrolls vertically. but any word which is longer than 320 pixel makes it scrolls horizantally and makes the font larger. i don't would like horizontal scroll. i would like it to be continued in new line. how can i do?
thanks.
The problem you have is actually not related to the UIWebView in itself. What the web view does is just display any html you provide. This means that you have to format the html to do as you want. One way to accomplish that is to use a div as follows.
<div style="width: 320px; word-wrap: break-word">
text with looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongword goes here
</div>
Caveat: I don't know very much about html and css so there might be better ways of accomplishing this.
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.