Div Previous Siblings is not reducing it's size - css

I have a code where div should increase its size to twice. It's working, but the previous siblings after hover are not increasing their size.
When I hover the first box, the rest of them change their size. When I hover the second box, the bottom boxes size changes but the first box doesn't change its size. I want to target the previous siblings too while hovering the box.
* {
box-sizing: border-box;
transition: 0.5s ease all;
}
body {
margin: 20px;
font-family: calibri;
}
.box1 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF7F50;
margin: 0 auto 20px auto;
}
.box2 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #6495ED;
margin: 0 auto 20px auto;
}
.box3 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FFF8DC;
margin: 0 auto 20px auto;
}
.box4 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #DC143C;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00FFFF;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00008B;
margin: 0 auto 20px auto;
}
.box6 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #008B8B;
margin: 0 auto 20px auto;
}
.box7 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B8860B;
margin: 0 auto 20px auto;
}
.box8 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #006400;
margin: 0 auto 20px auto;
}
.box9 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B22222;
margin: 0 auto 20px auto;
}
.box10 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #E9967A;
margin: 0 auto 20px auto;
}
.box11 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF1493;
margin: 0 auto 20px auto;
}
.box12 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #9400D3;
margin: 0 auto 20px auto;
}
.box div:hover~* {
width: 100px;
height: 100px;
}
<section class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
</section>

There is a way to achieve this. The trick is to target the parent div and expand all descendant but force the hovered element to not expand.
But you'll run into a different problem. When the boxes on top expand it pushes the box you are hovering over down and you lose the hover for that particular box. If it was something like a flip effect we would have no problem.
Check out the solution below and you'll know what am talking about. Hopefully you'll be able to figure out something for this. All the best.
* {
box-sizing: border-box;
transition: 0.5s ease all;
}
body {
margin: 20px;
font-family: calibri;
}
.box {
width: 100px;
margin: auto;
text-align: center;
}
.box1 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF7F50;
margin: 0 auto 20px auto;
}
.box2 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #6495ED;
margin: 0 auto 20px auto;
}
.box3 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FFF8DC;
margin: 0 auto 20px auto;
}
.box4 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #DC143C;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00FFFF;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00008B;
margin: 0 auto 20px auto;
}
.box6 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #008B8B;
margin: 0 auto 20px auto;
}
.box7 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B8860B;
margin: 0 auto 20px auto;
}
.box8 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #006400;
margin: 0 auto 20px auto;
}
.box9 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B22222;
margin: 0 auto 20px auto;
}
.box10 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #E9967A;
margin: 0 auto 20px auto;
}
.box11 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF1493;
margin: 0 auto 20px auto;
}
.box12 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #9400D3;
margin: 0 auto 20px auto;
}
.box:hover>* {
width: 100px;
height: 100px;
}
.box>*:hover {
width: 50px;
height: 50px;
margin-bottom: 20px;
margin: 0 auto 20px auto;
}
<section class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
</section>

Related

background-image height to properly scale down in css?

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>

How to stop content from overlapping the footer?

So I am working on a website at the moment, and all the content is arranged in boxes around the page. The css looks like this:
section {
position: static;
bottom: 110px;
}
#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
background-color: white;
padding-left: 10px;
padding-right: 10px;
box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
border-radius: 20px;
border: 1px solid #00BFFF;
}
#topLeft, #topRight {
padding-top: 10px;
}
#topLeft {
float: left;
margin-top: 200px;
width: 630px;
height: 310px;
}
#topRight {
float: right;
margin-top: 200px;
width: 300px;
height: 630px;
}
#middle {
clear: left;
position: absolute;
margin-top: 530px;
margin-left: 330px;
width: 320px;
height: 310px;
}
#bottomLeft {
clear: left;
float: left;
margin-top: 10px;
width: 300px;
height: 630px;
}
#bottomRight {
clear: right;
float: right;
margin-top: 10px;
width: 630px;
height: 310px;
}
img {
border-radius: 20px;
}
#topRight img {
margin-top: 25px;
}
#bottomLeft img {
margin-top: 20px;
}
And the footer goes below this, its css looks like this:
footer {
clear: left;
/*position: relative;*/
bottom: 0px;
padding-bottom: 20px;
margin-bottom: 20px;
padding-top: 40px;
height: 110px;
font: normal 12px 'Helvetica', sans-serif;
color: white;
text-align: center;
}
I want to add a new box below the others, but above the footer. Its css looks like this:
#below {
clear: both;
position: absolute;
float: left;
margin-top: 1170px;
width: 960px;
}
The problem is that this box overlaps the footer! And I just cannot work out how to fix this, any ideas?
#below { clear:both }
should be enough

