My css skills are limited so I hope someone can help me with this...
I am using Foundation and I have 2 divs with 2 images.The left div overlaps the right div. When the browser is resized, the left image loses it's original position.
This is what the site looks like when the browser is expanded.
And this is what happens when I resize the browser.
This is the code that I currently have on the left image (wireframe image)
.wireframe-img {
display: block;
float: left;
margin-top: 50px;
max-width: 815px;
overflow: hidden;
padding-left: 50px;
position: absolute;
width: 100%;
z-index: 1
}
And the image on the right (ipad) is in a div with this code:
.small-7 {
position: relative;
width: 58.3333%;
}
.column, .columns {
float: left;
padding-left: 0.9375em;
padding-right: 0.9375em;
}
.right {
float: right !important;
}
I basically want the "wireframe" image to scale down and not lose it's original position when the browser is resized.
Rather than overlapping the image, it's better in your case to just have two separate images next to each other that match up pixel perfect.
Then just have one image like this:
http://puu.sh/6UTqY.jpg
and the other like this:
http://puu.sh/6UTqa.jpg (Roughly)
Unless there's another reason as to why you're keeping that images separate and trying to overlap them?
Related
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I've looked around and haven't managed to find out how to do this, even though it should be relatively easy. I have a page I want to scroll sideways, split into halves which both fit the window size. That part is easy enough, but what I then want to do is have the right-hand div (which is hidden on page-load) to stick out over the left div slightly, by 40px or so - so you can see the edge of it.
Here's the basis of how it is already - jsFiddle
I hope the question makes sense. I've tried a bunch of combinations of position:absolute; so far, but no joy. Any help would be awesome.
If I understand you correctly, you want the right hand div to 'peek' over the edge of the left hand div, so that it's discoverable by the user even when it's outside the viewport.
The easiest way to do this is to set a position: relative on the element, then set a left value of -40px. This will make the element 'peek'. See here: http://jsfiddle.net/NUWqE/1/
I might have misunderstand exactly what it is you're looking for but does the following solve your problem, without having to bump the div around with left. That way there's no mixing of pixels and %'s and you won't have to address the problem of white space on the right side of #right.
#wrapper {
width: 200%;
position:relative;
}
#left {
width: 45%;
float: left;
background-color: red;
}
#right {
width: 55%;
background-color: aqua;
position: absolute;
right: 0;
}
So if you're looking for a fixed width "peek", how does the below answer suit:
http://jsfiddle.net/NUWqE/1/
#wrapper {
width: 200%;
position:relative;
}
#left {
float: left;
width: 50%;
background-color: red;
margin-right: -40px;
}
#right {
float: right;
width: 50%;
background-color: aqua;
position: relative;
padding-left: 40px;
}
You'll obviously have to adjust the padding of elements inside #right but you would probably be doing that any way depending upon how you'd like to style the content. Hopefully this is what you're looking for.
I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).
Example: http://jsfiddle.net/VrfAU/4/
Edit: I've made some images to try and make this more clear.
Small content
Large Content
I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).
http://jsfiddle.net/UYpnC/5/
Try something like this:
.main { min-height: 500px }
http://jsfiddle.net/VrfAU/8/
I used the css property z-index, which controls the stack order to fix this:
I also used position: fixed to fix the header and footer:
I put
#header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}
.main_wrap {
display: table;
width: 100%;
height: 100%;
margin-top: -88px;
vertical-align: middle;
position: relative;
z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}
I have designed a website and am a little bit stumped right now.
If you view the website at:
http://www.noxinnovations.com/portfolio/charidimos/
If you change the size of the window you will notice the Navigation overlaps the logo/header.
Anyway to change this? What I want to do virtually is to make the window have a scroll bar appear if that is possible.
Any ideas?
Thank you :-D.
It's your width: 100%; in your #header element that's causing your strange overflow behavior. Place your #logo and #navigation elements inside of another div with a fixed height and width that sits inside of the #header, then give your #header the property overflow: hidden; and that should fix you right up.
If you want your navigation not to overlap, you can do the following
#navigation {
width: 500px;
height: 100px;
padding-top: 52px;
position: fixed; // CHANGE FROM RELATIVE TO FIXED
left: 770px; // ADD THIS BIT OF POSITIONING (ADJUST AS NECESSARY)
float: right; //REMOVE THIS FLOAT
text-align: center;
vertical-align: middle;
}
I have some some rows of image thumbs inside anchors inside a div, one div for each row, like this:
<div class="row"><a><img></a><a><img></a><a><img></a></div>
<div class="row"><a><img></a><a><img></a><a><img></a></div>
The images have different proportions, some portrait, some landscape orientation. The max dimensions for the thumbs are 150px (wide or tall), and they are always either 150px wide or high.
I want all images to align with the bottom of their parent .row div.
So if there is any portraits in a row, any landscapes will align at the bottom and have some space above them.
To have the images align at bottom, I position them absolute, and relative to their anchor
To do this, I use the following CSS:
<style>
div.row {
float: left;
clear: both;
}
.row a {
position: relative;
float: left;
width: 175px;
}
.row a img{
position: absolute;
bottom: 0px;
}
</style>
The above works fine and as expected, but it's got a flaw that I'm trying to fix: It requires the height of the relatively positioned anchor tags to be set to a specific size.
I don't want that, because if a row contains only landscape thumbs, I do not want it to be unnecessarily high.
I want each .row div to be the height of the highest image it contains.
If there are only landscapes in a row, the height of that row will be just that of the highest landscape.
I though I would be able to fix this by setting the height if the elements to 100%:
<style>
.row a {
position: relative;
float: left;
width: 150px;
height: 100%;
}
</style>
That would then be 100% of its parent, the .row div. But for some reason, this only works if I specify the height of the .row div, and then I have the same problem (all rows equal hight regardless of actual content:
<style>
div.row {
float: left;
clear: both;
height: 150px;
}
.row a {
position: relative;
float: left;
width: 150px;
height: 100%;
}
</style>
However, since the .row div grows dynamically with its contained images, it actually has the height I'm trying to refer to with my height : 100% for the a tag. But for some reason it does not work.
Why? What am I not understanding here, and how to do this?
I spend many hours on this before turning here, hopefully someone has the golden answer.
It's possibly easier to use inline-block instead of floating. Something like this:
http://jsfiddle.net/cvQAZ/1/
Or do you need the links actually have the same height? Then try a "table" layout (not supported by IE6):
http://jsfiddle.net/DpvgR/1/