i'll try to make my question really simple 2 you
Basically, i have a DIV, in which i have a picture
What CSS styles should i apply to the picture to position it correctly inside the div
with the condition that everytime i resize the browser window it stays there (inside the div) at the same distance from the borders
Sorry for wasting your time but i'm still a newbie which needs help, thank you alot!
EXAMPLE HERE
code
html
<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>
css
that's the question :)
You need to look at absolute positioning. First, you set the containing div's position attribute to relative. For example:
#super_div
{
position: relative;
}
Then, you set the image's position property to absolute and use the top and left or right properties to place it inside the parent div. So, for example:
#eyes
{
position: absolute;
top: 20px;
left: 20px;
}
That's how you make the image keep its current position no matter what. Here's a link to an article explaining the basics. Hope this helps.
This will get it horizontally centered:
margin:auto;
If you need it vertically centered as well then things get a bit more tricky. You can either resort to tables, use a background image (if this is appropriate to your situation) or fiddle with the css. I used the code on http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ as a basis for solving a similar situation I had a while ago..
Related
This question already has answers here:
How can I wrap text around a bottom-right div?
(9 answers)
Closed 7 years ago.
I would think this would be a common issue, but my search for a solution leads me to believe it may not be possible. I simply want to place a div in the lower right corner of its parent div, yet have the text in the parent div flow around it.
Although I've found many posts addressing this question, I have not found one that appears to work. Most of these posts were several years old, which gives me a sliver of hope that there may be a way to do it after all with HTML 5?
I should have mentioned that this is in pursuit of a responsive design, so a static solution will not work.
Here's what I'm attempting to do: http://test.scoe.net/rfox/usalResponsive6/indexTeacher.html
I have a background image in the lower right of the div. I would like the text within this div to not flow across the image, but around it instead. I thought I'd be able to place an empty div (represented by the purple rectangle in the referenced page) in the lower corner to prevent text from flowing across the background image, but I can't seem to find a way to accomplish this.
Didn't see a demo there - or anyone doing it with a pseudo element (which would be a bit more semantically correct because it's styling and not content) so let me just post that then :
Demo
<div id="parent">
<div></div>
<span>text</span>
</div>
#parent:before {
content: '';
height: 35%;
float: right;
}
#parent div {
width: 130px;
height: 65%;
float: right;
clear: right;
}
When it comes to responsiveness in this particular case there are two aspects. First would be the background but since that isn't responsive itself for the most part and positioned at the bottom right, some width and height may have to be set along with the break points in the media queries.
Another form of responsiveness, automatic adjustment to the amount of text, is a tricky one that doesn't seem to be solvable without JavaScript. When height is left to auto, the floated elements will not inherit any height. This causes for the effect to not render. And because children cannot refer up the tree to relate to their parent's unknown height there isn't a pure CSS approach available.
So the example still has a fixed height and a minor bit of JS that's commented out but which should come close to making it adapt. It's a workaround but it's all current browser support will allow.
And now what can be used in the future!
Caniuse
The image itself could be cropped and saved as png, leaving transparent space around it. Then we can apply shape-outside and shape-image-threshold rules to it. With the current spec any text will then wrap when it's floated. Browser support it still limited at this point but it's very promising. The great thing I noticed about it is that when the floated element is given top margin, the text will start to flow above it! This does not occur in the example at the top of this post, it will only make the block appear longer (and empty as well). Because of this, a minimal bit of vanilla JS can make it fully responsive by only setting margin and without using an additional pusher element :
Example
<img id="image" src="image.png" alt="">
#image {
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: right;
}
window.onload = placeBottom;
window.onresize = placeBottom;
function placeBottom() {
var parent = document.getElementById('parent'),
image = document.getElementById('image');
image.style.marginTop = 0;
var space = parent.clientHeight-image.clientHeight;
image.style.marginTop = space + 'px';
}
It's actually very straightforward :
http://www.html5rocks.com/en/tutorials/shapes/getting-started/
Credit for the latter part to Paulie_D for putting me on the track of CSS shapes and later recognising that images used in this way are subject to same domain policy. Meaning they have to be hosted by the site itself or when linked externally, CORS restrictions will need to be relaxed.
I have a dynamically generated list of moderators on a minecraft network with a tooltip generated for each head that is generated showing their username on hover. The functionality works, the tooltip generates and has the correct username in it however, the position is wrong. It's shifted to the left and falls apart as I move down the list. Here's a gif on what's happening:
I simply do not know what to do in this situation.
Well the plugin seems to work correctly (if the names are okay), I suppose it might be a css issue. Maybe the parts of the tooltip get somehow some margin on them. try to inspect them with right click and see if they have any other style attributes than the defaults.
Anyway, if you could post some of the codes, that would be easier.
Seems like this page has changed since you asked this question, but I bet it was a CSS issue. You probably needed to center the tooltip box relative to its parent. Here's some (unvetted) code that might help. I've only included the properties that would affect the centering on the tooltip container:
.parent {
position: relative;
}
.tooltip-container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
Notice, you have to set a width on the tooltip-container. margin-left is 1/2 the width, and negative (visualize that left: 50% will put the left edge of the container at the center of the parent, and the negative margin-left will shift the container half the width of the container).
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
I haven't asked too many CSS questions on here, so here it goes.
Let's say I have a page:
<body>
<div id="wrap">//page containment, etc.. goes here..</div>
<img class="custom-bg" src="example.jpg" />
</body>
Then I write some CSS for the image in particular:
#wrap {
z-index: 100;
}
img.custom-bg {
position: absolute;
top: 1000px;
left: 50%;
margin-left: -960px //the image is 1290px wide
z-index: 0;
}
If you can't tell by now, yes, I'm trying to create a background image using absolute positioning. Yes, I know, I can just set the image as a background to the body tag and use positioning to place it, but for the sake of this question, let's say that's not an option to me.
The issue at hand is the appearance of horizontal scroll bars. Google is full of examples with people turning off overflow and other things, but I'm curious if anyone has been able to find/create a definite approach to removing horizontal scroll bars when performing something like the above. An absolute image, that lives happily on it's own. Centered. And not "attached" to the window... Thus eliminating the need for the browser to let users know there's an image that's really big, and that they just have to see it by scrolling horizontally a little bit.
Any insight would be awesome. I included as little code as possible so that people who may search for this example and are new to web dev, may have an easy time understanding how to work through their problem regarding absolute positioning and horizontal scrolling.
I may have missed the point here, but why don't you just use position:fixed instead?
http://jsfiddle.net/shanethehat/7MetS/
I have a 125x250 image and I need to just display a 125x125 region of it.
Can I do this via CSS? How?
Thank you
There is the CSS clip property but it's a bit clunky to set up and, as #edd points out in his answer, works for absolutely and fixedly positioned images only.
I personally would create a 125x125 div and, depending on the situation, either
Have the image be the div's background-image (you can even position it using background-position
Put the image in it, and give the div overflow: hidden (advantage: It will still be an image element with an ALT text)
If you need the whole thing to behave like an image in the document flow, you can give the div the display: inline-block property (Not supported by older IEs).
This technique is also called "sprites". An ALA article from 2004 demonstrated the basics, another good and short introduction can be found at w3schools (www.w3schools.com/css/css_image_sprites.asp).
So it is basically a parent element being positioned relative. A child element has a defined size and a background like background:url("sprite.png") 0 0;. To use another portion of the sprite e.g. at another child element, you can define background:url("sprite.png") -125 0;.
You can use the CSS Clip property but it's a bit fiddly to set up because the image and parent need to be either absolute of fixed positioned. But it does work quite well once setup.
example:
img
{
position:absolute;
clip:rect(0px,125px,125px,0px);
}
Put your image inside div
<div style="width: 125px; height: 125px; overflow: hidden;">
<img src="..." />
</div>