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.
Related
I have a problem with horizontal image "gallery" where I set the height to 100% and don't set the width of the picture due to different sizes.
My problem is that the parent element does not diminish and he remains the original width of the image. Try resize height of window for display problem. Red color is parent.
I need this: parent image will have a height of 70% and will be centered vertically, the image will set its height to 100% and will automatically change the width according to the resolution.
How it look -> http://prntscr.com/2qkoj8
It must be solved in css.
My problem can be seen on http://helpimage.honzabittner.cz/
Thank you for help and sorry for my English... :)
Update
you can try something like
<div id="project-eagle" class="project">
<img src="project/eagle/01.jpg" alt="">
<div class="what">....</div>
</div>
set project to display inline
Now this gets rid of the issue where the container does not resize properly but it does not vertically center your content. You will have to do something with that but this is as close as I can get without js
Yes, try to remove the margin-right:14px; in class project p-one
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;
i have two div in my html page like this image.
main div with background image has responsive technology. i have second div with face picture as main div content that show in above picture with red border, which its resizing should be correspond to the main div background in a way that it's Aspect ratio remains last value.
http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/
You have to manipulate the padding property on the parent div to get the desired effect of retaining the aspect-ratio. If you show me your code from some live website, I can further pin-point where you need to make the changes in your CSS.
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'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%}