I'm developing a mobile website that has essentially three divs a header, content, and footer. I want the header and footer to be fixed and the content scrollable if there is over flow. Right now my css is:
#header{
top: 0;
left: 0;
height: 8%;
width: 100%;
position: fixed;
text-align: center;
text-height:font-size;
}
#content{
top: 8%;
left: 0;
bottom: 15%;
width: 100%;
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}
#footer{
height: 15%;
width: 100%;
position: fixed;
text-align:center;
bottom: 0;
left: 0;
z-index: 1;
}
This works perfectly, however in the content I have some text fields and on a mobile device when the keyboard pops up the header and footer also get pushed up making the content field too small. Is there anyway to keep them fixed but not have them get pushed up when entering in text?
You could just hide the footer using JavaScript every time a textfield gains focus, since the fact that the website gets smaller is hard-coded in the operating system (which is responsible for showing the keyboard)
This can be done using jQuery, or for mobile even better (because smaller): zepto.js
Hope that helps
#content{
top: 8%;
left: 0;
bottom: 15%;
**width: 100%;**
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}
Change this highlighted text into px value.
% values adjust the object based on your browser size.
Related
I have 3 divs inside my div#all (simple html). Left - Main - Right.
Left & Right have just a background image (their content won't change).
Main div will have all my text etc.
Option 1: I need to have the left/right divs to expand their height (so my image background gets repeated) to reach the height that my divMain may have.
Option 2: I can do position:fixed my Left/Right divs as well so they stay in place when I scroll. My issue on this plan is that I cannot position/float my right div at the desired place.
Any working option is ok with me.
css code:
body{
margin: 0 auto;
padding: 0;
width: 100%;
background-color: #fff;
overflow-y: auto; overflow-x: auto;
}
#all{
position: absolute;
top: 0; left: 50%;
height: 100%; width: 1366px;
margin-left: -683px;
}
#temp-left{
position: absolute;
top: 0; left: 0;
height: 100%; width: 183px;
background: url(image/bg-lft.jpg) repeat;
}
#temp-right{
position: absolute;
top: 0; right: 0;
height: 100%; width: 183px;
background: url(image/bg-rgt.jpg) repeat;
}
#main{
position: absolute;
top: 0px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -500px;
text-align: justify;
}
If I properly understand your question i suggest you to use jquery
You can try this out.
$(document).ready(function() {
// Check if body height or width is higher than window height and width:)
if (($("body").height() > $(window).height())||($("body").width() > $(window).width())) {
$('body').css('background-image', 'url(image/bg-lft.jpg) repeat;');
}
else
$('body').css('background-image', 'url(image/bg-lft.jpg) no-repeat;');
});
I'm not finding any information on this. Might be because my approach is incorrect.
I'm having my image positioned absolutely under a div which uses full window width.
I'm using margin-left: 30%, so that images are always positioned 30% from the left border.
Everything else is set for responsive image handling..
I got the code correct that it scales like I want if the browser-window gets resized.
But because the image is not centered, the scaling happens "too late", so the right part will be hidden outside view.
Can I solve this with the scaling starting "earlier"?
Or using sth different than margin-left: 30% or left: 30% ?
see here: JsFiddle - Image out of view when resizing window
img.aaa
{
position: absolute;
max-width: 85%;
max-height: 85%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: 30%;
}
You can use margin-left: auto which will center the image. If it has to be a certain distance from the left, use a container div and the following css. This will prevent the image from going outside the body and getting cut off.
.container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding-left: 30%;
//text-align: center; //remove padding and uncomment this to center image in div
}
img.aaa {
max-width: 100%;
max-height: 85%;
box-shadow: 0 5px 10px rgba(0,0,0,0.8);
}
DEMO
I am trying to get into responsive design/layout with Bootstrap and CSS, but I am kind of confused of how could a change a box to be in the center of the screen.
I have a login pane that in Google Chrome has size 277x256 (that size could fit many smartphone screens). So I made a CSS like that:
.login .pane {
position: absolute;
top: 50%;
left: 50%;
margin: -128px -138.5px; /* half of the size in Google Chrome */
background: #f0f0fd;
background: rgba(240,240,253,0.90);
padding: 22px 32px;
}
You can see the complete code in: http://jsfiddle.net/H5Qrh/1/
=== UPDATE ===
I made a cleaner code and tried using Absolute Centering instead of Negative Margins:
.center-pane {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 277px;
height: 320px;
}
My updated Fiddle: http://jsfiddle.net/H5Qrh/3/
Now the footer is above the box.. that shouldn't occour.
You're using absolute but I'd change that to fixed (this will work on both).
I set your height and widths, but you can change them, and because you want it responsive, you can change them with a few media queries. For example mobile you might want width to be 90% or 100%.
.login .pane {
position: fixed; /* could be absolute */
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 300px;
height: 250px;
}
Here's a jsfiddle
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.
here is my site
http://iadprint.com/about
i am trying to make the menu tag and the colright div to have a height of 100% and stick to the footer div pushing down to the bottom. but no matter what i try nothing works. i have tried validating the html but only 3 errors exist which arent that important to fix. what ami doing wrong?
You need to use faux background technique, CSS (possibly with table-cell) or JavaScript.
I'm a fan of fixed layouts for this sort of scenario where you want a footer to always appear at the bottom of the window:
header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 130px;
}
nav
{
width: 960px;
margin: 0 auto;
}
article
{
top: 130px;
bottom: 120px;
left: 0;
width: 100%;
position: fixed;
overflow: auto;
}
footer
{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
}