i have an angular project and my view works fine in chrome and firefox but in IE 11 when the scrollbar appears the view doesn't resize automatically so i have some component covered by scroll bar
the menu css:
#menu-principal .navbar-lower {
text-align: center;
position: fixed;
top: 40px;
margin-bottom: 0;
height: 35px;
min-height: 35px;
right: 0;
left: 0;
z-index: 1029;
}
solved by adding
#-ms-viewport{ width: auto; }
Related
I have a site that is a one page scroll type. I have a fixed menu at the top and this works fine on desktop browsers. It does not work on mobile however, and the menu just stays at the top and when you scroll down it disappears.
My CSS for the header is:
#header {
background: url('../_images/menu_bg.png');
padding-top: 10px;
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 80px;
}
line: 1092 of your styleMobile.css you have this css snippet:
#header {
positioN: relative;
}
Removing that fixes the issue.
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 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.
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;
}
i have problems with the alignment of divs.
My layout consists of one div view_central which contains three other divs namely view_central_top, view_central_left and view_central_right. Chrome and FF render the wanted result: a top div with a bannner, the navigaiton to the left and the content to the right.
IE 7 offsets the content div view_central_right 10 px to high thus covering part of the banner div view_central_top.
The css code looks like this:
.view_central
{
position: relative;
width: 827px;
height: 100%;
}
.view_central_top
{
position: absolute;
top: 0xp;
left: 0px;
height: 118px;
width: 828px;
}
.image_borderless
{
border: 0px none;
}
.view_central_left
{
position: relative;
left: 0px;
top: 118px;
width: 187px;
height: 683px;
background: #C7D2EB;
font-size: 11px;
}
.view_central_right
{
position: relative;
left: 0px;
top: 118px;
width: 640px;
height: 683px;
background: #FFFFFF;
}
Can anyone help me out. Thanks.
My first thought -- browser dependent padding or margins. A CSS reset (at least for div elements) might be worth trying.