I have a webpage that consist of 4 different div elements set in columns.
The page have no scrolling so all content is on screen. My question is how to
disable div backrounds zooming when zooming content because it ruins the page
structure. And ofcourse that should work in eveycase because I'm using different
backround sizes trought Media Queries.
My fist question is is that possible anyway, and will it work in IE8.
CODE:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
#container {
display: table;
width: 100%; height:100%;
border-spacing: 1px;
background-color:black;
margin-left:auto; margin-right:auto;
}
#container > div {
display: table-cell;
padding:0px;
}
body,html{ height:100%; width:100%; overflow:hidden; }
#div1{ position:relative;
background-image:url(../images/bg/left.jpg);
background-size: cover;
background-repeat:no-repeat;
}
#div2{height:100%;
background-image:url(../images/bg/center.jpg);
background-size: 100% 100%;
background-repeat:no-repeat;
position:relative;
}
#div3{height:100%;
background-image:url(../images/bg/right.jpg);
background-repeat:no-repeat;
background-size:cover;
position:static;
}
#div4{ height:100%;
background-image:url(../images/bg/right2.jpg);
background-repeat:no-repeat;
background-size:100% cover;
position: static;
background-repeat:no-repeat;
}
To make the div size invariant of zooming (But not contents inside it) do the following :
Inside your css for that div :
min-width: 100%;
max-width: 100%;
This will freeze the width, you can do the same for height too.
Related
is it possible to have 2 different images in one line and scale them exactly the same? Lets say i have something like this:
.container {
max-width:1200px;
margin:0 auto;
overflow:hidden
}
.left {
float:left
width:70%;
}
.right {
width:30%
float:right;
}
<div class='container'>
<div class='left'>
img here
</div>
<div class='right'>
img here
</div>
</div>
Now I'd like to fit images with container's width. Then when decreasing the size of the browser i want to scale em both with the same height. Can i achive that?
I'm thinking about something like this: http://prntscr.com/h0j2lj
It is not quite clear from your description what effect you're trying to achieve, so this example may not be relevant with your actual task. Piece of code blow displays to images one by one with 70/30 ratio and scales them. Images are put on background so they may not be completely visible in every layout.
.container {
max-width:1200px;
margin:0 auto;
display: flex;
align-items: stretch;
justify-content: space-between;
}
.left, .right {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 200px;
}
.left {
flex: 7 7 70%;
}
.right {
flex: 3 3 30%;
}
<div class='container'>
<div class='left' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4d/Bees_Collecting_Pollen_cropped.jpg)">
</div>
<div class='right' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5d/Crateva_religiosa.jpg)">
</div>
</div>
This shows the same image scaled for 70% on the left and 30% on the right.
.container {
max-width:1200px;
margin:0 auto;
overflow:hidden
}
.left {
float:left;
width:70%;
}
.left img{
width: 100%;
}
.right {
width:30%;
float:left;
}
.right img{
width:100%;
}
<div class='container'>
<div class='left'>
<img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
</div>
<div class='right'>
<img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
</div>
</div>
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
I have a wrapper containing 3 boxes (green: 300px, blue: 200px and yellow: 100px). The container can have a width of either 500px or 300px.
What I want is that, in the case the wrapper's width is 500px, the green and blue boxes get aligned, and the yellow gets hidden (Case A). In the other case (B), if the wrapper's width is 300px, I want to have the green box in the top, and the other 2 boxes aligned together in the bottom.
Is there a way to do this?
All the heights are equal (e.g. 100px)
UPDATE: I cannot control in advance the width of the wrapper. So I need a solution that works for both cases, not 2 solutions (each for 1 case).
<!doctype html>
<html>
<head>
<title>Demo</title>
<style>
#caseA {width: 500px; float: left;}
#caseB {width: 300px; float: left; clear: both; margin-top: 100px;}
#caseA > div, #caseB > div {height:100px; position: relative;}
.boxGreen {background-color:green; width: 300px; float: left; z-index: 3;}
.boxBlue {background-color:blue; width: 200px; float: right; z-index: 2;}
.boxYellow {background-color:yellow; width: 100px; float: right; margin-left:-100px; z-index: 1;}
</style>
</head>
<body>
<div id="caseA">
<div class="boxGreen"></div>
<div class="boxBlue"></div>
<div class="boxYellow"></div>
</div>
<div id="caseB">
<div class="boxGreen"></div>
<div class="boxBlue"></div>
<div class="boxYellow"></div>
</div>
</body>
</html>
How about this:
<style>
#wrapper{
overflow:hidden;
}
.wide{
width:500px;
height:100px;
}
.narrow{
width:300px;
height:200px;
}
#green{
width:300px;
height:100px;
background-color:Green;
float:left;
}
#blue{
width:200px;
height:100px;
background-color:Blue;
float:right;
}
#yellow{
width:100px;
height:100px;
background-color:Yellow;
float:left;
}
</style>
<div id="wrapper" class="wide">
<div id="green"> </div>
<div id="blue"> </div>
<div id="yellow"> </div>
</div>
Then you can swap the 2 classes back and forth when you need to switch styles.
I think you want something like this?
UPDATE: Now using #media querys.
PS. Resize the fiddle html painel to see the result.
I read through the other 100% CSS solutions but most of them just don't work for my project unfortunately (such as using position:fixed, etc).
Basically I have a logo and a content window. The logo is 100px in height and 100% in width, and I want the content window to be covering the whole remaining area. I also want it to expand automatically, if the content window exceeds the windows height (e.g. using the min-height property).
Can you point me towards the right way to do this?
My problem is that the content window height always seems to be referencing the original size and not the size of the parent container, hence there will be scrollbars, even when the content is short.
Below my (shortened) code:
CSS:
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
background-color:#000000;
}
#wrapper
{
height: 100%;
min-height: 100%;
}
#header
{
height:100px;
}
#content {
background-color:#eee;
min-height:100%;
}
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
content..
</div>
</div>
Thanks!
HTML:
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
</div>
CSS:
.wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.header{
background:red;
height:100px;
}
.content{
background:blue;
position:absolute;
top:100px;
left:0;
right:0;
bottom:0;
}
fiddle: http://jsfiddle.net/rVRFF/
note: .header height and .content top values must match.
How to stretch image according to it's content horizontally with css.
//html code
<style>
html, body{
margin: 0;
padding: 0;
}
#cont {
width:100%;
height:125px;
background-color:#1ea1de;
}
.logo {
height:100px;
width:300px;
background: url(logo3.png) no-repeat;
margin-top:-105px;
}
#liniq {
height:2.5px;
width:100%;
background-color: #b5babc;
margin-top:5px;
}
#levo {
background: url(levo.gif) no-repeat;
width:64px;
height:104px;
margin-left:280px;
margin-top:-170px;
}
#middle {
background:url(middle.gif) repeat-x;
height:41px;
margin-top:-62px;
margin-left:321px;
border:1px solid red;
overflow:hidden;
}
</style>
</head>
<body>
<div id="cont"></div>
<div class="logo"></div>
<div id="liniq"></div>
<div id="buttons">
<div id="levo"></div>
<div id="middle"></div>
</div>
</body>
</html>
But it don't stretch according to the content...
I dont't understand the picture but it seems you're trying to stretch a background-image, which is impossible without using CSS3 property background-size.
Anyway you can place your image in html appliying width:100%, its height will automatically be resized.
(And width:100% is useless for block elements)