I am creating a site here, to replicate the functionality of Chanel's website.
Currently the re-sizing works width wise but when it comes to height I can't for the life of me get it to work correctly so that the image is centered and just a bit above the footer. All my images are 1920 x 1080 just as Chanel has. Also Chanels site if you scroll just a bit down it pulls the bottom half up automatically where as I only got it to work with just the button.
When I view the page on an iPad only about 75% of the site shows up. I thought it was do to the more buttons padding but that was not the issue.
Thanks!
Also Chanels site if you scroll just a bit down it pulls the bottom
half up automatically where as I only got it to work with just the
button.
This is because the div at the top is fixed or absolute. The "bottom half" probably has a top margin of 100% that only becomes visible on scroll.
It "pulls up automatically" via javascript; if you turn javascript off acts normally. To do that, they probably use something like document.body.onscroll = function() { ...animation... }.
The CSS for the div#languages.popin (id = languages, class = popin) is as follows:
.popin {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 600px;
margin-top: -300px;
margin-left: -450px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
z-index: 150;
overflow: hidden;
}
I assume by following that, you'll get similar results. Try out firebug, or a variant thereof, and inspect the elements to find parts you may have forgotten.
Related
I want a div to stick to both top and bottom while being responsive on all sides.
I have a view consisting of 4 divs and 3 of them works well in responsive layout but in one I have a chat window (bottom/left) that doesn't have a very good height response.
Below you can see the 4 divs in full view and it's looking the way that I want it to look:
But once I start, either moving the side of the inspector to the left or look on a mobile device, the chat window reveals it has a solid height and leaves empty space below it (it sticks nicely to the top at least):
I can't seem to get around this problem (stuck for a week now); if I change the current viewport height (vh) to more it will only disappear underneath the screen and if I use % nothing happens. Here is a piece of the actual chat css:
#chatlioWidgetPlaceholder{
position: absolute;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 5px;
font-family: input;
}
...but once again, vh or % doesn't work out on this one either. Does anyone understand my problem?
I believe it could be something with the height of the top parent div because it doesn't stretch to the bottom (blue marked) and therefore can't grow:
I placed the HTML and CSS in https://jsfiddle.net/3chdp873/2/
I stripped the syntax from other divs for easier readability but if needed, just let me know :)
kinda new here
so I've been trying for the past 2hr to position an iframe and just couldnt get it right (or anywhere near that...)
my goal is to position an iframe of amazon just where "Hello, [name]" is written.
first I couldnt set an iframe because of their Same origin policy but I guess some pages aren't protected, like this one: http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending
positioning the iframe on my account information just seem impossible (tried margin-left, right, divs and everything)
my goal would be somewhat like this - http://i.stack.imgur.com/gQwyn.png
While I'm a little skeptical about what this is for, I'll provide an answer for it anyways.
So you can't exactly target the location of where your iframe's initial screen will show up at (as it will always default to the top left corner if I'm not mistaken) but you can move the iframe itself around.
Knowing that, it's possible to create an iframe effect over the iframe itself.
You'll have an iframe that will be large enough to capture the button at first glance (which 1260px wide and 300px high is good enough)
You will then move the iframe to position the button to where you would like it to show up in using an absolute position and the top and left style.
Then create a new div to contain that iframe and give it a width and height to what the button's size would be and then remove the ability to scroll with overflow: hidden; and remove the scrolling by stating it within the iframe tag scrolling="no".
You should then have the same results as below:
#my-div {
width: 128px;
height: 55px;
overflow: hidden;
position: relative;
}
#my-iframe {
position: absolute;
top: -42px;
left: -884px;
width: 1260px;
height: 300px;
}
<div id="my-div">
<iframe src="http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending" id="my-iframe" scrolling="no"></iframe>
</div>
I've been working a lot with responsive webdesign lately, and I've come across a bit of an issue. I have a one-page based website, where I currently have 2 sections (pages) first one is the intro, and second one is "about me". Now, I had a couple of my friends to visit my website on their computers (1 being a laptop, which screen height is very low compared to my 24 BenQ) I want to ask how I can make my content static, so the intro doesn't sort of disappear underneith the "about me" section.
.intro-container
{
width: 70%;
letter-spacing: .2em;
height: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#ContentWrap-2-about
{
width: 100%;
height: 50%;
background-color: rgb(255, 255, 255);
}
these are the wrappers that sort of interacts the wrong way. You can visit www.old.vhammershoi.dk and scale down your browser to see that the box with the arrow in it (click and explore popdown) will move underneith the about me section
Thank you in advance
First off all, there is no need for custom height. You have set height to element with overflow: hidden, and because content is longer than element, button is pushed down. Remove height from all main elements, also, remove margin from intro container. In that way, button will be visible, and rendered page will be the same as without changes (except visible button)
Try one of these to fix your DIV (intro container) to the top of the screen.
position:fixed;
position:static;
position:absolute;
Here is a working example : http://jsfiddle.net/19Lhchyy/1/
Using postition:fixed;
http://www.w3schools.com/cssref/pr_class_position.asp
#ContentWrap {
min-height: 100%:
padding-bottom:30px;
}
#clickAndExploreText{
position: absolute;
}
I dont know if ure able to position it but if you dont, your container will grow on hover
Then your Text 'Click and Explore' will never be under the following container.
aditionally you are missing some white-space:nowrap in your mobile version to prevent linebreak for the headlines and the tet 'click and Explore'
My problem seems very basic but I can't get it to work.
I'm trying to create a lay-out with no header, a footer always at the bottom and two columns. The right column has a fixed width (770px) and the left column should use the rest of the space. In the left column OpenLayers will be used which will fetch Google Maps images to fill the space.
The page needs to be visible on smaller screens as well and should work in FF, Chrome and IE7+.
I'm starting with a wrapper that has a min-width of 1200px. This is for the smaller screens. Scrollbars will appear then.
Next I've created 3 divs inside the wrapper: leftframe, rightframe, bottomframe.
The bottomframe used this CSS:
bottom: 0;
height: auto;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: auto;
width: auto;
min-width: 700px;
z-index: 5000;
This works good. The footer is always nicely at the bottom.
Now the problem comes. When I resize my viewport or show the page on a small screen the leftframe must resize to fill the remaining space. I've tried a lot: floats, positions.
What seems to be working is to absolute position the right frame and give the left frame a margin-right the same as the width of the right frame (770px):
#leftframe {
width:auto;
height: 100%;
margin-right: 770px;
}
#rightframe {
position: absolute;
right: 0;
top: 0;
width: 770px;
}
This seems to work as well. At least for the width.
The right frame is dynamically filled with data I get using AJAX. In some occasions the returned data is larger than the min-height I've given to the wrapper. This is fine for the right frame, its height is adjusted but the height of the wrapper isn't and thus the height of the left frame isn't adjusted as well. This result in a right frame that is higher than my left frame and a blank space is between my left frame and footer.
How to solve this? Preferable without using jQuery or similar but with CSS only.
[Edit]
Using the example provided by Zuul I've created these few lines of jQuery and it seems to work now.
These lines are called when I'm finished processing the AJAX data.
var currentHeightRight = parseInt($("#rightframe").css("height").replace("px", ""), 10);
var currentHeightWrapper = parseInt($("#wrap").css("height").replace("px", ""), 10);
if (currentHeightRight > currentHeightWrapper)
{
$("#wrap").css("height", currentHeightRight);
$("#map").css("height", currentHeightRight);
}
If I've understood your problem correctly, I've made a Fiddle to show a way to deal with your problem:
http://jsfiddle.net/zuul/TdTCU/
Additionally, there's a button there, to simulate the global resize :)
Notes:
The better solution for this kind of problems is the absolute position of elements inside a wrapper. Basically setting up a structure for all rest.
I'd like to create a that extends from wherever it starts to the bottom of the page, but does not extend beyond the bottom of the page. It has overflow-y: auto, so that if the div content is too long, a scroll-bar will appear (for that only, not for the whole page).
I tried height:100%, but that makes the height equal the page height... so if the doesn't start at the very top of the page, it ends up being too tall.
(Example: window height is 100px; stuff at the top of the page take 20px; I want the to be 80px high. But I want it to be automatically resized to 70px if the window is resized to 90px.)
Can this be done without JS? If not, how do I use JS to do that? (Using FF 3.x, but a cross-browser solution is of course preferred.)
Sounds like you want something along the lines of the following:
#myContainer {
position: absolute;
top: 20px;
bottom: 0px;
left: 0px; /* Should include space for a sidebar, if you have one. */
right: 0px; /* Same as above */
}
OK, found the solution -- making the position absolute and setting the bottom to 0 (and top to whatever the top is).
Have you tried setting the body margin's to 0?