I have the following HTML and CSS code setting two pictures side by side and should shrink when pages shrinks, but this doesn't work.
I got rid of every class on parent divs, but still nothing...
Any idea why pictures do not shrink when browser window shrinks??
Thanks
.align {
position: absolute;
top: 75px;
z-index: -100;
}
.navigate {
margin: -10px 888px;
width: 200px;
z-index: 100;
}
.leftSide {
height: 558px;
margin: 20px 0px 0px 344px;
max-width: 500px;
}
.rightSide {
height: 558px;
margin: -5px 0px 0px 1053px;
max-width: 500px;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
margin: -557px 940px;
}
img {
width: 70%;
height: auto;
}
<div class="align">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a>
<a id="nextPic" href="#">Next>></a>
</div>
<div class="leftSide">
<img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
<div class="verticalLine"></div>
<div class="rightSide">
<img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
</div>
.align {
margin-left:auto;
margin-right:auto;
}
.container{
width:90%;
height:568px;
display:inline-block;
}
.navigate {
width: 100%;
text-align:center;
padding:20px;
}
.leftSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.rightSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
display:inline-block;
}
.leftSide img {
width:auto;
max-width:100%;
}
.rightSide img {
width:auto;
max-width:100%;
}
<div class="align">
<div class="container">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a> <a id="nextPic" href="#">Next>></a> </div>
<div class="leftSide"> <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
<div class="verticalLine"></div>
<div class="rightSide"> <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
</div>
</div>
add these two attributes to the div class,
.div_class
{
margin-left: auto;
margin-right: auto;
}
Related
I have a problem with my CSS.
I am working on a website which I want to make my own CSS for, I tried to make it myself but I can not figure it out.
I am aiming for a website that looks like this
But currently looks like this:
I tried everything I could. I am using some CSS right now but it isn't working how I want it too.
html {
background: #ECF0F1;
}
.sidebar {
width: 20%;
height: 100%;
float: left;
background: #043D5D;
position: fixed;
top: 50px;
left: 0;
}
.sidebar p{
margin-left: 10px;
color: #FFF;
}
.nav{
float: left;
position: fixed;
width: 100%;
height: 50px;
background: #043D5D;
top:0;
left:0;
}
.nav .logo img{
height: 40px;
}
.content{
width: 80%;
height: 100%;
float: left;
top: 55px;
position: fixed;
margin-left: 21%;
}
Fiddle: https://jsfiddle.net/bqgpn6hj/
Is there a better way to do this? Thanks in advance!
Check out my jsfiddle here: https://jsfiddle.net/bqgpn6hj/1/
I hope it can be usefull for you.
Code below:
body {
background: #ECF0F1;
}
.clear {
clear:both;
}
.nav {
width:100%;
float: left;
background:red;
}
.logo{
width: 20%;
float:left;
}
.search {
width:78%;
float:left;
padding: 10px 1%;
text-align:right;
}
.sidebar {
width: 16%;
background: green;
float:left;
padding: 2% 2%;
}
.content {
width: 80%;
float:left;
position:relative;
background: yellow;
height: 466px;
}
.subbar {
background: gray;
height: 200px;
}
.content .bottom {
position:absolute;
bottom:0px;
background: blue;
width:90%;
padding: 5%;
}
And HTML
<body>
<div class="nav">
<div class="logo">
<img src="http://placehold.it/40x40">EasyMusic
</div>
<div class="search">
<input type="text">
</div>
</div>
<div class="clear"></div>
<div class="sidebar">
<div class="subbar" id="1">
<p>Sidebar, links here</p>
</div>
<div class="subbar" id="2">
<p>Bottom</p>
</div>
</div>
<div class="content">
<p>Content, everything here</p>
<div class="bottom">
bottom
</div>
</div>
<div class="clear"></div>
</body>
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
Help me please, I can't understand result of my simply code:
<div id="wrapper-top">
<div class="wrapper">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
and css file:
#wrapper-top
{
width: 100%;
background-color: gray;
}
.wrapper
{
margin: 0 150px 0 150px;
}
#logo
{
width: 100%;
height: 50px;
}
#menu
{
width: 100%;
height: 50px;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
Why divs .block-3-1, .block-3-2 and .block-3-3 seem to be outside of div .wrapper.
I don't expected that because I want this blocks inside .wrapper.
http://jsfiddle.net/4yvLv853/1/
You need to contain the floated items in the #content div
One method (there are others as detailed here) is to use overflow:hidden
#content
{
width: 100%;
background-color: white;
overflow: hidden;
}
JSfiddle Demo
use clearfix
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
#wrapper-top
{
width: 100%;
background-color: gray;
border: solid blue 1px;
}
.wrapper
{
margin: 0 150px 0 150px;
border: solid brown 1px;
}
#logo
{
width: 100%;
background-color: white;
}
#menu
{
width: 100%;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
<div id="wrapper-top">
<div class="wrapper clearfix">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">block-1-1</div>
<div class="block-3-1">block-3-1</div>
<div class="block-3-2">block-3-2</div>
<div class="block-3-3">block-3-3</div>
</div>
</div>
</div>
Try
<div id="wrapper-top">
<div class="wrapper" style="height: 400px"> //You can add this in CSS if you want.
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
I think the wrapper height is too small.
Alternatively, if you want the .wrapper div to stay the height it is, try changing the #content to
#content {
overflow-y: scroll;
overflow-x: hidden; //this gets rid of the pesky bottom scrollbar
}
So I have a div, inside that i have horizontally aligned divs, in this example just 1. Within this horizontal div are 3 divs, one aligned to the left, one middle and one right. I want the images within each of those 3 divs to be centered so it is more visually appealing.
I have tried: margin: 0 auto; but it didn't work, any ideas why this isn't working and how to get it working?
HTML
<div id="main">
<div id="firstRow">
<div class="firEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="secEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="thirEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
CSS
.logo{
width: 100px;
height: 100px;
margin:0 auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.firEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
float:left;
margin: 10px;
}
.secEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
margin: 10px;
float:left;
}
.thirEl{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
}
http://jsfiddle.net/genome314/2u695mdu/
Adding this should do the trick:
img {
display: block;
margin: 0 auto;
}
Or just align center as the other answer below stated, if you want to keep your images inline.
set text-align:center for each div that contains the logo.
#firstRow div{
text-align:center;
}
I threw in Nick Solloum's answer and found that the logos were still a little off center towards the bottom. I made all your image classes into one since they had the same values anyway. I fixed this by changing padding-top: to 4% and found it looked much cleaner to me. Here is the adjusted CSS. I hope this helps
HTML
<html>
<body>
<link rel="stylesheet" type="text/css" href='so.css'>
</body>
<div id="main">
<div id="firstRow">
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
</html>
CSS
.logo{
width: 100px;
height: 100px;
margin:0 auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.El{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
padding-top: 4%;
}
img {
display: block;
margin: 0 auto;
}
Give text-align:center; in each div css
like:
.firEl{
text-align:center;
}
Edit
if, text don't want center then:
.elPara{
text-align:left;
}
Check your updated code here. Fiddle
Method 1
Add display block to .logo. Check here: http://jsfiddle.net/2u695mdu/4/
CSS
.logo{
width: 100px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.firEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
float:left;
margin: 10px;
}
.secEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
margin: 10px;
float:left;
}
.thirEl{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
}
HTML
<div id="main">
<div id="firstRow">
<div class="firEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="secEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="thirEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
</div>
Only the image is centered.
Method 2
Add <div align="center"> before each image, as here: http://jsfiddle.net/2u695mdu/7/
Method 3
Check #ketan answer.
Method 4
Because you setted the image width, you can use, postion relative to images as here http://jsfiddle.net/2u695mdu/8/
.logo{
width: 100px;
height: 100px;
position: relative;
left: 50%;
margin-left: -50px;
}
display: block;
margin: auto;
instead of
margin:0 auto;
I have this layout:
<div id="container">
<div id="sidebar">
<div id="logo"></div>
<div id="box"></div>
</div>
<div id="content">
<div id="gallery">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
And here is the CSS:
#container {
background-color: black;
display:block;
position:absolute;
height:auto;
width:auto;
bottom:0;
top:0;
left:0;
right:0;
overflow:hidden;
background-size:auto 100%;
margin:50px;
}
#sidebar {
background-color: purple;
min-width: 250px;
width:250px;
max-width: 20%;
height:100%;
overflow:hidden;
float:left;
}
#logo {
height: 100px;
background-color: orange;
}
#box {
bottom: 20px;
font-family: sans-serif;
font-size: 10px;
color: grey;
margin: 20px;
padding: 10px;
background-color: white;
overflow-y: scroll;
text-align: justify;
}
#content {
display:inline;
width:75%;
margin-left: 300px;
padding: 0px;
margin:0px;
text-align: center;
background-color: green;
overflow-y: scroll;
}
#gallery {
margin-left: auto;
margin-right: auto;
display: table;
background-color: blue;
}
.thumb {
width: 200px;
height: 150px;
display: inline-block;
background-color: black;
margin: 20px;
border: 7px solid white;
overflow:hidden;
background-color: yellow;
}
I need the content of the #box and either #gallery or #content to be scrollable vertically.
Because my layout is responsible and the overflow of the #container is hidden I think there must be some problem with these features.
Here I created a jsFIddle to illustrate the problem.
You can add this in CSS #box
max-height : 100px ; /*for example*/
EDIT :
for you can use
overflow: auto;
in DIV you want to scroll