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.
Related
I am making some portfolio and this question occurs in my favourite music portfolio. You can see the music name that is long will go to another line and will automatically align the text to center. However, the music name that isn't long will not align text to center. How can I do?
img{
width: 160px;
height: 90px;
}
.container{
display: grid;
grid-gap: 10px;
}
.music{
background: #123;
width: 400px;
height: 90px;
}
a{
display: flex ;
}
p{
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<article class="music">
<a href="#">
<img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
<p>See you again</p>
</a>
</article>
<article class="music">
<a href="#" class="music-child">
<img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
<p>Deep Chills - Run Free</p>
</a>
</article>
</div>
<script src="script.js"></script>
</body>
</html>
You don't need display: flex; in your p tag, and you may want to add width: 100%;
img {
width: 160px;
height: 90px;
}
.container {
display: grid;
grid-gap: 10px;
}
.music {
background: #123;
width: 400px;
height: 90px;
}
a {
display: flex;
}
p {
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
align-items: center;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<article class="music">
<a href="#">
<img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
<p>See you again</p>
</a>
</article>
<article class="music">
<a href="#" class="music-child">
<img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
<p>Deep Chills - Run Free</p>
</a>
</article>
</div>
<script src="script.js"></script>
</body>
</html>
You can just add margin-left and margin-right in p tag as following:
margin-left: auto;
margin-right: auto;
So complete style of p tag is as following:
p {
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
}
Hope to helpful!
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>
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>
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}
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"/>