I have currently built a grid layout for my content and i want to use images inside a div column as the background. At first I placed an image with a class of "img-responsive inside the div columns and this works perfectly. Now i want to achieve the same effect but have the image as a background instead. I am having trouble getting my background-image height to scale with the width of the div. With the img-responsive class i have a 'width: 100%;' and 'height: auto;' how do i apply the same logic to a background-image? I can't set the div column class to height: auto; or have a max-height of N pixels because this displays nothing. Below is an example of my code, The top two divs are what what i want my background images to be like. Can anyone explain to me how i can achieve this?
body {
margin: 0 auto;
padding: 30px 30px 5px 30px;
font-family: sans-serif;
color: black;
font-size: 1.2em;
}
section {
width: 80%;
margin: 0px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
overflow: hidden;
}
.row {
margin: 1% auto;
width: 100%;
overflow: hidden;
padding-bottom: 10px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.col {
line-height: 0;
margin-left: 1%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
overflow: hidden;
}
.col:first-child {
margin-left: 0px;
}
.col:last-child {
margin-right: 0px;
}
.img-responsive {
max-width: 100%;
height: auto;
}
.col.col-6 {
width: 47%;
height: auto;
border: 2px solid black;
margin-left: 1%;
margin-right: 1%;
}
.col.col-6-bg {
width: 47%;
max-height: 1000px;
min-height: 145px;
min-height: 200px;
margin-left: 1%;
margin-right: 1%;
border: 2px solid black;
}
.img-bg {
background-image: url("http://prasinostcharles.com/wp-content/uploads/2014/09/gallery-large_food_cod.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#media (max-width: 766px) {
section {
width: 90%;
}
col {
width: 80%;
margin: 10px auto;
padding: 0;
}
.col.col-6 {
width: 98%;
min-height: 141px;
margin-left: 0;
margin-right: 0;
}
.col.col-6-bg {
width: 98%;
min-height: 200px;
margin-left: 1%;
margin-right: 1%;
}
}
<h2>Div with img</h2>
<div class="row">
<div class="col col-6">
<img class="img-responsive" src="http://prasinostcharles.com/wp-content/uploads/2014/09/gallery-large_food_cod.jpg">
</div>
<div class="col col-6">
<img class="img-responsive" src="http://prasinostcharles.com/wp-content/uploads/2014/09/gallery-large_food_cod.jpg">
</div>
</div>
<h2> Div with img as bacground</h2>
<div class="col col-6-bg img-bg"></div>
<div class="col col-6-bg img-bg"></div>
Related
I want to make a website with div one below the another .How do i set the height of the responsive page .There is no content inside div .I want to make solid border rectangle .This is for practise purpose.
html,
body {
width: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 10%;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 30%;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 30%;
border: 10px solid black;
}
.three {
width: 50%;
height: 30%;
border: 10px solid black;
}
.four {
width: 50%;
height: 30%;
border: 10px solid black;
}
.five {
width: 50%;
height: 30%;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
If I understand your question correctly and you want to position the first div in the html to show on the web page AFTER those that come next in the html -
You can use css3 flexbox. Apply the display:flex on the body and then use order on the body's children to order them.
So in your example, add this to your css -
body {
display: flex;
flex-direction: column; //(Flexbox defaults to row, apply this to change back to column)
}
.one {
order: 5;
}
.two {
order: 1;
} ...
Have a look at this for more info.
use pixel instead of %
html,
body {
width: 100%;
min-height:800px;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 80px;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 240px;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 240px;
border: 10px solid black;
}
.three {
width: 50%;
height: 240px;
border: 10px solid black;
}
.four {
width: 50%;
height: 240px;
border: 10px solid black;
}
.five {
width: 50%;
height: 240px;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
I am currently working on a webpage featuring some jQuery-UI sliders, but I am having trouble properly aligning all of the things.
HTML:
<div class="row">
<div id="hue"><img src="download.png" class="hue" /></div>
<div id="mixedColor"></div>
</div>
<div class="rowVert">
<div class="vert" id="CSVhue"></div>
<div class="vert" id="CSVsat"></div>
<div class="vert" id="CSVbright"></div>
</div>
CSS:
#hue {
display: block;
width: 90%;
float: left;
margin: 0 auto;
margin-top: 37px;
}
.hue {
height: 12px;
width: 100%;
}
#mixedColor {
display: block;
width: 100px;
height: 100px;
border: 1px solid black;
float: right;
}
.vert {
margin-top: 100px;
}
But without any success.
Here is a JSFiddle: http://jsfiddle.net/npL866zz/1/
How I want it:
Please note my webpage is optimized for IE7, so all commands must be optimized for this one browser.
Here is something you could work with
Fiddle demo
#hue {
margin-top: 50px;
margin-right: 110px;
overflow: hidden;
}
.hue {
height: 17px;
width: 100%;
}
#mixedColor {
position: absolute;
right: 10px;
top: 10px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.rowVert {
padding-top: 40px;
padding-right: 110px;
padding-left: 20%;
}
.vert {
float: left;
margin-left: 14%;
width: 15px;
height: 100px;
}
Having a little issue with floating and a responsive layout. I have a div container that has a left and right div container inside. The two have to be on the same "row" but when div container "RIGHT" is set to 100%, it moves it down to the next row. I have made a quick fiddle here.
http://jsfiddle.net/v5tnshjw/1/
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: 100%;
background-color: blue;
}
The box on the right needs to flow with the browser width but stay on the same line.
Any help or pointers would be great! Thanks in advance.
You could set the inner divs to display:table-cell with the parent as display:table and table-layout:fixed:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
display:table;
table-layout:fixed;
}
.leftBox {
display:table-cell;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
width:100%;
height: 50px;
display:table-cell;
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
You can also use the CSS3 calc() function :
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: calc(100% - 80px);
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
If the left box also needs to scale:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 20%;
}
.rightBox {
float: left;
height: 50px;
width: 80%;
background-color: blue;
}
I'm trying to make something looks like this:
http://student.santarosa.edu/~anarbuto/CSS/templates/stylin2_chapters/chapter_5/3_col_rounded.html
but without any JS or CSS hacks.
Also tried this:
http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm
and many other examples, but none of them works well.
I'd like the left and the right columns to be a fix width (say 300px), and the middle column takes the rest of the page.
Not sure if anyone can help..?
Thanks!!!
Edit: They need to be of same height (without specifying the height), ie. all 3 columns should have same height as the tallest column.
To make the corners of div round you have to use css and just go to
http://www.w3schools.com/css3/css3_borders.asp
This is not a hack I believe.
EDIT:
For your layout to be fluit I added % to the width:
http://jsfiddle.net/qBH3A/3/
CSS:
h1{
padding: 0;
margin: 0;
text-align: center;
}
#container{
width: 960px;
margin: 0 auto;
padding: 0;
background-color: grey;
border-radius: 10px;
padding: 10px;
overflow: hidden;
}
#header{
background-color: green;
width: 100%;
margin: 0 auto;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#left{
background-color: yellow;
float: left;
width: 20%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#right{
background-color: blue;
float: right;
width: 20%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#center{
background-color: red;
width: 58%;
margin: 0 auto;
border-radius: 10px;
height: 300px;
float: left;
margin-left: 10px;
}
I made a quick example for a 960px grid layout:
http://jsfiddle.net/qBH3A/1/
I just set the values to a max-width and width.
HTML:
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>right</h1>
</div>
<div id="center">
<h1>center</h1>
</div>
</div>
CSS:
h1{
padding: 0;
margin: 0;
text-align: center;
}
#container{
width: 960px;
margin: 0 auto;
padding: 0;
background-color: grey;
border-radius: 10px;
padding: 10px;
overflow: hidden;
}
#header{
background-color: green;
width: 100%;
margin: 0 auto;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#left{
background-color: yellow;
float: left;
width: 200px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#right{
background-color: blue;
float: right;
width: 200px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
#center{
background-color: red;
width: auto;
max-width: 540px;
margin: 0 auto;
border-radius: 10px;
height: 300px;
}
Note that I used border-radius of 10px;
Hope this is what you want.
I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:
XHTML:
<div id="alerts">
<div id="alerts-top"></div>
<div id="alerts-left"></div>
<div id="alerts-content">
<div id="alerts-header">
<p>Alerts</p>
</div>
<div id="alerts-main">
<!-- content in here -->
</div>
</div>
<div id="alerts-right"></div>
<div id="alerts-bottom"></div>
</div>
CSS:
#alerts { float: left; width: 267px; height: 200px; }
#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; }
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; }
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; }
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; }
#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; }
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }
This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is #alerts-main.
Try this for #alerts-bottom:
#alerts #alerts-bottom {
float: left;
background: url(../images/alerts-bottom.png) no-repeat;
height: 11px;
width: 258px;
margin-top: -9px;
}
With a negative value for margin-top property you control how the div will be displayed (in this case you'll force the #alerts-bottom div to be rendered 9px above the default display).
Hope it helps.
After a "five minutes" consideration I've wrote this code and it will do what you want. Just change the styles to add the images as backgrounds. First the CSS:
#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }
And the HTML:
<div id="wrapper">
<div id="top-margin">
<div id="alerts">Alerts alerts alerts</div>
</div>
<div id="right-margin"></div>
<div id="bottom-margin"></div>
<div id="left-margin"></div>
<div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>
The #wrapper's height will expand as more text is added. Sorry that I've changed the names of the Ids and justified the text. But that can easily be remedied.