I'm looking for a way to place text under my images and want to keep it there when changing browser size (if possible make text bigger and smaller when doing so, but not necessary). When I use a div around an image the other images seem to disappear.
This is the link to the site:
http://www.noortjepalmers.be/portraits.html
Thanx.
You can add a div around each image, give it a class like "image-container" and then in your css you set
.image-container {
display: inline-block;
}
Related
when I am using LinkManager on an inserted image, a blue border starts coming around the images. Can some body help me to remove this border?
This is a default behavior of IE inside the editable iframe elements, which can be customized via the following CSS rule:
a img
{
border: none;
}
Put the class in a CSS file and load it through the CssFiles property of RadEditor. It will clear all borders shown for images inside an tag.
Best regards,
Rumen Jekov
I created a shape (a rectangle to be exact) and in this shape I wish to have an image overlapping its actual size (e.g the rectangle would be 400px by 400px and the image would be 600px by 600px).
Are there any ways of doing this? Here's a mockup of what I'm describing:
EDIT: To achieve this, simply use
z-index: 1;
position: absolute;
Thanks user acarlon.
I am not 100% sure what you are after, but it sounds like you want an image cropped to a container div.
What you want is overflow: hidden on the container div. See here for details.
You can also use clip. See here.
Update
Actually, it seems like you want one image to overlap another. In which case you want to use absolute positioning and z-index. See here.
I currently have a right-aligned image in the main body of a WordPress post, which I have placed using the WYSIWYG editor. However, I would like to prevent this image from displaying on devices with a max-width of 320px.
I am using a responsive theme but do not wish to change the way that other images on the website behave. For this reason, is it possible to target that image specifically? If so, how would I do this?
Bonus: I originally wanted to change the alignment and margins of the image at mobile width but have been unable to figure out how to do this without changing the way that it behaves at bigger screensizes.
Have been unable to find a solution thus far.
Thanks!
you could use media queries on the editor go to the html editor an add an id to that particular image for example <img id="target" src="some/image.jpg" />
then you could paste this on your style.css file
#media only screen and (min-device-width : 320px) {
#target{ display: none; }
}
I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/
MediaWiki pictures can be set to a certain size with simple formatting.
However, tables will resize on the fly depending on the browser / screen size.
Can images be made to resize like tables?
(Images inside tables does not work!)
I had the same question and saw from the answers above (now they are below) that you cannot have several pics with different relative sizes. So I wrote a mediawiki extension allowing this: http://mediawiki.org/wiki/Extension:AdaptiveThumb
Dynamic resizing as the browser is resized:
Put the next line at the begining of the css file: .\skins\common\shared.css
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
Each resizable image will be placed inside a <div></div>
<div>[[Image:MyImage.png]]</div>
Read more here: http://www.mediawiki.org/wiki/Help_talk:Images
You could set up a CSS hack.
Mediawiki allows you to include some variables like alt-text, including in that variable a special string such as w100 or resizeable will allow you to target the element with CSS:
img[alt=~w100] { width: 100% !important; height: auto !important; }
Do note that since you are using alt for things it's not meant to be used and !important in the CSS (because MW sets the size as an element style), this is to be avoided as much as possible and meant to be used as last resort.
In short, no, there is no easy way to do this. It could conceivably be done with a bunch of fiddly Javascript, but I'm not aware of anybody having tried this and the implementation would not be trivial.
The short answer is no. The long answer is that you would have to write JavaScript that can determine the user's screen resolution and store it in a cookie.. This would have to be done most likely in common.js so that with the exception of the one in a billion user that has never been to the site and manages to navigate directly to the page with the dynamically sized image (I hope you're not going to put something like that on your main page), that information will already be there when they get to the page. The page could then use those variables to set the size to be {{#expr:(File height * % of screen you want it to take)*(screen height)}}x{{#expr:(File width * % of screen you want it to take)*(screen width)}}px. The host of my wiki says he is in the process of writing a new extension that may be able to do that as part of a request for a <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> section I want to make. If you find something else before me, please update this post so I can see it. Thanks. :D