I have a fixed div setup using this:
.box {
position: fixed;
width: 600px;
bottom: 20px;
left: 50%;
max-height: 400;
overflow:auto;
}
The problem I have is that on internet explorer it ignores the max-height, the div just expands upwards and out of view with no scroll bars, even if I set overflow: scroll;.
BTW I am using the hack to do fixed absolute position boxes so they stay on the screen reguardless of scrolling, if that matters:
* { margin: 0; }
* html .box { position: absolute; }
try this:
* html .box{
height: expression( this.scrollHeight > 399 ? "400px" : "auto" ); /* fix for ie 5+ */
}
.box {
max-height: 400px;
position: fixed;
width: 600px;
bottom: 20px;
left: 50%;
overflow:auto;
}
Related
This pen probably explains my problem best:
http://codepen.io/anon/pen/xwQpLy?editors=110
I'm using the following trick to keep the box constrained to a 1:1 ratio:
.squarebox {
position: relative;
width: 100%;
}
.squarebox::before {
padding-bottom: 100%;
content: "";
display: block;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
But, I'd like the box to always fill the parent's width or height, whichever is smaller. In the above example, the box only ever fills the parent's width.
Do you mean like this?:
http://codepen.io/anon/pen/yYQpqp?editors=110
The parent needs to be position:relative, the .content div needs to be width:100%; height:100%; as well as position:relative with top, right, bottom and left set to 0.
I stripped out the squarebox div.
.squarebox {
position: relative;
width: 100%;
}
.content {
width:100%;
height:100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:orange;
}
I wish to achieve the following effect, regardless browser (re)size:
The images are set to be flexible, so, each of them as a max-width declared as:
100%.
http://jsfiddle.net/rgdrqbg4/
The css:
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 22.508038585209%;
}
Can someone please point some directions, or name some common used techniques to overlay two images while keep them absolute centered, regardless the viewport width?
A common technique is to set top and left to 50% and set margin-top and margin-left negative half of the height and width of your image.
Try this:
.play-video {
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -97px;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/1/
UPDATE
You can also set top, left, right, and bottom to 0 and set margin to auto for it to auto calculate the margin needed to center the image.
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/5/
This will only work if the image inside is smaller than the image that is wrapping it.
UPDATE
You are setting width for .home-video. At some point in the viewport, the container has more width than the image so the black box is centering accoring to the container, not to the parent image. To make the .home-video container have the same width as its larger image you can use this:
I added a width of 30% to the black box so it can shrink with the larger image too.
.home-video{
display: inline-block;
}
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 30%;
margin: auto;
}
And remove the width you set before.
Working JSFiddle sample: Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/9/
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 25.508038585209%;
width: 34%;
height: 40%;
}
<div class="home-video">
<img class="video-placeholder" src="http://lorempixel.com/570/320/" alt="video"/>
<img class="play-video" src="http://lorempixel.com/194/180/cat/" alt="play this video"/>
</div>
Do you mean like this? You were on the right track.
.play-video {
position: absolute;
top:20%;
height:inherit;
left:28%;
width:40%;
margin:0 auto;
}
http://jsfiddle.net/rgdrqbg4/7/
I want my div.container to be 100% height to fill the whole screen.
I've tried a few things, min-height, body height 100% and all of them seperate but it just won't work.
Here is the link : http://jquery.colinvaneenige.nl/test/
So .container with 100% height while still being in the center of the page! :)
Thanks in advance,
You can make it position: absolute at set the top and bottom to 0:
#container {
width: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
margin: 0 auto;
}
Fiddle Demo 1
..or
body,html {
min-height: 100%;
height: 100%;
}
#container {
width: 400px;
height: 100%;
background: red;
margin: 0 auto;
}
Fiddle Demo 2
Using position: absolute and set height: 100% instead of min-height.
.container {
position: absolute;
height: 100%;
}
You then will have to use other CSS tricks to get it back to centered, such as let's say your width of the container is 1000px:
.container {
width: 1000px;
left: 50%;
margin-left: -500px; /* negative half of the total with of the container */
/* And code from above line */
position: absolute;
height: 100%;
}
I've only ever been successful with this by creating a table with a single cell that is 100% height, then placing your div within that.
It's not possible, height must be in pixel :/
Only % for width :)
You can make a " min-height: 100px; "
I have a div of width: 1000px and inside that is a child which I wish to span the entire width of the browser window.
The trouble is, I don't know how to override previous width inheritance.
I could just position this outside of my container div, but that would be a huge inconvenience and workaround, unless of course this is equally as troublesome.
Markup:
<div class="centreContainer">
<div class="menuContainer"></div>
</div>
CSS:
html, body
{
margin: 0;
padding: 0;
}
.centreContainer
{
margin: auto;
width: 1000px;
}
.menuContainer
{
width: <what to do>;
height: 420px;
}
Preferably I would like a CSS only workaround, I was thinking of some stupid Javascript solution where you get the width of the browser window, then set the width of the menuContainer to:
<variable> / 10 (10 because 1000 / 100 = 10, where 1000 is the width of the centre container)
And have the menuContainer set on margin: auto; so it is centered.
Just use position:
.menuContainer
{
position: absolute;
width: 100%;
height: 420px;
}
Just use position:absolute shown in this jsfiddle
.menuContainer
{
width: 100%;
height: 420px;
position: absolute;
}
you could try placing your .menuContainer as absolute position into a relative parent position . JSfiddle
#root{
display:block;
position: relative;
}
.menuContainer{
position:absolute;
top: 50px;
left: 0;
}
I’m using CSS stylesheets. When I run my web page, a horizontal scroll bar and vertical scroll bar is displaying. I want to display the web page in a browser without horizontal and vertical scroll bars. How do I set a page width and height according to the browser page?
CSS code:
body
{
margin: 0 auto;
padding: 0;
background-color: #000000;
}
#art-main
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
#art-page-background-simple-gradient
{
position: absolute;
background-image: url('images/Page-BgSimpleGradient.jpg');
background-repeat: repeat-x;
top:0;
width: 00%;
height: 0px;
}
.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}
form
{
padding:0 !important;
margin:0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* end Page */
/* begin Box, Sheet */
.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 800px;
min-width:px;
min-height:px;
}
.art-Sheet-body
{
position: relative;
z-index:1;
padding: 12px;
}
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
{
position:absolute;
z-index:-1;
}
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
width: 76px;
height: 76px;
background-image: url('images/Sheet-s.png');
}
.art-Sheet-tl
{
top:0;
left:0;
clip: rect(auto, 38px, 38px, auto);
}
.art-Sheet-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 38px, 38px);
}
.art-Sheet-bl
{
bottom: 0;
left: 0;
clip: rect(38px, 38px, auto, auto);
}
.art-Sheet-br
{
bottom: 0;
right: 0;
clip: rect(20px, auto, auto, 38px);
}
.art-Sheet-tc, .art-Sheet-bc
{
left: 38px;
right: 38px;
height: 76px;
background-image: url('images/Sheet-h.png');
}
.art-Sheet-tc
{
top: 0;
clip: rect(auto, auto, 38px, auto);
}
.art-Sheet-bc
{
bottom: 0;
clip: rect(38px, auto, auto, auto);
}
.art-Sheet-cr, .art-Sheet-cl
{
top: 20px;
bottom: 20px;
width: 76px;
background-image: url('images/Sheet-v.png');
}
.art-Sheet-cr
{
right:0;
clip: rect(auto, auto, auto, 38px);
}
.art-Sheet-cl
{
left:0;
clip: rect(auto, 38px, auto, auto);
}
.art-Sheet-cc
{
position:absolute;
z-index:-1;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background-color: #FFFFFF;
}
.art-Sheet
{
margin-top: -5px !important;
}
#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
min-width:800px;
}
/* end Box, Sheet */
The above stylesheet is displaying a page with vertical and horizontal scroll bars. I don't want to display like that. The page should fit in the browser.
To disable scrollbars, use the following
body {
overflow: hidden;
}
If you wanted to detect the browser window size, then you'd need javascript
A useful tip:
overflow-x:hidden /* hides the horizontal scrollbar */
overflow-y:hidden /* hides the vertical scrollbar */
overflow:hidden /* hides ALL overflowing content, ofcourse disabling the scrollbars */
.. and this applies to ANY element/selector.
You’ll get a vertical scrollbar on your web pages when the content is taller than the browser window. That’s normal. It happens on pretty much every website ever published. For an example, see Stack Overflow.
As for the horizontal scrollbar, that happens when the content is too wide for the browser window. By default, HTML content makes itself as wide as possible within the browser window, and no wider. You must be setting something to be wider than the browser window.
If you could post your HTML, we should be able to work out what it is.
first of all, i'd remove the body margin.
and set whatever margin you want on a container div or something.
Here are some useful script to get the height and weight of the browser window: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
With the following code you can set a block element (div) to the width of the browser viewport.
...
<body>
<div class="fullwidth">Test test</div>
</body>
...
And the CSS:
.fullwidth { width: 100% }