CSS center, fixed nav

I have a page that is 1600px wide. The main area though is only 900px wide. I have a navigation that is suppose to be fixed in the center of the page ( which it is ). My problem is when I open the page, the page is fixed left instead of being centered when opened. What do I need to do to center everything within the 900px when a user visits the site?
The code isn't exact because it's detailed but it basically goes like this: http://jsfiddle.net/wznQk/
<body>
<div class="container">
<div class="header">
<div class="subheader">
<div class="navigation">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="logo"><img src="images/ogsystemslogo.png" /></li>
<li>CAREERS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="undernav">
<div class="short">
<img src="images/bluemark.png" />
<div class="top">TOP OGS NEWS:</div>
</div>
</div>
</div>
</div>
<div class="content">
</div>
</div>
</body>
CSS
.body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 1600px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
margin: 0 10% 0 10%;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 1600px;
height: 100px;
margin: 0 auto;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 1600px;
height: 100px;
padding: 0px;
margin-left: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
display: table-cell;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: 590px;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
margin: 0 auto;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Please try to add this CSS instead of yours. In your CSS I found lot of unwanted CSS tags but I keep them as it is.
body {
width: 1600px;
height: 100%;
margin: 0 auto;
padding: 0px;
border: 0px;
position: relative;
text-align: center;
}
.container {
width: 900px;
height: 100%;
position: relative;
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}
.header {
width: 1600px;
height: 150px;
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
.subheader {
width: 900px;
height: 100px;
position: fixed;
background-color: white;
top: 0px;
}
.navigation {
font-family: 'Champagne & Limousines';
font-size: 20px;
text-align: left;
width: 590px;
height: 100px;
padding: 0px;
margin: 0 auto;
border: 0px;
list-style: none;
text-decoration: none;
vertical-align: middle;
color: #006699;
background-color: white;
}
.navigation ul {
width: auto;
height: 20px;
list-style: none;
text-decoration: none;
position: relative;
line-height: 55px;
background-color: white;
padding: 0px;
border: 0px;
}
.navigation ul li {
width: 70px;
height: 15px;
float: left;
padding-left: 35px;
background-color: white;
}
Css:
.header {
width: 1600px;
height: 150px;
left: 50%;
margin-left: -800px;/*half of your total width*/
padding: 0px;
border: 0px;
background-color: white;
position: fixed;
}
Added left: 50%; margin-left: -800px;/*half of your total width*/ to your .header class
Fiddle : http://jsfiddle.net/avinvarghese/wznQk/3/show/

3 columns layout with rounded corners

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.

Another css vertical align

Trying to get the grey box on the right to centre align without adding margins/padding to it:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; }
h3 span { margin-left: 0.5em; }
a { float: right; text-align: right; }
a span { vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; }
#content { height: 16em; }
</style>
</head>
<body>
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
</body>
</html>
http://jsfiddle.net/hotdiggity/4yGh8/
There are a few different ways to go about this, but none of them are perfect.
I've modified the markup slightly to make it easier to write selectors for:
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
CSS Tables
The result might not be pretty if you have content that's going to wrap:
http://jsfiddle.net/4yGh8/4/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; display: table; width: 100%; }
h3 span { display: table-cell; vertical-align: middle; }
h3 span { padding: 0 0.5em; width: 100% }
h3 span:last-child { width: 1px; line-height: 1; }
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Flexbox
Make sure you check http://caniuse.com/#search=flexbox to see which prefixes you need to make this work.
http://jsfiddle.net/4yGh8/6/ (prefixes not included)
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
display: flex;
width: 100%;
justify-items: space-between;
align-items: center;
}
h3 span {
margin: 0 .5em;
}
h3 span:first-child {
flex: 1 1 auto;
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Absolute Positioning
http://jsfiddle.net/4yGh8/7/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
position: relative;
}
h3 span {
padding: 0 .5em;
}
h3 span:last-child {
position: absolute;
right: 0;
top: 50%;
margin-top: -.5em; /* half of the element's height */
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
2 things you can do.
add another box en limit is in width until your block is in the middle with float right
use margin & padding
You just need to add position:relative to your #frame and then position:absolute;top:0;bottom:0; margin:auto; to yout #header. I edited your fiddle

Resources