the title might be confusing, but let me try to explain.
I have a few objects on my website, all with id's in the style section with fixed position (position:absolute, left and top etc).
(I tried to add style sheet code, but this page didn't let me post it, so use your imagination)
Now I want to add a little icon (flag) underneath all the objects, about 20-25 pixel below the above positions. How can I do that?
Wrap the objects in divs, provide absolute position to the wrapper div, add your icon in the div.
Try this,
HTML
<div class='wrapper'>
<img src='' class='image your-object'>
<i class="icon"><!-- ICON HERE --></i>
</div>
CSS
.wrapper{
position: absolute;
top: 5%;
left: 5%;
// your css here
}
.icon{
margin-top: 20px;
display: block;
}
Browser take out the elements with position fixed or absolute from the normal flow of the page. so you need to assign an id or class to your icon and style it manually (with hard code top/left position in pixels) in your stylesheet. However if you are comfortable with javascript or jquery then it is possible to calculate the top/left position of those elements and dynamically assign top/left position to your icon...
Related
I would like to place div's (input form) on a responsive background.
I'm using Bootstrap 3 for the page template. But if I resize the window or use another screen size the elements are on another place. How could I fix this common issue?
Example: http://goo.gl/D7TwIP
Thanks!
Instead of using margin-top and margin-left use top and left properties on a positioned absolute element.
top: 540px;
left: 117px;
position: absolute;
Also make sure the parent element is set to position relative.
position: relative;
The Goal
I'm practicing writing my own simple JavaScript slideshow plugin, and the intended method is to have all of the images -- all of which are the same size -- in the same location on the screen (so all having the same x and y values), but alter their z-indexes to shuffle them in front of or behind each other as necessary, cycling through each of them. The JavaScript is working well so far, but I'm not able to get the images to all layer on top of each other on the page -- they just stack, from the top of their container downward, one per line.
What I've Got
This is a simplified version of the relevant portion of my HTML:
<section>
<div class="images">
<img src="1">
<img src="2">
<img src="3">
</div>
</section>
And the CSS
.images {
height: 15em;
margin: 0 auto;
overflow: hidden;
width: 20em;
}
As you can see, it's not too complex. I'm at a loss as to where to go from here, though. The only way I've been able to get the images to layer the way I want is to apply position: absolute; and top: 0; to the images, but that also throws them outside of their div, and then applying that to the div itself causes the whole layout to go into chaos. So if anyone has any advice, I'd greatly appreciate it! :)
Add position:relative to your .images class. Absolutely positioned elements are positioned with respect to their closest positioned ancestor element.
You need to apply position: relative to the div. That way the images use their parent div as a reference.
One option would be to use the JavaScript to modify the display and visibility CSS attributes to show and hide the images.
visibility: hidden means the element is not visible, but it still takes up space in the page flow.
display: none means the element takes up no space in the page flow.
I've seen browsers behave oddly when display is none but visibility is hidden. I've found it's best to switch both.
For the image you want to be visible, set display: block and visibility: visible
I know how to stretch background image to fit its container (with background-size property). But how to achieve the other way around without setting width and height manually?
To better make my point, assume we have a p element with one line of text and set its background-image to an picture of 800*600px. How to adjust the width and height of p automatically to 800*600?
I ask the question because I am looking for a better workflow. It's quite annoying to change width and height in CSS every time I change the image size in Photoshop. The workflow is like below:
Change image in Photoshop (likely end up with a slightly different image dimension)
Remember that new dimension
Go into CSS file looking for that particular element which uses that image as bg
Change width and height of the element (if i still remember them correctly..)
Instead of using a background image, you could use a img element and set the containing div's display to inline-block. You'd then need to create an inner div to wrap the content and position it absolutely relative to the containing div. Since the img is the only thing in the flow, the containing div will resize relative to the image.
Pretty much a hack, but I think it would give the effect you are looking for.
http://jsfiddle.net/Km3Fc/
HTML
<div class="wrap">
<img src="yourImg.jpg" />
<div class="content">
<!-- Your content here -->
</div>
</div>
CSS
.wrap {
display: inline-block;
position: relative;
}
.wrap img + .content {
position: absolute;
top: 0;
left: 0;
}
Your only option would be to programatically add the height/width. Compass for Sass has functions that can return the dimensions of the image when the CSS file is compiled: http://compass-style.org/reference/compass/helpers/image-dimensions/
.foo {
height: image-height('my-img.png');
width: image-width('my-img.png');
}
According to the documentation for CSS3 w3schools this should do it:
div {
background-size: contain; /* or cover */
}
EDIT: using javascript, you could load the image from the background-image property and set the size of the container.
(function() {
var img = new Image();
var $mydiv = $('#mydiv');
img.src = $mydiv.css('background-image').slice(4,-1);
$mydiv.width(img.width).height(img.height);
})();
I am doing a page where I show thumbnails for videos that, when you click, it popups a YouTube video.
This thumbnails are simple images of 195x195 but the end client it will upload as it, and I would like to add via CSS a "play icon" over the image of the video (compatible with IE7+). I've no idea on how to handle this.
Can anyone help me?
Thank you in advance!
you might want to do something like this:
<div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
<img src="/path/to/image.jpg " alt=.. width=.. height=..style="position: relative; z-index: 1;" />
<img src="/path/to/play.jpg " alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
</div>
of course do not use style="", but put styles into separate CSS files.
Explanation:
put two images into div. If you give position: relative; property to your wrapper div, then anything inside this div would be position relatively to it. It means, you can add position: absolute; to the play image and using left: XXpx; and top: XXpx; you can position it where you want. You might want to use z-index to define which picture should be on the top. The higher z-index the higher layer. Please note: z-index works only if position is set.
You can use position: relative or position: absolute to position images on top of the other.
When positioning absolute, these elements are positioned absulute within the parent element that has a relative or absolute position, so not relative to the page as is often thought.
I demonstrated this in this fiddle:
http://jsfiddle.net/W5TFS/
You can create a class that will show the image.
showPlay{
background-image:url('play.png');
z-index:1
}
Then you can use it in every image that you need to show it.
You can try it here.
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.