I am building an web application .
I have added a footer to the page .
The footer become larger in Firefox ( horizontally ). Any possible reasons ?
The footer is a sticky div as mentioned here - http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Container CSS -
.container{
background: #ffffff;
width: 90%;
min-height: 100%;
height: auto !important;
height: 100%;
background: #FFF;
margin: 0 auto -60px;
max-width: 1200px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 768px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
}
Footer CSS -
#footer {
height: 60px;
background-color: #F0F0F0 ;
width: 90%;
margin: 0 auto 0;
-moz-border-radius: 2px;
border-radius: 2px;
}
Just add these two property of footer element as of container element
#footer
{
max-width: 1200px;
min-width: 768px;
}
remove -60px in margin in css to solve this issue of fixed footer UI design
Related
I'm having issues aligning a website to the center on mobile devices - it is currently left aligned.
The website can be viewed here†.
I have viewed this question but it has not helped; when <meta name="viewport" content="width=device-width, maximum-scale=1.0" /> the alignment does not change. The margin is set to 0 auto however the problem remains.
† The website no longer exists, link changed to Internet Archive but CSS not preserved.
You use a fixed width:
#unfloated-container{
width: 1000px;
}
You can use "CSS media query" (try googling for that) to set different size for smaller screens and keep the current size for screens you choose.
You may also need to set different margins (and even more different settings) when the page is viewed in smaller screens!
EDIT 1: My comment from an other answer, copied to describe the possibilities for changing floats, width and all other needed settings (styles) for specific screen sizes:
It seems the HTC tries to fit the browser to avoid horizontal scroller. But the problem remain in your CSS, so it seems better to try css media queries (as proposed in my answer) and adjust the style for mobile devices only! This way you can remove floats (float: none), set the width to "width: auto" and adjust margins where needed!
I believe this has better fixed your alignment issue but the banner image is still messed up a bit as it was in your original link:
#unfloated-container{
margin: -600px auto 0 auto;
padding: 0;
width: 80%;
height: 100%;
}
#container{
margin: 0;
padding: 0 0 0 0;
width: 100%;
}
/*~~~~~ Banner ~~~~~*/
#banner{
margin: 10px 0 0 0;
padding: 0 0 0 130px;
width: 100%;
height: 280px;
float: left;
text-align: center;
}
#banner-image{
margin: 10px 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 300px;
background-image: url(../images/banner.jpg);
background-repeat:repeat-x;
}
/*~~~~~~ Links Bar ~~~~~*/
#links{
margin: 300px 0 0 60px;
padding: 7px 0 0 5px;
width: 75%;
height: 100px;
font-size: 20;
}
/*~~~~ Content Area ~~~~*/
#content{
margin: 0px 0 0 0px;
padding: 104px 55px 0 80px;
height: 550px;
width: 865px;
float: left;
overflow: scroll;
overflow-x: auto;
overflow-y: auto;
}
You need to set BOTH the viewport width (as you suggested in your question) AND your CSS properties.
To have a mobile responsive website, you need all your css properties to be percentage based. For example, you currently have a css property named #unfloated-container set to 1000px.
That means that your site will always be 1000px wide. Try changing it to 80% instead (or any % you need).
Hope this helps!
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.
I can't seem to figure this out. I have a footer that I want to display at the bottom of the page regardless of the height of the container and regardless of the screen size. It seems that on some larger screens the background scrolls all the way to the bottom of the page and the footer is in the middle and on regular 13 inch 17 inch screens it's ok.
CSS:
#container {
background-color: #ffffff;
min-height: 320px;
margin: 100px auto;
width: 960px;
max-width: 100%;
}
#footer {
background-color: #FFFFFF;
width: 100%;
height: 50px;
position:absolute;
margin-top: 140px;
}
This should get you started:
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Looks like they're setting
min-height: 100%
height: auto !important
on the main content section, then adding the footer element after it.
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
CSS Centering a div in different Screens
I presume the answer to this question is really simple but i am stumped.
I am trying to get a website positioned in the center of the screen like the Guardian website - http://www.guardian.co.uk/. I assumed i was right to use a left and right border, however this has made positioning the footer difficult.
Having looked at the guardian website and using the firefox inspect element capability it appears they are using no divs on the left and right of the screen whatsoever. In fact there container appears to just be in the middle of the screen.
So i suppose my question is. How do you position a container like so?
.container {
/* remember to set a width */
margin-right: auto;
margin-left: auto;
}
Here's the fiddle: http://jsfiddle.net/d9yBs/
You can also combine to 2 margin properties, and use the shorthand:
margin: 0 auto;
This'll set the top & bottom margin to 0, and the left & right to auto.
quick way is:
#container
{
position: absolute;
left: 50%;
top: 50%;
height: 200px;
margin-top: -100px /* half of you height */
width: 400px;
margin-left: -200px /* half of you width */
}
another way for only centering only is
#container
{
width: 400px;
margin-left: auto;
margin-right: auto;
}
HTML
<body>
<div class="page_wrap">
</div>
</body>
CSS
.page_wrap
{
border: 1px solid black;
width: 250px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
body
{
text-align: center; /* required by some browsers */
}
http://jsfiddle.net/pc7AY/ check it out.
It's just a trick with CSS:
margin: 0 auto;
From the guardian site:
div.InSkinAlignCenter {
margin: 0 auto;
}
As far as I remember position property should be set to relative
Try this:
CSS:
.page {
width: 200px;
background: #FF0000;
margin: auto;
}
HTML:
<div class="page">
This is the content.
</div>
Also, check this jsFiddle!