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;
}
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.
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?
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}
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;}