OK I have a fixed position header on my page. It is working correctly and everything... But I have a big problem with it -> When I try to make the browser window smaller, the content (in this case, the menu) gets out of the header's div.
How could I fix this? Is there any way to do it?
EDIT:
I want the header to stay in fixed position.
[if you want to check the problem out in action, go to: http://www.chilledlime.com and then make your browser window smaller]
Thanks in advance.
try this,
#logobox ul {
display: inline;
list-style: none;
padding-top: 15px;
width: 65%;
}
and you can add or not an "overflow:hidden" to "#logobox", it depends of what you are looking for
Remove position:fixed from #logobox:
#logobox {
background: none repeat scroll 0 0 black;
border: 0 none;
height: 60px;
margin-bottom: 20px;
margin-top: 10px;
position: fixed; <----- this -----
width: 100%;
z-index: 100;
}
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 am working on this site: https://dev.notevenpast.org/brian-levack-possession-and-exorcism/
In this page I am attempting to center an image within a div with an id of monthly-feature-banner. Here are the stylings for the banner and the image:
#monthly-feature-banner {
width: 100%;
}
#monthly-feature-banner img {
display: block;
margin: 0 auto;
}
Oddly, though, in both Chrome and FF the image margins are not equal.
Question: Why is this happening?
Question: What can I do to fix it?
EDIT: The answer below suggesting text-align: center; had the same issue as margin: 0 auto; It should work, but it doesn't. Also, the box-sizing fix helps if I remove it from the entire page, but it has side effects that make it impractical.
A comment below from #Alohi correctly pointed out that adding clear: left; to the containing div along with the margin: 0 auto; has the desired effect. I will accept the first answer that contains that information.
Remove #monthly-feature-banner img and add text-align: center to #monthly-feature-banner
Unless you intend to modify #monthly-feature-banner to something else the width will already be 100%, so width: 100%; or any display:block; styles you have are useless, a div itself is a block.
In short:
#monthly-feature-banner {
text-align: center;
}
Fiddle: http://jsfiddle.net/Gs6rG/
If the image continues to be pushed to the right you could try adding clear: left;, which disallows floating elements on the left.
Try this
#monthly-feature-banner {
width: 100%;
margin: 0 auto;
}
http://jsfiddle.net/talmuda3/s9QyR/
footer {
margin-top: 1em;
width: 100%;
height: 20em;
position: relative;
bottom: 0;
left: 0;
}
The layout of an offline website is tricky. The content overflows into the footer.
Part of the code is as above.
How can the content be adjusted so the footer remains at the bottom, and the content stretches across the site without overlapping the footer. Please be gentle. Checked Chris Coyier's site for any tips - might just have missed something. Can anyone help?
You're pushing the article down with the top: 12em declaration. You should give the footer the same property, which fixes the issue: http://jsfiddle.net/s9QyR/1/
you should also push footer top:12em; that will add footer in right position. demo
I think this is what you're after - jsFiddle
article {
margin-top:12em;
width:80%;
height:100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
padding: 1em;
z-index: 2;
background: transparent;
overflow: visible;
}
footer {
margin-top: 1em;
width: 100%;
height: 20em;
}
It seems that changing the positioning broke the natural flow of your elements.
You may want to try this method to avoid having to position everything down the line.
So this is our website http://www.greeceinsiders.com
if you resize the window you will see that the menu at the top-right gets out of the top-bar and it is ugly. How can I fix that? Can I play with the position of the list?
Bonus: If anyone visits Greece he gets a free experience for helping us! :)
An easy fix is making the following changes in your CSS:
#top-bar > .menu {
color: #FFFFFF;
/* float: right; */ /*float: right removed */
height: 48px;
margin-right: 40px;
width: 490px;
position: absolute; /* these are new additions */
right: 0;
top: 0;
}
It's the pageTitle element that's causing it to get out of shape.
It seems like an empty element - can you just remove it?
I'm having issues with the margins in browsers (other than Firefox) on this page:
http://jumpthru.net/newsite/commentary/
Here is the CSS:
#container3 {
float: right;
margin: 0 -240px;
width: 100%;
}
#content3 {
margin: 0 210px 0 -45px;
width:500px;
}
#primary, #secondary {
left:920px;
overflow: hidden;
padding-top: 40px;
position:absolute;
width: 220px;
}
Kind of a strange way to build up the page..
I recommend you to create a 2 column layout in main2..
Left for menu and right for the comments header, with beneath that the content and the recent comments div..
And, start using clearfix: http://www.positioniseverything.net/easyclearing.html
I fixed the issue in Chrome by changing this CSS:
#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}
I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.
add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.
#main2 {
position: relative;
...
}
#primary, #secondary {
right: 0;
...
}
EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.