I want to create an entry-page with four pictures as links to my other pages. But I want these pictures to be displayed in the middle (vertical and horizontal) of the monitor. I've tried quite a few things, but I cannot get it right. I can't even vertical-align the pictures on any way (for example bottom, as you'll see in the code).
Do you guys know a solution to this problem? Here my code:
HMTL:
<!DOCTYPE html>
<html>
<head>
<title>B-Music: Piano</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="piano.css">
</head>
<body>
<div id="tablecontainer">
<div id="tablerow">
<div id="Column1">
<div id="pianoleerkracht">
<a href="Prijs&Contact.html" title="Pianoleerkracht">
<img src="img/piano.jpg" alt="Pianoleerkracht">
</a>
</div>
<div id="jezelf">
<a href="Prijs&Contact.html" title="Jezelf">
<img src="img/piano.jpg" alt="Jezelf">
</a>
</div>
</div>
<div id="column2">
<div id="mij">
<a href="Prijs&Contact.html" title="Mij">
<img src="img/piano.jpg" alt="Mij">
</a>
</div>
<div id="prijs&Contact">
<a href="Prijs&Contact.html" title="Prijs en Contact">
<img src="img/piano.jpg" alt="Prijs en Contact">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
And the CSS:
body{
background-color: brown;
height: 100%;
}
#tablecontainer{
display: table;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#tablerow{
display: table-row;
height: 100%
}
#column1{
display: table-cell;
vertical-align: bottom;
}
#column2{
display: table-cell;
}
img{
width: 100px;
height: 100px;
}
Kind Regards
It seems as though the tablecontainer itself is being centered, however the content within the container has remained untouched by that css. Perhaps if you add the centering elements to the tablerow div it will correct the problem.
Here is what I would try:
#tablerow{
display: table-row;
margin-left: auto;
margin-right: auto;
height: 100%;
}
you don't need tables. css is enough:
#pianoleerkracht {
position: absolute;
left: 25%;
top: 25%;
margin-left: -50px;
margin-top: -50px;
}
i created a jsfiddle for you: http://jsfiddle.net/tomaspolach/Q89f3/
Solution:
I found a solution to the problem. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>
B-Music: Piano
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="piano.css">
</head>
<body>
<div id="Outer">
<div id="Middle1">
<div id="Inner1">
<div id="pianoleerkracht">
<a href="PrijsEnContact.html" title=
"Pianoleerkracht"><img src="img/piano.jpg" alt=
"Pianoleerkracht"></a>
</div>
<div id="jezelf">
<a href="PrijsEnContact.html" title="Jezelf"><img src=
"img/piano.jpg" alt="Jezelf"></a>
</div>
</div>
</div>
<div id="Middle2">
<div id="Inner2">
<div id="mij">
<a href="PrijsEnContact.html" title="Mij"><img src=
"img/piano.jpg" alt="Mij"></a>
</div>
<div id="prijsEnContact">
<a href="PrijsEnContact.html" title=
"Prijs en Contact"><img src="img/piano.jpg" alt=
"Prijs en Contact"></a>
</div>
</div>
</div>
</div>
</body>
</html>
And the CSS of course:
body{
background-color: brown;
height: 100%;
}
#Tablecontainer{
display: table;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#tablerow{
display: table-row;
height: 100%
}
#column1{
display: table-cell;
vertical-align: middle;
}
#column2{
display: table-cell;
}
img{
width: 100px;
height: 100px;
}
#Outer{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#Middle1{
display: table-cell;
vertical-align: middle;
}
#Middle2{
display: table-cell;
vertical-align: middle;
}
#Inner1{
float: right;
width: 120px;
}
#inner2{
float: left;
width: 120px;
}
Thank you guys for the inspiration!
Related
I would like to add some texts next to centered images. I want to keep images in the center of my page and texts just floating on sides of pictures (without moving images to the sides of the page)
my goal
This is my code (with a random free image for question purposes only):
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
}
.img1 {
margin: 0 auto;
width: 200px;
display:block;
}
.text1 {
text-align: right;
float: left;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
}
.text2 {
text-align: left;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I've tried using inline-block for images, but then I couldn't center them. In general, the texts somehow push the images away from the center and I cannot find a similar case as mine online. Thank you in advance for any hints.
easiest way with your code is to use position absolute
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
position:relative;
}
.img1 {
margin: 0 auto;
width: 200px;
display: block;
}
.text1 {
text-align: right;
position:absolute;
top:20%;
left:15%;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
position:relative;
}
.text2 {
text-align: left;
position:absolute;
top:20%;
right:15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
or we could do this with flex: when you use absolute it takes the element out of the regular dom flow. Better yo use flex, makes responsive designs easier
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.img1 {
margin: 0 auto;
display: block;
}
.text1{
text-align:right;}
.r1{
width:30%;}
.img2 {
margin: 0 auto;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.text2 {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<div class="text1 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1 r1" alt="img1">
<div class='r1'> </div>
</div>
<div class="row2">
<div class='r1'> </div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2 r1" alt="img1">
<div class="text2 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I am editing a simple search bar. My plan is to have two buttons above the search bar, that are responsive. With one button floating to the right and one button floating to the left.
However, I cannot seem to get the buttons to stop coming out they are not inline with the search bar, almost "Out of its container".
Code:
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
Image:
Option 1:
.Wrap your inner elements of container in another wrap, and set the margin on that element.
Option 2:
Is in snippet, apply margin to icons, and input itself. I added 3 lines of code to your snippet.
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
margin-left: 35px; /* 1) MOVING FIRST IMAGE FROM SIDE */
}
#faupload {
float: right;
margin-right: 35px; /* 2) MOVING 2ND IMAGE FROM RIGHT SIDE */
}
input {
border: 1px solid #F1F;
width: calc(100% - 70px); /* 3) 100% - HOW MUCH MARGIN DO YOU WANT AROUND INPUT? */
border-radius: 3px;
height: 35px;
margin: 0 35px; /* 4) APPLY MARGIN TO INPUT */
}
span.clear { clear: left; display: block; }
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
Here is a way to do it using flexbox, with much more less code in CSS and in HTML
.container,
.icons {
display: flex;
flex-wrap: wrap;
width: 100%
}
.icons {
justify-content: space-between
}
.searchbar {
flex: 1
}
#searchbox {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="icons">
<div id="falist">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div id="faupload">
<i class="fa fa-upload" aria-hidden="true"></i>
</div>
</div>
<div class="searchbar">
<input id="searchbox" type="search" />
</div>
</div>
take out that clear:left from span.clear
Snippet below
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
vertical-align:top;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</div>
</body>
</html>
.icons{
margin-left: 37px;
margin-right: 37px;
}
This works to get them on top where the red boxes are. If not exactly, just tweak them.
I managed to fix this issue by adding the following code to the element .icons hope it helps!
.icons{
margin: 0 31px;
}
.container {
float: center;
text-align: center;
width: 100%;
overflow: hidden;
}
#falist, #faupload {
display: inline-block;
position: relative;
font-size: 25px;
}
#falist {
float: left;
}
#faupload {
float: right;
}
input {
border: 1px solid #F1F;
width: 90%;
border-radius: 3px;
height: 35px;
}
span.clear { clear: left; display: block; }
.icons{
margin: 0 31px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>
</head>
<body>
<div class="container">
<div class="icons">
<div id="falist"><i class="fa fa-list" aria-hidden="true"></i></div>
<div id="faupload"><i class="fa fa-upload" aria-hidden="true"></i></div>
<span class="clear"></span>
</div>
<div class="searchbar">
<input id="searchbox" type="search"/>
</div>
</div>
</body>
</html>
I'm trying to center an image but it doesn't works :(
I use the parameter text-align: center;. The size of the image is 600x600px and I need to center horizontal in the website.
My code is:
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
width: 600px;
height: 600px;
display: block;
margin: 0 auto
text-align: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
At moment it shows:
Could you help me?
Thanks!
try this code for the .img-sugarCSS:
.img-sugar{
width: 600px;
height: 600px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
try this css, you have some syntax error and spelling mistake
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WebCam UI</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="http://placehold.it/350x150"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
</body>
If you would insert your img via css it would be easiely done with this here:
.img{
background:url(yourimg.png) center center no-repeat;
}
margin: 0 auto you forgot to end with semicolon ;
.img-sugar{
width: 600px;
weight: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
Use the below mentioned Padding value.
#share-buttons img {
width: 50px;
padding: 100px;
border: 0;
box-shadow: 0;
display: inline;
}
try with this code
.img-sugar{
width: 600px;
weight: 600px;
display: block;
position: absolute;
vertical-align: center;
horizontal-align: center;
}
maybe this works?
So I am making this little game, where you need drag text under the images.
I need to make little tabs under the images where the text is needed to be dragged onto.
I thought of placing a div around the image, and another div in the div for the tab, in css I styled the tab to be 25px in height. but the 25px, isn't going under the image in the same div, it's above the other images in that row..
this is what I see, http://prntscr.com/9yv7m8
the red space is the tab, that needs to go under the pictures..
How can I fix this properly?
This is my code,
CSS
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
footer {
height: 5%;
border-top: thick solid grey;
}
.points {
float: right;
}
.container {
width: 100%;
height: 90%;
}
.plaatje {
width: 100px;
height: 100px;
}
.plaatje2 {
float: left;
width: 25%;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
.img {
width: 25%;
height: 25%;
float: left;
}
.img2 {
width: 25%;
height: 25%;
float: left;
}
.answer {
height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div>
<img class="img" src="img/cat.jpg" alt="cat" />
<div class="answer">
</div>
</div>
<img class="img" src="img/beak.jpg" alt="beak" />
<img class="img" src="img/spoon.jpg" alt="spoon" />
<img class="img" src="img/milk.jpg" alt="milk" />
<img class="img2" src="img/egg.jpg" alt="egg" />
<img class="img2" src="img/thee.jpg" alt="tea" />
<img class="img2" src="img/meel.jpg" alt="meel" />
<img class="img2" src="img/passport.jpg" alt="passport" />
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
I'm not sure is this you looking for...
<html>
<title>test</title>
<head>
</head>
<body>
<style>
.top{background-color: #900; width: 100%; height: 100px;}
.middle{background-color: #090; width: 100%; height: 600px; float: left;}
.sidebar{background-color: #ccc; width: 10%; height: 600px; float: left;}
.container{background-color: #000; width: 90%; height: 600px; float: left;}
.row{background-color: #fff; width: 100%; height: 100px; float: left;}
.footer{background-color: #090; width: 100%; height: 100px; float: left;}
.slice{background-color: #069; width: 33%; height: 100px; float: left;}
</style>
<div class="top">top</div>
<div class="middle">
<div class="sidebar">sidebar</div>
<div class="container">
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
<div class="row">
<div class="slice">1</div>
<div class="slice">2</div>
<div class="slice">3</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
I have been stuck with this problem for almost two days already, I am a quite new programmer, and it's probably quite easy to solve.
I have to make a small game with images and words, but the images won't resize. Before they would just resize in <style> however I wanted them, but now they won't even move an inch.
I am sure that the stylesheet is linked correctly because everything else works just fine.
This is my code, can someone figure out how to solve this?
I already looked for answers everywhere but nothing fits the right criteria..
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
border-bottom: thick solid grey;
}
footer {
border-top: thick solid grey;
}
.points {
float: right;
}
.plaatje {
width: 100px;
height: 100px;
}
.plaatje2 {
float: left;
width: 25%;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
.img {
background-color: red;
width: 25%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div class="img">
<img src="img/cat.jpg" alt="cat" />
</div>
<div class="img">
<img src="img/beak.jpg" alt="beak" />
</div>
<div class="img">
<img src="img/spoon.jpg" alt="spoon" />
</div>
<div class="img">
<img src="img/milk.jpg" alt="milk" />
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
<div class="img">
<img src="img/spoon.jpg" alt="spoon" />
</div>
is wrong...
it should be:
<div>
<img class="img" src="img/spoon.jpg" alt="spoon" />
</div>
that way your css will target the actual image and give it a size...
.img {
background-color: red;
width: 25%;
height: 100px;
}
You need to specify the images as img under div class img. So, it should be like:
.img img {
background-color: red;
width: 25%;
height: 100px;
}
But as #foreyez said it's always better practice to give your class a better name so you can distinguish them from the HTML/CSS default parameters such as img
Here is your code:
https://jsfiddle.net/debraj/2dyn6vbt/