I would like to know how can I move the text next to the little images. As you can see it in the image, the text and icons are not completely in-line with each other.
h1.titu{
margin-left: 370px;
margin-top: 20px;
padding-top: 1px
color: #fff;
font-family: arial;
font-size: 7vw;
text-transform: uppercase;
background: url(../images/lines.jpg);
background-size: cover;
-webkit-text-fill-color:
transparent;
-webkit-background-clip: text;
}
.socialmedia {
margin-left: 400px;
}
img.eye{
float: right;
padding-right: 240px;
}
img.instagram{
padding-left: 190px;
}
img.twitter{
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body id ="contact">
<h1 class="titu">contact</h1>
</body>
<div class="socialmedia">
<p >
<img class="insta" src="../images/insta.png" width="60">
Juliancmr
</p>
<p>
<img class="twitter"src="../images/twitter.png" width="60">
Julian Mancera
</p>
<p>
<img class="twitter"src="../images/in.png" width="60">
Julian.mr mancera
</p>
<p>
<img class="mail" src="../images/mail.png" width="60">
Julian.mr#hotmail.com
</p>
</div>
</html>
Using vertical-align on images you can tweek it's position like this
.socialmedia img{
vertical-align:-10px;
}
Tweak the -10px up or down to your liking
If you put the images and text in a div that has display: flex on it, it will align things center. Something like:
<div class="flex-row">
<img src="image-src.jpg">
<p>caption<p>
<img src="image-src.jpg">
<p>caption<p>
</div>
Working fiddle:
https://jsfiddle.net/02sgLq1n/2/
Firstly, your body tag in the given html is prematurely closed (it's before the div, it should be at the end of the body content, i.e. before the </html> tag). Also, as mentioned in a previous answer, the body tag does not take an id, it is a native tag and can be referred to as body{} in css.
As for the matter of positioning the icons, I too would recommend flex, although given that you are a beginner, it may be running before you can walk. I have linked to an article that is a good read if you want to use this.
You are using quite a few classes as-is to style your icons. If you want your icons to have similar height/width/position, I would recommend using one icon class, and setting the img src in the HTML.
Sample snippet using flex:
#container {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
align-items: center;
margin-left: 200px;
}
.icon {
margin: 10px;
height: 50px;
width: 50px;
background-color: lightgrey;
border: 1px solid grey;
}
<div id="container">
<div class='flex-row'>
<img class='icon' src=" " alt="Insta icon">
<p>Instagram</p>
</div>
<div class='flex-row'>
<img class='icon' src="https://image.flaticon.com/icons/svg/1051/1051280.svg" alt="Twitter icon">
<p>Julian.mr mancera</p>
</div>
<div class='flex-row'>
<img class='icon' src=" " alt="LkedIn icon">
<p>LinkedIn</p>
</div>
<div class='flex-row'>
<img class='icon' src=" " alt="Email icon">
<p>E-mail</p>
</div>
</div>
OR you could use display:inline-block with vertical-align:middle to align your img/paragraphs as follows: (jsfiddle)
#container {
display: inline-block;
}
.socialmed {
display: inline-block;
margin: 0 0 0 200px;
}
.smtext {
color: red;
font-family: "Verdana", sans-serif;
font-size:10pt;
}
.icon {
margin: 10px;
height: 50px;
width: 50px;
background-color: lightgrey;
border: 1px solid grey;
}
.icon, .smtext {
display: inline-block;
vertical-align: middle;
}
<div id="container">
<div class='socialmed'>
<img class='icon' src=" " alt="Insta icon">
<p class='smtext'>Instagram</p>
</div>
<div class='socialmed'>
<img class='icon' src="https://image.flaticon.com/icons/svg/1051/1051280.svg" alt="Twitter icon">
<p class='smtext'>Julian.mr mancera</p>
</div>
<div class='socialmed'>
<img class='icon' src=" " alt="LkedIn icon">
<p class='smtext'>LinkedIn</p>
</div>
<div class='socialmed'>
<img class='icon' src=" " alt="Email icon">
<p class='smtext'>E-mail</p>
</div>
</div>
Hope this helps!
Related
There is a white space before the image in the second row. I don’t know why this is happening.
Margin and padding are fine.
All images are of the same size, but there is white space on the second row before the image. 2 more images can fit in there.
Upon inspecting it's just showing white space from the body.
No excess margin or padding is there from any of the images.
Used – "float: left;"
The images on the third row and further are fine.
Can someone figure out the issue, why is this happening?
Click to see image
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="gallery.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap" rel="stylesheet">
</head>
<body>
<p>Photo Gallery</p>
<img src="a (1).jpg">
<img src="a (2).jpg">
<img src="a (3).jpg">
<img src="a (4).jpg">
<img src="a (5).jpg">
<img src="a (6).jpg">
<img src="a (7).jpg">
<img src="a (8).jpg">
<img src="a (9).jpg">
</body>
</html>
CSS File:
img{
width: 30%;
float: left;
margin: 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
This is happening because the images are of different height. The best solution with display block layout will be using a width to the image and setting the display: inline-block
img{
width: 30%;
/* margin: 1.66%; */
padding: 0;
display: inline-block;
vertical-align: middle;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
<img src="https://www.w3schools.com/html/img_girl.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
</div
Or else you can go for flex display. This will ensure that the child elemets are of same height, without explicitly mentioning the height.
.image-item {
display: flex;
flex-direction: column;
width: 30%;
margin: 1.66%;
padding: 0;
justify-content: center;
}
img{
width: 100%;
}
.image-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
p {
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width: 30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
<div class="image-item">
<img src="https://www.w3schools.com/html/img_girl.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
</div>
It's the margin property.
img{
width: 30%;
float: left;
margin: 0 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
<p>Photo Gallery</p>
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
I am trying to write my contact page, it's for a personal website that I write as part of a project for school. I am trying to display little logos of certain social media sites, and my profile name/mail address next to the images. I have set up an unordered vertical list, I have elements for each individual < li > tag and here comes the problem: Facebook, for example, works fine. The logo is there, and a link to my profile next to it, with the text perfectly aligned vertically right in the center. The problem comes with paragraphs. For my Yahoo Mail address, for example, I cannot provide a link to my profile, so I instead just write my address as simple text between < p >< /p > tags. This text will not align. I don't know what to do. I've been trying stuff out and looking for solutions all over the internet for hours and nothing works. I do admit my HTML and CSS experience is very limited, but please help me. I will attach both my HTML code and the CSS file and I hope someone will take the time to see how they render and maybe help me out. Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Pagina de contact">
<meta name="author" content="Matei Popa">
<link rel="stylesheet" type="text/css" href="css/contactstyle.css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
<img class="image" src="img/contact-pg/facebooklogo.jpg" alt="Logo
Facebook">
</a>
</div>
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
Matei Popa
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
<img class="image" src="img/contact-pg/instagramlogo.jpg" alt="Logo
Instagram">
</a>
</div>
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
matei.popa.332
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/twitterlogo.jpg" alt="Logo Twitter">
</a>
</div>
<a href="https://twitter.com/mateiutz2001" target="_blank">
#mateiutz2001
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo
Mail">
</div>
<div class="paragraph">
<p>alex.matei1808#yahoo.com</p>
</div>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/gmaillogo.jpg" alt="Logo Gmail">
</div>
<div class="paragraph">
<p>
mattx1829#gmail.com
</p>
</div>
</div>
</li>
</ul>
</div>
<!-- add Phone number, Yahoo Mail, Gmail, Whatsapp, Skype, Reddit, Quora -->
</body>
</html>
Css:
#font-face
{
font-family: Sansation;
src: url(../font/Sansation_Regular.ttf)
}
body
{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
}
div.container
{
padding-top: 50px;
padding-left: 40px;
margin: 60px;
align-content: flex-start;
}
ul
{
list-style-type: none;
}
li
{
flex-direction: row;
width: 100%;
display: flex;
float: left;
height: 50px;
}
div.navlink
{
display: flex;
flex-direction: row;
width: 100%;
float: left;
text-align: left;
font-family: Sansation;
font-size: 24px;
padding: 10px;
}
a:link
{
color: #FFFFFF;
text-decoration: none;
background-color: transparent;
}
a:hover
{
color: #D1DC19;
background-color: transparent;
text-decoration: underline;
}
a:visited
{
color: #E47507;
background-color: transparent;
text-decoration: none;
}
a:active
{
color: red;
background-color: white;
text-decoration: underline;
}
div.img
{
display: flex;
flex-direction: row;
float: left;
align-content: center;
overflow: hidden;
}
div.paragraph
{
display: table;
margin: 0 auto;
color: #FFFFF;
font-family: Sansation;
padding-left: 0px;
width: auto;
height: 100%;
float: left;
overflow: hidden;
align-content: center;
text-align: center;
}
p
{
height: 100%;
vertical-align: top;
align-content: center;
}
.image
{
vertical-align: middle;
padding-right: 15px;
width: 30px;
height: 30px;
}
How it looks like now
You can provide a link for your Yahoo email address using mailto:youremail#address.com.
See: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_mailto
Your snippet of code for that li would then be:
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo Mail"></a>
</div>
alex.matei1808#yahoo.com
</div>
</li>
I tried using below code but the heading comes in next line.
The code is given below :
<div style="display:inline;">
<img src="abc.png" style="margin:10px 10px 10px 10px;width:97px;height:50px;" />
<h5 style="display:inline-block">Hello</h5></div>
Expected Output!!
Change your styles like below. Add float:left; to both img and h5 tags to get your result.
UPDATED OUTPUT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div style="display: inline-block;width: 100%;">
<img src="https://smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus.gif" style="float:left;" />
<h5 style="text-align:center;">Hello</h5>
</div>
</body>
</html>
Here I used inline styles as you are using that. But always try to avoid inline styles.
<div style="display: inline-block;width: 100%;text-align: center;">
<img src="https://placeholdit.imgix.net/~text?txtsize=12&txt=97%C3%9750&w=97&h=50" alt="img" style="text-align: left;float: left;" />
<h5 style="margin: 17px 0;">Hello</h5>
</div>
div {
display: flex;
align-items: center;
}
img {
margin: 10px 10px 10px 10px;
width: 97px;
height: 50px;
flex: 0 0;
}
h5 {
padding: 0;
margin: 0;
flex: 1 0;
text-align: center;
}
.div {
position: relative;
min-height: 70px;
}
.img {
position: absolute;
left: 0;
top: 0;
}
<h4>Center of text part</h4>
<div>
<img src="http://beerhold.it/97/50">
<h5>Hello</h5>
</div>
<hr>
<h4>Center of vieport</h4>
<div class="div">
<img class="img" src="http://beerhold.it/97/50">
<h5>Hello</h5>
</div>
Its on the same line
<div style="display:inline;background:red; float: left;">
<img src="http://image.flaticon.com/icons/png/128/33/33702.png" style="margin:10px 10px 10px 10px;width:97px;height:50px;"><h5 style="display:inline-block; background:blue;color:#fff; vertical-align:top;">Hello</h5></div>
Use vertical-align to align elements vertically (does not work for block elements).
div {
display: inline
}
h5 {
display: inline-block;
vertical-align: middle;
}
img {
margin: 10px;
width: 97px;
height: 50px;
vertical-align: middle;
}
<div>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
<h5>Hello</h5>
</div>
I didn't understand what's your problem. Just try this..
<div style="display:inline;">
<img src="abc.png" style="float:left; margin:10px 10px 10px 10px;width:97px;height:50px;" />
<h5 style="display:inline-block;">Hello</h5></div>
I am trying to align logos horizontally with the respective text underneath them so they look nice and in order. Currently, they are just vertical. I have searched this site and many others, and tried different solutions but nothing seems to work. Here is my code.
.intro-text {
color: #000000;
display: block;
width: 100%;
margin: 50px 0 0 0;
text-align: justify;
line-height: 1.8em;
}
.intro-text-3d {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-process {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-toolset {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
/** Logos **/
.logos-all {
display: block;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border: 0;
line-height: 50px;
max-width: 100%;
width: 5%;
height: auto;
margin-bottom: .95em;
}
strong {
display: block;
font-weight: 700;
text-align: center;
}
section h4 {
text-align: center;
}
<article>
<section>
<p class="intro-text">
Some text goes here.
</p></div>
<div>
<img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
<strong>CSS3</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
<strong>Javascript</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
<strong>Wordpress</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/>
<strong>PhP</strong>
</div>
</div>
</section>
<section>
<p class="intro-text-3d">
Some text goes here
</p>
<div class="logos-all">
<div>
<img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
<strong>3DS MAX</strong>
</div>
<div>
<img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
<strong>Cinema 4D</strong>
</div>
<div>
<img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
<strong>Blender</strong>
</div>
</div>
</section>
<section>
<h4>How the process works</h4>
<p class="intro-text-process">Some text goes here </p>
</section>
<section>
<h4>Design Toolset</h4>
<p class="intro-text-toolset">Some text goes here.</p>
<div class="logos-all">
<div>
<img src="img/photoshop-logo.png" alt="Photoshop" height="80" width="79"/>
<strong>Photoshop</strong>
</div>
<div>
<img src="img/illustrator-logo.png" alt="Illustrator" height="80" width="79"/>
<strong>Illustrator</strong>
</div>
<div>
<img src="img/gimp-logo.png" alt="Gimp" height="80" width="79"/>
<strong>Gimp</strong>
</div>
<div>
<img src="img/inkscape-logo.png" alt="Inkscape"/>
<strong>Inkscape</strong>
</div>
</div>
</article>
</section>
Because your images are inline-block, you need to put text-align: center on the parent (the <div>).
Alternatively:
You could also make your images display: block
Or using flexbox:
Make your <div> display: flex; flex-direction: column and your image width: auto;
You can use floats to align blocks with images and text horizontally and text-align to align images and text inside them.
Overflow hidden inside section clears floats inside them, in case you'd want to have background on it and it wouldn't display properly.
.intro-text {
color: #000000;
display: block;
width: 100%;
margin: 50px 0 0 0;
text-align: justify;
line-height: 1.8em;
}
.intro-text-3d {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-process {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
.intro-text-toolset {
color: #000000;
display: block;
width: 100%;
text-align: center;
line-height: 1.8em;
}
/** Logos **/
.logos-all {
display: block;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
border: 0;
line-height: 50px;
max-width: 100%;
width: 5%;
height: auto;
margin-bottom: .95em;
}
strong {
display: block;
font-weight: 700;
text-align: center;
}
section h4 {
text-align: center;
}
section {
overflow: hidden;
}
section > div {
text-align: center;
float: left;
width: 25%; /* 1/logos in row */
}
<article>
<section>
<p class="intro-text">
Some text goes here.
</p></div>
<div>
<img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
<strong>CSS3</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
<strong>Javascript</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
<strong>Wordpress</strong>
</div>
<div>
<img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/>
<strong>PhP</strong>
</div>
</div>
</section>
<section>
<p class="intro-text-3d">
Some text goes here
</p>
<div class="logos-all">
<div>
<img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
<strong>3DS MAX</strong>
</div>
<div>
<img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
<strong>Cinema 4D</strong>
</div>
<div>
<img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
<strong>Blender</strong>
</div>
</div>
</section>
<section>
<h4>How the process works</h4>
<p class="intro-text-process">Some text goes here </p>
</section>
If you wish to use Bootstrap you can use bootstrap panel .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 1</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 2</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
</div>
<div class="panel-footer">Title 3</div>
</div>
</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/