I've been trying to display an image but it doesn't work. I tried to take off the / at the end of the <img> tag, but it doesn't work neither. My favicon doesn't appear too, and I don't know why.
Here is my code:
img.check {
width: 15%;
margin-top: 150px;
margin-left: 790px;
}
.text {
font-family: 'Roboto', sans-serif;
font-size: 20px;
margin-top: 150px;
margin-left: 625px;
}
.redirect {
font-family: 'Roboto', sans-serif;
font-size: 8px;
margin-top: 50px;
margin-left: 830px;
color: blue;
}
.redirect:hover {
color: black;
text-decoration: none;
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<title>Your Password has been changed.</title>
<link rel="icon" type="image/png" href="img/zimbrafav.png" />
</head>
<body>
<img src="img/check.png" class="check" alt="check">
<div class="text">
<p>
<h1>Your password has been changed!</h1>
</p>
</div>
<div class="redirect">
<p>
<h1>Go to Google > </h1>
</p>
</div>
</body>
</html>
Not quite sure but maybe it's because you are working with relative paths instead of absolute.
So
<img src="img/check.png" class="check" alt="check"/>
would turn into
<img src="/img/check.png" class="check" alt="check"/>
Related
Anything after closing </body> tag is not visible.
The output text is not visible in a browser. I have tried adding and removing <div> and <body> tags around it. I can't seem to troubleshoot my mistake.
h1{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(255, 118, 193);
float: right;
position: relative;
right: 1020px;
}
.logo{
float: left;
width: 5%;
position: relative;
top: 20px;
left: 40px;
}
#bg{
top: 0;
left: 0;
width: 100%;
position: fixed;
justify-content: space-between;
display: flex;
background-color: rgb(222, 255, 102);
}
h4{
color: black;
font-size: x-large;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<body>
<header id="bg">
<div>
<h1>Giovanni's Guitars</h1>
<img class="logo" src="logo1.svg" alt="a logo">
</div>
</header>
</body>
<div>
<h4>Guitars and Bases</h4>
</div>
</html>
Please help me.
Your div tag should be inside the body tag
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<body>
<header id="bg">
<div>
<h1>Giovanni's Guitars</h1>
<img class="logo" src="logo1.svg" alt="a logo">
</div>
</header>
<div>
<h4>Guitars and Bases</h4>
</div>
</body>
</html>
You can't do that. HTML is designed in a way that all page elements are placed inside the <body></body> element.
If you need a wrapper just add a <div> inside your <body> element.
All your content should be inside your body element.
In addition, in your #bg selector you set position="fixed" which makes the other content after it to "disappeared".
It is not the best practice, but you can do it like this:
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type="text/css"
/>
</head>
<body>
<header id="bg">
<div>
<img class="logo" src="logo1.svg" alt="a logo" />
<h1>Giovanni's Guitars</h1>
</div>
</header>
<div class="content">
<h4>Guitars and Bases</h4>
</div>
</body>
</html>
h1 {
font-family: "Inknut Antiqua", sans-serif;
color: rgb(255, 118, 193);
display: inline-block;
vertical-align: middle;
}
.logo {
width: 5%;
margin: 50px;
display: inline-block;
vertical-align: middle;
}
#bg {
top: 0px;
right: 0px;
left: 0px;
width: 100%;
height: 150px;
position: fixed;
justify-content: space-between;
display: flex;
background-color: rgb(222, 255, 102);
}
h4 {
color: black;
font-size: x-large;
text-align: center;
}
.content {
margin-top: 150px;
}
Your body tag should be closed before html tag.
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
I'm new to html/css and I know this has been asked many times before but the answers didn't help / could not comprehend them. I assume it has something do to with the way I arranged the page in on the html side. Thanks
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div.img {
opacity: 0.3;
border-radius: 44px background-color:#555;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Let Go</title>
</head>
<body>
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
</body>
</html>
Do the radius on the image, not the element that contains it. Also, you are missing a semi-color before you set the background color
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div img {
opacity: 0.3;
border-radius: 44px;
background-color:#555;
}
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
TWo mistakes: The selector has to be div.img img to affect the image itself, and there was a semicollon missing:
div.text {
color: yellow;
font-family: sans-serif;
background-color: blue;
line-height: 6em;
text-align: center;
}
div.img img {
opacity: 0.3;
border-radius: 44px;
background-color: #555;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Let Go</title>
</head>
<body>
<div class="text">
<h1>Lore Ipsum?</h1>
</div>
<div class="img">
<img src="http://www.globaldots.com/wordpress/wp-content/uploads/2016/10/ddos_attack-768x550.jpg" alt="">
</div>
</body>
</html>
The website is done and looks good when the browser is in maximized state but when I minimize the page, the heading and the footer changes its format and looks really bad. I need some help to fix this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
</style>
<body>
<div class="Coming Soon" style=" color: white;">
<h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1>
<style>
a{text-decoration: none;
color: white;}
</style>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p>
<div class="footer" style=" color: white;">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div>
</div>
</body>
</html>
Here is how I have a ton of my pages setup. This one uses Bootstrap components. I have a cutom.css page to override the Bootstrap css.
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
p {
font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px;
}
h1 {
text-align: center; font-family: Verdana; font-size: x-large; font-style: italic;
}
a {
text-decoration: none;
color: white;
}
.Coming Soon {
color: white;
}
.Logo {
width: 130px; height: 80px; margin-right: 100px;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>WEBSITE TITLE HERE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<meta name="Description" content="ADD DESCRIPTION.">
<meta name="Keywords" content="ADD KEYWORDS">
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<body>
<div class="container">
<div class="Coming Soon">
<h1>Some Header</h1>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p>Some Paragraph</p>
<div class="footer">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</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/