I'm attempting to overlay some links on an image. These links trigger popover editable fields but that's irrelevant.
The issue is that I want to be able to allow the image to be sized to fit a user's browser without requiring scrolling. In order to do this, I need the absoloute positioning of the overlaid controls to adjust their position to the scaled image.
At the moment I'm laying things out as so:
<div style="position: relative;">
<!-- the image fill the div for the sake of this example assume img is 1000px square -->
<img src="bigimg.png">
<!-- a number of divs like this create links over the image
<div style="left: 500px; top: 500px; position:absolute;">
<a style="display:block; width:397px; height:27px;" class="editable editable-click editable-empty">Link Name</a>
</div>
</div>
What would be best option be to automatically adjust the position of the div if the image has a size forced upon it, or is set to fill a specifically sized div.
Eg.
I force the image to be 500x500 instead of 1000x1000. I would need the div to adjust it's position to 250x250 and the to adjust it's width/height.
Just to expand upon the comment by #mcmac here is a quick and dirty jquery function that finds the dimensions of your wrapper, then sets its child image to be the same dimensions. Then it uses those same dimensions to absolutely position a link inside the wrapper, over the image.
function resizeImg() {
var container = $('.container'), // this wraps the image and link
containerH = container.height(),
containerW = container.width(),
image = $('.container img'),
link = $('.link');
image.height(containerH) // set image height to container height
.width(containerW), // set image width to container width
link.css('left', containerW/2) // move link halfway from left edge of container
.css('top', containerH/2); // and halfway from top of container
}
$(resizeImg)
Here's the HTML I used:
<div class="container">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" />
<div class="link">
Link
</div>
</div>
You would want this function to run not only on document ready (as i have it here with the shorthand $(resizeImg)) but also on resize. If you let users manually resize the image's container, look into the CSS3 resize property and see how that behaves for you.
Here's a fiddle, you can experiment by changing the dimensions of .container in the CSS and hitting "run" to see the link reposition itself accordingly.
Two things to note:
You might want to refine the math of how you move the link around. For instance, to center the link on a pair of coordinates (not just its upper left corner), you would need to subtract 1/2 the height and 1/2 the width from its coordinates. This is all up to you and how you're anchoring them visually. For coord's other than "center", you would need to give the links top and left properties in CSS, then find those in the jQuery, and do some more math, e.g. if link is at top:42 and the container shrinks by 1/3 it's height, set top:14 by dividing 42/3, etc.
There are many ways to do this whole setup. I'd suggest looking into using the image as a background-image property of the wrapper, and not an <img> DOM element. This may clean up some spacing issues you're having, or conflicts between your display properties that might happen down the road. Responsive frameworks like jQueryUI and Bootstrap may have some of what you're looking for built in by default, so give those a look and see what they offer.
As long as you don't set the div to be display:block; you it the width should automatically size to its contents width. If you want to be safe you could set a width:auto;
Related
This seems to be a tricky one :).
Here is a fiddle http://jsfiddle.net/xhrkLwwL/2/ and there a description with some pseudo-code (accurate code in fiddle):
<div id="gridSettings" style="height:100%">
<div id="gridSmaller" style="height:100%">
<img id="gridSmallerImg" style="height:200%"/>
</div>
</div>
I am trying to make responsive square icons based on height and css only.
Theory is following:
I have a square icon image (200x400px - two in one for hover purposes).
Image is inputed into html as <IMG> (NOT as css background property). The <IMG> has it's wrapper DIV and <IMG> is se to height:200%. I am expecting the IMG to scale so that I can see only top 50% and the width of the DIV to be determined by the width of IMG, which is same as the visible height (50% of total height) -> since the image is 200x400px... there you go... a SQUARE :).
Practice:
It works until I resize window. Height of the icon-wrapping DIV is 10% of window height, so if I resize window, DIV height goes as well, and so does the IMG inside. BUT the DIV's width stays the same as before resizing and so my icons get clipped :(. If I then change any css prop (via FF DOM Inspector, hover event...), the DIV updates to correct width.
Does anyone have any idea, what could be causing it?
Thank you very very much :)
PS: No need for you to send me JS solution. If neccessary I can write my own.
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
I have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
I have multiple divs with text and what not in them. When the page is made smaller horizontally all of the elements shift. However,if you resize this page, elements disappear and nothing moves. How do I fix this problem so it is like this page?
Thanks!
If you view the source of this Stackoverflow page, then you will notice that all of the content on the page is wrapped inside of a container div with the width set to 100%, and the margin and padding both set to 0. If you want to have a fixed width, then do not use percentages, but instead specify your page to be a specific width in pixels.
If you want to center all you content, wrap it in a div like so:
<div class="wrapper">
<!-- Your Content !-->
</div>
And then add the following to your stylesheet:
.wrapper {margin:0 auto;width:960px;} /* Change 960 to desired width */
I hope this helps!
Predefined sizes make the elements do not move when you resize the screen, that will keep their size in different screen resolutions also, that is to take into account. Also you must use margins and padding fixed.
In short ... not more percentages, but don't abuse fixing everything
I'm quite new to CSS and I'm trying to get a page up and running. I managed
to successfully produce what I thought was a nice page until I resized the
browser window then everything started to move around. I have no idea why
this is happening!!
Could someone offer me some advice please. When I resize the window I would
like the 'objects' to stay where they are but the window to resize. for
example, if I drag the bottom corner of a window up and to the left I'd
expect to see what was at the bottom right disapear and scroll bars to
appear but the object in the top left hand corner would stay exactly where
they are.
Am I making sence ?
Have a look at working condition of my page : http://aimmds1.estheticdentalcare.co.in/
then try to resize the browser window by dragging the right size leftwards .
and look at the content in header , and also the menubar .. they jump down ,, the header content was also jumping down then i make overflow: hidden ; .. but as i understand all this is not the right way.
Please find the html and CSS here : http://jsfiddle.net/swati/hCDas/
I already tried prevent div moving on window resize , i tried setting min-width:820px; for div header , that the main containing div.. but that doesnt solve it.
Thanks in anticipation of your help.
1 - remove the margin from your BODY CSS.
2 - wrap all of your html in a wrapper <div id="wrapper"> ... all your body content </div>
3 - Define the CSS for the wrapper:
This will hold everything together, centered on the page.
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
There are two types of measurements you can use for specifying widths, heights, margins etc: relative and fixed.
Relative
An example of a relative measurement is percentages, which you have used. Percentages are relevant to their containing element. If there is no containing element they are relative to the window.
<div style="width:100%">
<!-- This div will be the full width of the browser, whatever size it is -->
<div style="width:300px">
<!-- this div will be 300px, whatever size the browser is -->
<p style="width:50%">
This paragraph's width will be 50% of it's parent (150px).
</p>
</div>
</div>
Another relative measurement is ems which are relative to font size.
Fixed
An example of a fixed measurement is pixels but a fixed measurement can also be pt (points), cm (centimetres) etc. Fixed (sometimes called absolute) measurements are always the same size. A pixel is always a pixel, a centimetre is always a centimetre.
If you were to use fixed measurements for your sizes the browser size wouldn't affect the layout.
I'd rather use static widths and if you'd like your page to resize depending on screen size, you can have a look at media queries.
Or, you can set a min-width on elements like header, navigation, content etc.
hi firstly there seems to be many 'errors' in your html where you are missing closing tags, you could try wrapping the contents of your <body> in a fixed width <div style="margin: 0 auto; width: 900px> to achieve what you have done with the body {margin: 0 10% 0 10%}