all i am doing is a simple - creating a html page. however, i got 2 probs.
1) when i set the width in pixels:
i see width mismatch/conflict between IE8 and mozilla. (width:1024px)
this setting sets the width perfectly in mozilla (full screen size) but in IE, it exceeds the page/screen width and i have to scroll to the right to see some part of the page.
sample code:
html:
<div style="width:1024px">
2) when i set the width in percentage and resize the window:
the page shrinks and the whole page gets collapsed.
below is the code.
<div class="body">
<div class="header">
something
something1
something2
something3
something4
</div>
</div>
css:
.body
{
min-width:100%;
max-width:100%;
width:100%;
margin:0px;
background:grey;
float:left;
}
.header
{
float:left;
min-width:100%;
max-width:100%;
width:100%;
margin:0px;
background:#000;
}
how can i overcome this small glitch?
any help is appreciated.
Use a reset style sheet, or add the following to the css:
body,
html {
padding: 0;
margin: 0;
}
Generally,Internet explorer(lower version) browser scroll bar take some pixels. Just u put width 1000px or 100%, because 100% width all resolution and screen sizes appear full screen without scroll.
I think no need body and header float: left
Related
I have three container, left, middle and right. Width ratio is like 15%, 70% and 15%. I want to restrict max-width of middle container to 1000px.
This works fine as long as screen resolution is under 1428px. If screen resolution is greater than 1428px, 70% becomes greater than 1000px. So i need to write another rule for these bigger screen.
So middle container is now 1000px. How i can distribute rest space to other two container - left and right? A JavaScript solution gives a certain jump/shake in the browser. I want to avoid these shaking in browser.
OK so here is how things are. I suppose you have html something like this :
HTML:
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
So you have to apply css like this ( I don't know if you're satisfied with browser support but I think there is no css only another way)
CSS:
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.left,.right,.center{
float:left;
margin:0;
padding:0;
display:inline-block;
height: 100px;
}
.left,.right{
width:15%;
background:yellow;
}
.center{
background:red;
width:70%;
max-width:1000px;
}
#media(min-width:1000px){
.left,.right{
width:calc((100vw - 1000px) / 2)
}
}
https://jsfiddle.net/Lghms68y/ Here is a fiddle. NOTE : You'll have to zoom out the page to see the effect :)
I'm just trying to make my responsive div example work like here http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
The effect should be that if you resize the window, the div will change the width AND the height depending on the ratio (in my example 41,66%).
If you view my code from the beginning in a small window, the effect will work perfectly. But if you resize the window from large to small it will not work.
Can please somebody help me to find out what's going wrong? The height will not change in ratio.
The changing div is inside a container:
<ul class="slide">
<li>
<div class="wrapper">
Slides
</div>
</li>
</ul>
http://jsfiddle.net/Mg9ZB/
I know in Chrome it works well, but I'm using the newest version of Firefox.
I played around a little bit with your fiddle. At first I removed all values that influence the height of the wrapper and to center the text in the middle, I added padding of 20.83% to top and bottom.
*{
margin:0;
padding:0;
}
ul.slide{
list-style-type:none;
max-width:100%;
background:blue;
}
ul.slide .wrapper{
width:1200px;
height:0;
margin:0 auto;
background-color:red;
background-image:url('img/slideshow/state1.png');
background-repeat:no-repeat;
background-size:cover;
-moz-background-size:cover;
background-position: center;
}
#media only screen and (max-width:1199px){
ul.slide .wrapper{
width:100%;
height:0;
border: 0;
line-height: 0;
padding: 20.83% 0; /* 500px/1200px */
}
}
To see how the ratio of the wrapper changes I changed your JavaScript.
$(document).ready(function(){
var myVar = setInterval(function(){
$('p').html($('ul.slide .wrapper').outerHeight() / $('ul.slide .wrapper').outerWidth() +' ratio');
},1000);
});
Have a look at this fiddle to see what I changed.
I'm not sure if this is what you want, but if you resize now the ratio nearly didn't change. Found out, that I had to click "run" again in Firefox to get the right view after resizing.
This works for Chrome: http://jsfiddle.net/EtNgv/ I want to make it work in IE and Firefox.
Answers to other similar questions said that it is not possible - but did not mention that it was possible in Chrome - so I am hoping that someone could tweak what I have here to make it work in FireFox and IE10.
Desired outcome:
A container div that takes up 100% height - but no more.
Which wraps header and footer divs whose heights are determined by their content.
The footer div is always flush with the bottom of the page.
A middle div which stretches between the header and footer. If its content overflows it should scroll.
Image: http://i.stack.imgur.com/e7ddc.png
Current implementation:
CSS:
html,
body {
height:100%;
margin:0;
}
#container {
display:table;
height:100%;
width:100%;
}
#header,
#footer {
display:table-row;
background-color:#FC0;
height:2px;
}
#middle {
display:table-row;
overflow:hidden;
position:relative;
}
#content {
height:100%;
overflow-y:scroll;
}
HTML:
<div id="container">
<div id="header">header<br/>header line 2<br/></div>
<div id="middle">
<div id="content">Burrow under covers...</div>
</div>
<div id="footer">footer</div>
</div>
This works in Chrome, but in IE and Firefox if the content is larger than the middle div the container becomes larger than 100% high and the page obtains a scroll bar.
Well, I got close, but it still feels kinda sloppy. I can't imagine creating a page like this without using jQuery to determine the height of the screen, #footer, #header, etc...
Forked Fiddle:
http://jsfiddle.net/mRDux/
I got stucked on my css, i want to make my scroll bar fit on diffrent monitor resoution, and i use this css
div.scroll {
width:800px;
height:800px;
overflow:scroll;
}
but it will show differently in the other resolution, and if I change the width or height into 100%. the scroll bar just doesnt work. the scroll bar is still there but it shows the whole table, such a waste scroll bar.
any help will be appriciated
Try with this :
First set body style margin:0 as :
body{
margin : 0;
}
and the div.scroll as :
div.scroll
{
width:800px;
height:100%;
overflow:auto;
}
overflow:auto gives a vertical scroll to your div if the content is more than the height.
Have you tried using min-width and min-height?
HTML:
<div class="scroll">
<p>This is the scrolling area</p>
</div>
CSS:
div.scroll
{
min-width:800px;
min-height:800px;
overflow:auto;
}
.scroll p
{
width: 900px;
background: #cc0000;
}
Working Example:
http://jsfiddle.net/Aps83/
Not entirely clear on your desired outcome, but this will present scrollbars only when needed (small screen, content is too wide/tall to fit).
I have a main div at the center of the screen at the shape of the touch pad.
Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.
See the pic below, yellow window is the whole pad and the red window is the content screen.
Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?
Yellow's css:
#mainWindow{
margin-left:auto;
margin-right:auto;
background-image:url("../images/mainWindow.png");
background-size:100% 100%;
height:100%;
width:80%;
position: relative;
border-style:solid;
border-width:3px;
border-color:yellow;
}
The red one doesn't really have anything.
I hope you understood me. Thanks beforehand.
EDIT:
html code for the screens:
<div id='mainWindow'>
<div id='screen'>
</div>
</div>
In order for a DIV to have 100% height, you need to make its parents 100% height as well:
body, html {height:100%}
Slightly confusing prompt, but see if this works for you:
http://jsfiddle.net/T3MHZ/
HTML snippet:
<html>
<head></head>
<body>
<div id='mainWindow'>
<div id='screen'></div>
</div>
</body>
</html>
CSS styles:
html, body{
width:100%;
height:100%;
margin:0;
}
#mainWindow{
margin:0;
height:100%;
width:100%;
/* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
padding:50px 40px 50px 40px;
/* box sizing will make sure that the usable content size is minus the padding value */
box-sizing:border-box;
position: relative;
border:1px solid black;
}
#screen{
width:100%;
height:100%;
border:1px solid red;
}
By using a combination of measured padding on #mainWindow to account for the tablet border, and box sizing of border-box to assure exact fit of the #screen content, this should give you the flexible layout you're looking for.
Don't forget your viewport meta tag! ;)
I'm not sure if I'm understanding what you want correctly, but try
height: 100%;
on red.
min-height:100%;
You have no content, it's going 100% of it's parent content. Diodeus's answer would work as well for the same reason, if the body, html are 100% window height then the divs inside will look at that as content.
http://jsfiddle.net/calder12/Jq7xR/
<body>
<div class="container">
<div class="outside">
<div class="inside"></div>
</div>
</div>
</body>
.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}
To be honest even my brain is struggling with the 82.5% height to get the margins to work right =/ But I do believe that is what you're after.