I want to be able to display 3 colums with images, titles and buttons shown below. I know I am using split left and right but I am unable to create 3 columns on my own. I am using this for my portfolio, if you require anymore information or an example of my portfolio so you can understand what I would like then please do ask.
<!DOCTYPE html>
<html>
<head>`enter code here`
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Joe's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="fix">
<div class="nav-area">
<ul class="menu-area">
<li>Home</li>
<li>Coursework</li>
<li class="active">Future Aspirations</li>
<li>About Me</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div class="banner-text-name">
<h2>Joe Busby</h2>
</div>
</header>
<div class="split left">
<div class="centered">
<img src="Assets/coding.png" alt="Online World">
<h2>Website Developer</h2>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<span class="spot"></span>Learn More
</div>
</svg>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="Assets/shield.png" alt="Security">
<h2>Security Analyst</h2>
<div class="svg-wrapper">
<svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
<rect id="shape" height="40" width="150" />
<div id="text">
<span class="spot"></span>Learn More
</div>
</svg>
</div>
</div>
</div>
</body>
</html>
//CSS//
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
.left h2 {
color: aliceblue;
font-family: sans-serif;
}
.right h2 {
color: aliceblue;
font-family: sans-serif;
}
.right {
right: 0;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
}
you could always use bootstrap as already said.
if you rather do it with pure css and html see http://jsfiddle.net/a6yecjqb/4/
.split {
height: 100%;
width: 33.33%;
position: fixed;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.center {
left:33%;
right:33%;
background: #0F2027;
background: linear-gradient(to bottom, #0F2027, #080e10);
}
if you change the width of split and add a center block you will get 3 div's in separate rows. if more explanation is needed let me know
Why not using grid?
div.example {
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
}
When you create elements inside that div, they will appear automatically in 33%
You can do that by using flexbox: here is a quick example:
body {
background: gray;
}
.wrapper {
margin: 0 auto;
width: 500px;
display: flex;
}
.columns {
padding: 5px;
color: black;
position: relative;
height: 500px;
overflow-x: hidden;
background: white;
margin-right: 5px;
}
.columns h2 {
color: black;
font-family: sans-serif;
}
.centered img {
width: 150px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Joe's Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
<div class="columns ">
<div class="centered">
<img src="https://via.placeholder.com/150x150" alt="Online World">
<h2>Website Developer</h2>
</div>
</div>
</div>
</body>
</html>
https://jsbin.com/xipeduxuda/
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'm making a text editor with a sidd nav-var. When the mouse hovers on the nav-bar its width increases and the editor width decreases. But the width of the editor doesn't change even when the width variable created by me is changing.
Here is my program:
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght#200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>
As you can see there is a 10px gap b/w the nav-bar and the editor and I have also updated the values when it is hovered. But when the nav-bar is hovered the width of the editor doesn't change.
Similar question: link
I have also tried what is mentioned in the Similar question but still it doesn't work...
The variable --nav-btn-width works as intended but the variable --nav-width doesn't work even though both are literally the same usages.
On the hover you are defining a variable that only has scope within the navbar element.
To define a variable for the editor element select on navbar hover plus editor, this will select for the editor element which comes immediately after the navbar.
#import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght#200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
}
#navbar:hover + #editor {
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>
I want to create a #necker div with the same height, and width, and to center him the same way as my #header div that fixed to top of screen.
I tried to copy the data from the #header div to #necker div and margin in down from top. Failed :(. Could you help me?
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
The div can't center the same as the menu, because the position: fixed casues it to ignore the default margin from the browser stylesheet. If you add margin: 0 to body the two elements will be centered in the same spot.
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
body {
margin: 0;
}
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
<div class="makeitscroll"></div>
What's exactly what you are not expecting from your code? If the problem is that the two div hasn't got the same width, try removing the margin and padding from the body (so 80% results in both cases in the same number of pixels).
The fixed block use the complete viewport width to calculate the 80%, instead, the #necker use the body width (using the default margin or padding that the browser is applying)
body{
margin: 0px;
padding: 0px;
}
If that's not your problem, I can't see what you need to achieve, please, could you be more specific?
I believe below solution will help you. Thing you missed is default margin <body> has. Deleting it fixes the issue.
Key part
body {
margin: 0;
}
Snippet
body {
margin: 0;
}
#header {
position: fixed;
display: inline-block;
top: 0px;
margin: 0 10%;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
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/