I'm having trouble figuring out how to make the menu and footer expand across the screen...as of now they only are body width 960px...
page link: www.kvf.fo/vix
I saw your page.
you have wrapped your footer and main content inside body and you have given body width:960px;.
so the footer taking 100% width of body i.e 960px.
To get the desired result don't wrap footer inside body.
use different div for footer and main content of the page.
And assign the div width:960px; which wrapped main content.
Don't give dody width:960px;
You can just simply set the width to 100% in css, nothing more.
#menu {
width: 100%;
}
#footer {
width: 100%;
}
Also to get rid of the spacing on the left: just do:
body {
margin: 0px;
}
Which gets rid of all the nasty margins.
body style has a
overflow: hidden
You may want to review how you have structured your page
Related
I have an HTML page with
html,body{ height: 100%; }
But I have more content in the page than it can fit at 100%, so there is a vertical scroll bar. This is fine, but right before </body> I have a <footer>Some text</footer>. My problem is, the footer appears in the middle of the screen even though it's supposed to be showing at the very bottom of the page. I checked, there is no margin applied to any element that would push the footer that high up in the body.
What's weird to me is, when I use the Chrome Developer tools to inspect the page it shows the area covered by the body not to be the 100% of the scrollable area. This area is 100% of the page if there was no scroll bar.
I can't provide the markup, it's a legacy ASP.Net application and it's messy.
Try min-height: 100% instead. On html and body. Also it appears footer is absolutely positioned, but min-height should fix this.
If it doesnt afterwards then apply padding-bottom to body and increase it until footer is where you want it.
It depends a bit on how you want to solve this. If you know the page will always be shorter than the content you could move the footer down to the bottom with:
footer {
position: absolute;
bottom: 0;
}
Alternatively this is a task for flexbox (provided you can drop old browsers). Something like this should do the trick:
body {
display: flex;
flex-direction: column;
}
.main {
flex-grow: 1;
}
I am working on a website, at the moment on a sign-up page. Its all perfect, right until i realize some very annoying. I have kinda 2 elements on this page. A sign up div, and an img, for the logo in the top. And it is not even close to fill the whole html page. But it still adds the SCROLL BARS, and i can scroll like 20 px up and down, and from side to side. Very annoying plz help
You want to add margin: 0; to your body.
It's already 100% wide, and the margin pushes the width beyond the space available on screen. This causes a vertical scrollbar, and that, in turn, causes a horizontal scrollbar.
This can be fixed in two ways
Either change the width and height of the body to auto as:
html, body {
width: auto;
height: auto;
background: #11BD83;
}
JsFiddle
Or as suggested by #Per Salbark add margin : 0 to the body
html, body {
width: 100%;
height: 100%;
margin : 0;
background: #11BD83;
}
JsFiddle
I try to make a responsive design but when I resizing its getting messy.. My css code is until line 15 the other is the menu css Click here for code
So my code is only:
html,body {
margin: 0;
height:100%;
}
main {
margin:0;
height: 85%;
}
body > footer {
overflow: hidden;
text-align:center;
background-color:#dedede
}
Here is the jsFiddle: http://jsfiddle.net/shaansingh/kac8p/6/. I cleaned up your footer code a little (you can leave that there though). I made the footer a class and wrapped it in a <div>. Then, I gave the footer a margin on the top. This makes it so the footer doesn't "mess up" when resized. Go ahead and look at the full size fiddle and resize your browser to see the result: http://jsfiddle.net/shaansingh/kac8p/6/embedded/result/
EDIT: I have a solution for what you want. This fiddle shows the footer all the way at the bottom of the screen, below the browser's scroll. I utilized things like width, height, and clear for this CSS. http://jsfiddle.net/shaansingh/kac8p/13/embedded/result/
I am trying to achieve a website layout that works like this: http://tzd-themes.com/gebo_admin/index.php?uid=1&page=dashboard.
And I would like to add a footer.
The way the footer would work is the following: when you scroll to the end of the page, there is a footer that take all the width of the page, and pushing the sidebar up if it needs to, causing the sidebar to shrink. So essentially what I am tryng to do is specify the height of the sidebar as being the distance bewteen the bottom of the header and the top of the footer, with overflow: auto;.
You can fiddle here (with more explanations):
http://jsfiddle.net/xK4B5/
Have a header, main section, and footer, the main section will contains the content and the side bar. Set the sidebars height to 100% (if that doesn't work for whatever reason, position it absolute - left:0,top:0,bottom:0,right:auto) this will cause it to take up however much space your main content is height wise. So if your content is short (causing the footer to come up) the sidebar will also shorten.
#sidebar {
position:absolute;
left:0;
top:0;
bottom:0;
right:auto;
width: 200px;
}
#content {
margin-left: 200px;
width: 700px;
}
Should get you close to your desired effect.
I am playing around with bigcommerce at the moment and I am trying to recreate the footer structure for the header. You can see here:
http://thespeedfactory.mybigcommerce.com/
If you look at the footer, how it is full width but the content is central within it.
I want the header to be exactly the same, black with pink/white highlights.
Ive tried moving around the structure within bigcommerce, but I am having a brain failure in getting it to do and look how I want despite knowing it is based around containers and margins.
Any guidance is appreciated.
If I understand you correctly, you want:
the header (#Header) to span the entire width of the page
the footer (#ContainerFooter) to span the entire width of the page
the header (and footer to have the same styling (colors, etc.)
the content area (#Wrapper) to stay a fixed width and centered on the page
To do this, add the following css:
#Container {width:100%;}
#Header {width:100%; margin:0, auto;}
The above css allows the header (by way of its parent container) to stretch the width of the browser page. You'll notice #Wrapper is shifted to the left. Add this:
#Wrapper {margin:auto;)
This centers the #Wrapper.
Your structure should be in place and now you can add your colors, etc. to the #Header to make it match the footer.
This is pretty basic html/css.
Just create a div, place a container in it and start styling.
HTML:
<div id="header">
<div id="container">
<p>content</p>
</div>
</div>
CSS:
#header {
width: 100%;
height:400px;
background:black;
position:absolute;
border-top:3px solid #ff25a7;
}
#container {
width:90%;
height:300px;
margin:0 auto;
}
#container p {
font-size:30px;
padding:10px;
color: #ff25a7;
}
Here's a jsFiddle to help you get started.
You can try giving the header the same class as the footer and afterwards (if the footer's position is absolute bottom), set the position to absolute top:0px;