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/
Related
There is a white line on the right side
First, I tried to set up
section{
width: 100%;
}
then
#media (max-width:420px){
section{
width: 100%;
}
}
Didn't help.
Link for full code: https://codepen.io/andrzej-hnatiuk/pen/xxXWYjx
In codepen some pictures won't open, but in VScode they do.
How I can fix this?
Your navigation (<section id=section) is too wide, which forces to make the page wider as the screen is. The block below does not grow along.
Solution: let your navigation break on multiple lines, or use a hamburger menu. It depends on how you would like your page to look.
Your problem is your section with #section id. under a specific width size it won't be smaller more, so then content will get smaller and create a white gap on left. you can decrease your font-size on media query for section #section or using wrap flex box to wrap your section #section under a specific width size or another thing like left panel etc.
This problem happens because the content is overflowing, simply you can add this lines of code and everything will work out.
*{
box-sizing: border-box;
margin: 0;
}
section,footer{
overflow: hidden;
white-space: wrap;
word-break: break-word;
}
here is a new pen Codepen
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
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'm trying to make my sidebar stretch to the bottom of the page. I've succeeded in making it stretch but now my footer it getting in the way. For some reason I don't know, my footer is appearing before the content div has ended, and cutting off the sidebar, as well as making the page messy.
As you can see, as soon as the footer appears, the sidebar (grey box) stops and the content is overlapped.
Could anyone point out the code that is doing this and a fix?
Setting min-height:100%; results in a minium height of 100%, adding an additional height:100%; is obsolte. The browser calculates the height of elements relative to the closest block-level parent element. At the top level, the height will be relative to the browser window height.
Remove the height: 100% declarations where you have also specified a min-height:100%;, and your problem will be solved: #globalDiv, #topcontentWrapper.
remove the height from this piece of css:
#topContentWrapper {
height: 100%;
min-height: 100%;
}
change to
#topContentWrapper {
min-height: 100%;
}
I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser keeps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.
Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?
http://www.electric-drumkit.com/404.php
There's an example of the page so you can get a better idea of what I mean.
The way to do it here is to:
Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.
Move these rules from body to #wrapper:
margin: 0 auto;
position: relative;
width: 960px;
Add this new CSS:
body {
min-width: 960px;
overflow: hidden;
}
Add this to get horizontal scrolling back when the window is less than 960px wide:
html {
overflow: auto;
}
Here's a live demo so you can quickly see if my answer will have the desired effect.
Tested in Firefox, Chrome, IE8.
Put the image into a div like this:
<div class="image"></div>
And in CSS you can write:
.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}
In this way, your div will render the image as a background, into a div, and i think there will be no scrolling.