I am creating a website that has a jquery image slideshow as the background, and on top of the slideshow is a navigation bar, a blank area in the middle of the page so that the image shows through, and at the bottom underneath the slideshow is some content and a footer. Similar to Need Supply's current website (http://needsupply.com/).
My main difficulty, is that I'd like to have the images in the slideshow clickable but since the slideshow is behind all of the divs (z-index: -1), it cannot catch any clicks since it's being covered by my main content divs (page, header, footer).
I tried replacing the slideshow with a simple linked image but it still cannot be clicked, so I know it is not anything to do with the slideshow code.
Here is the basic structure of my site:
<body>
<div id="slideshow">
....
</div>
<div id="page">
<div id="header">My Header</div>
<div id="content">Some Content</div>
<div id="footer">My Footer</div>
</div>
</body>
css:
#slideshow{
width:100%;
height: 620px;
position: absolute;
top:0;
left:0;
z-index:0;
}
#page{
width: 980px;
margin: 0 auto 2px auto;
}
Any help would be greatly appreciated. Let me know if you need any more information on my end.
You just need to remove the #page wrapper and position #content and #footer absolutely at the bottom. That way there would be no div covering the main area of the images (#slideshow) and so you would be able to click it. The #page, #content and #footer divs would remain unclickable.
Related
I have inserted the footer but when I open the preview of the web page the footer is at the bottom, but once I scroll down it is stuck to one position in the page.
I don't want it to be fixed or sticky, just want it to viewed once the user scrolls to the bottom of the page.
Here is the footer div tag in my html
<div id="footer">
FOOTER
</div>
and the css for this footer is as follows
#footer {
height: 50px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
}
https://jsfiddle.net/5cewo3h2/
I don't know whether I have a problem with other positions on the page causing the footer to stay in one position and not move to the very bottom of the page, but any help on this would be appreciated.
You need to move the footer element into the grid.
Move:
<div id="footer">
FOOTER
</div>
to a spot in between the last two divs in the HTML:
</div>
<div id="footer">
FOOTER
</div>
</div>
</center>
DEMO: https://jsfiddle.net/5cewo3h2/1/
Get rid of absolute positioning. Just put the div at the bottom (under your content divs) and it'll render under them.
#footer {
height: 50px;
left:0px;
width:100%;
}
This problem is related to how i can show div with absolute position regarding the div, Not the page.
I have div#Div_Report, Which has multiple page div#page1, div#page2,..., And each page div has content with same css.
My problem is if i give absolute position to page's div.Div_ClientName, Then div#page2 data is overlapping to div#page1.
I know this can easily fix by relative position, But due to some reason i cant use relative position.
So how we can set page content with in page div with absolute position?
Here is my HTML:-
<div id="Div_Report">
<div id="page1">
<div class="Div_ClientName">Childrens Network - Hendry Glades</div>
</div>
<div id="page2">
<div class="Div_ClientName">Childrens Network - Hendry Glades</div>
</div>
</div>
CSS:-
.Div_ClientName{
top:180px;
}
.Div_ClientName{
position:absolute;
}
.Div_ClientName{
left: 175px;
}
#page2{
margin-top:200px
}
Fiddle Link
Try this CSS:
#page1, #page2 {
position:relative;
float:left;
}
... it isn’t, by any means, a nice solution ... but it solves the problem with things overlapping.
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
Could someone please help me position my footer correctly in my webpage?
I have the following layout:
This is how I want the footer to behave:
The footer should be positioned at the bottom of the page when the content is empty.
The footer should be 'pushed' down when the content exceeds the height of the page.
here is my HTML:
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
/* This is outside of the container as I want the background
to stretch across the top of the webpage */
<div id="menu">
<div>
/* This contains an unordered list which is restyled as a series of links.
The reason it is contained in inside the menu div is because I want this
content to be centred. /*
</div>
</div>
<div id="page-container">
<div id="header">
<h1>Website title</h1>
</div>
/* This is floated to the left of the content area. */
<div id="content">
#RenderBody()
</div>
/* This is floated to the right of the content area. */
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
<div id="footer">
My footer content goes here.
</div>
Please note the following:
The content and header is contained in a 'Div' called 'page-container'.
The content is made up of two Divs which are floated to the left and right of the content area.
The menu is outside of the page-container div. This is because I want the menu background to stretch across the top of the page (like the Stackoverflow menu)
I am aware that there are many similar questions on Stackoverflow and that a Google search will return a large amount of results.
The thing I have noticed whilst trying to adapt the samples I have found is that they usually depend on a very specific html structure (E.G. everything but the footer is in a container) that does not match mine. No matter what I try I end up with something that doesn't work (E.G. the footer is positioned below the screen bounds when the content is empty or is not moved down when the content exceeds the page).
Update
I can get my footer to stick to the bottom of the page but it is not pushed down when my content expands. I think this is because my content is made up of two floating elements.
Most people seem to be pointing me to tutorials they have found on Google (as already stated I have read most of these and already attempted to adapt them).
I have come to the conclusion that I am going to have to restructure my HTML to get this to work; the point of my question was how do I do this with the HTML I already have? So much for separation of concerns!
A quick google search gave me a few links that you'll find useful.
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I would stick to with the first one, but either should do what you want.
I made a fiddle: http://jsfiddle.net/karlroos/ZVkYC/ (sorry for the badly organized CSS)
Take a look. You'll have to make some workaround for the min-height: 100%; in older versions of IE, presumably with JavaScript.
As mentioned in the edit to my post, I ended up having to alter my HTML slightly:
<body>
<div id="page-container" >
<div id="menu">
<div>
</div>
</div>
<div id="layout-container">
<div id="header">
<h1>Website title</h1>
</div>
<div id="content">
#RenderBody()
</div>
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
</div>
<div id="footer">
</div>
My CSS is based on CSS found here (This same link was posted by a couple of people but I was already using this anyway!)
The solution is about 99% effective. My footer sticks to the bottom of my page when the content area is empty and is also pushed down when the content grows larger than the screen but I now have a permanent scrollbar as my page height seems to be off (moving the mouse-wheel scrolls the page up and down by a single pixel).
I have so far been unable to get rid of this so I am begrudgingly accepting this as a complete solution unless anyone else can point me in the right direction.
Update
It seems the 1 pixel offset was caused by my footer having a 1 pixel top border. I simply adjusted my CSS to account for this and the scrollbar disappears when the content does not completely fill the screen.
#footer {
margin-top: -151px;
height: 150px;
}
Try editing your CSS to include something like the following:
#footer {
width: 710px;
height: 50px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
}
Then call it in your footer.
Wrap your div-s in a wrapper:
#wrapper {
width:100%;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
and use the following CSS for your footer:
#footer {
width: 100%;
height: 80px;
background-color: #ccc;
position:absolute;
bottom: 0;
}
Have you tried setting the body to position:relative and the footer to position:absolute with bottom:0 ?
Here is a preview of what I have so far:
The red area is part of the design and should always scroll down with the design. So when the content expands, the footer, and that red bar go with it. This should be at the very bottom of the window.
I tried positioning it absolute and it worked perfectly, except when I re-sized my browser and made it smaller, it would stay at the very bottom but would only work when the browser is in full screen.
What I am doing right now is just positioning it relative with top:-120px; and then as you can see, it gives me the extra whitespace that I want to get rid of.
footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }
Not sure what else code to paste, I think that's all everyone needs. The rest is self explanatory. Does anyone have any suggestions on how to approach this?
My goal is to get it just like the image above except without the whitespace, pushed down at the bottom at all times, even when the browser is re-sized.
we use a sticky footer as well - here's the basics:
<div id="container">
<div id="header">Header</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div>
<div id="footer">Footer Here.</div>
Note the clearfooter before the end of the container. Then with CSS you need something like this:
html, body {
height: 100%;
}
#container {
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
.clearfooter {
height: 330px;
clear: both;
}
#footer {
height: 330px;
position: relative;
}
The only downside is that this is a fixed height footer. Don't forget, too if you add any padding to your footer that increases the height and your height on the footer, clearfooter and negative margin on the container need to be adjusted accordingly.
If you happen to need it to work in IE6 you'll need to target the container however you'd like and use:
#container {
height: 100%;
}
Hope that helps!
Sticky footers can be tricky and adding an over lapping background can be even more tircky. What you might want to try is creating a Sticky footer and applying the background image to the body or container background repeating-x and position bottom.
Are you able to create a jsfiddle and I can show you the technique I mean.
When you are offsetting something with position: relative, the element still "reserves" the space it would have occupied otherwise - in your case, the bottom area where you get the whitespace. Set margin-bottom: -115px on your footer to tell it not to do that.