<!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>DOM about</title>
<!-- <style>
.red {
background: red;
color: white;
text-transform: uppercase;
font-size: 2rem;
}
.blue {
background: blue;
color: white;
text-transform: capitalize;
font-size: 2rem;
}
.title {
background: blue;
color: white;
font-size: 3rem;
text-transform: capitalize;
}
.btn {
background: #f15025;
color: white;
font-size: 1.2rem;
border: none;
}
a {
display: inline-block;
margin-top: 100vh;
}
</style> -->
</head>
<body>
<div class="container">
<ul class="list-items">
<li class="item">link</li>
<li class="item">link</li>
<li class="item">link</li>
</ul>
</div>
<!-- Javascript -->
<script src="app.js"></script>
</body>
</html>
When I run this code I get no issues on my live server concerning the displaying of my links on top of eachother in the div.
BUT when I uncomment the styles section my lists are suddenly spread around huge individual containers. I don't understand how that is possible. Can someone please clarify what context/syntax I am forgetting.
I just started learning how to code this week so forgive me if this is obvious.
The Problem was the margin-top: 100vh; for a tag.
<!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>DOM about</title>
<style>
.red {
background: red;
color: white;
text-transform: uppercase;
font-size: 2rem;
}
.blue {
background: blue;
color: white;
text-transform: capitalize;
font-size: 2rem;
}
.title {
background: blue;
color: white;
font-size: 3rem;
text-transform: capitalize;
}
.btn {
background: #f15025;
color: white;
font-size: 1.2rem;
border: none;
}
a {
display: inline-block;
/* margin-top: 100vh; Thats the problem */
}
</style>
</head>
<body>
<div class="container">
<ul class="list-items">
<li class="item">link</li>
<li class="item">link</li>
<li class="item">link</li>
</ul>
</div>
<!-- Javascript -->
<script src="app.js"></script>
</body>
</html>
Your links are spreading because you are giving margin-top: 100vh. So each a tag gets margin-top of 100vh. The problem is in the following place in style tag.
a {
display: inline-block;
margin-top: 100vh;
}
Related
I want to make this icon before this text
I got this code in HTML
<div class="header" > <img src="cir.png" style="height:30px;"/> email things</div>
and this in styyle css
.header {
background-color: gray;
grid-column-start: 1;
grid-column-end: 3;
display: grid;
align-items: center;
padding-left:100px;
color: white;
font-size: 3;
}
You can do that by simply removing the grid configurations of your <style>, effectively having:
<style>
.header {
background-color: gray;
padding-left: 100px;
color: white;
font-size: 3;
}
</style>
Here's a snippet you can play with:
https://codesandbox.io/s/beautiful-framework-e5g9ci?file=/index.html:106-287
Use <i> in the HTML for icons, you can mess around with its page placement in the CSS file
I don't know how to do it grid, but if you use "display: flex;" you can get the result that you want.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
</head>
<style>
.header {
display: flex;
align-items: center;
background-color: gray;
padding-left: 100px;
color: white;
font-size: 3;
}
.header img {
margin-right: 10px;
}
</style>
<body>
<div class="header">
<img src="/icon.png" style="height:30px;" />
<p>email things</p>
</div>
</body>
</html>
So I was just writing some html and CSS stuff for fun, but only one of all the lines in my code is working here's my code
<!DOCTYPE html>
<Html Lang="en">
<Head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Minecraft</title>
</head>
<body>
<div class="container">
<div class="border">
<div class="content">
<P>ihc</P>
</div>
</div>
</div>
<center>
<footer>
<p style="font-size: 1%;">© Copyright 2022</p>
</footer>
</center>
<script src="script.js"></script>
</body>
</html>
h1 {
margin: 16px;
font-size: 24px;
font-weight: 600;
line-height: 36px;
font-family: EuclidCircularA-Regular;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin: auto 16px;
font-style: normal;
font-family: EuclidCircularA-Regular;
}
.container {
width: 100%;
height: 100%;
}
.border {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
}
.content {
width: 90%;
height: 90%;
Background-color: rgb(255,255,255);
}
And all I can see is this:
copyright text and a black box with no text even though there should be text
What should I do? Add styling for the "container" div? I'm not very good at this stuff so help would be appreciated.
You need to change .container height to 100vh and background color of .content to black.
Here you go:
h1 {
margin: 16px;
font-size: 24px;
font-weight: 600;
line-height: 36px;
font-family: EuclidCircularA-Regular;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin: auto 16px;
font-style: normal;
font-family: EuclidCircularA-Regular;
}
.container {
background-color: rgb(0, 0, 0);
width: 100%;
height: 100vh;
}
.border {
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
}
.content {
width: 90%;
height: 90%;
background-color: rgb(0, 0, 0);
}
<!DOCTYPE html>
<Html Lang="en">
<Head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Minecraft</title>
</head>
<body>
<div class="container">
<div class="border">
<div class="content">
<p>ihc</p>
</div>
</div>
</div>
<center>
<footer>
<p style="font-size: 1%;">© Copyright 2022</p>
</footer>
</center>
<script src="script.js"></script>
</body>
</html>
As you can see in the CSS below, I have the height set to "50vh" which is causing the hover selector to be triggered underneath and over the text rather than just on the text. I have tried to lower the height but it moves the text upwards. Is there a way to stop it from triggering unless the cursor is over the actual text while still keeping the text lowered?
body {
background-color: #efefef;
overflow: hidden;
}
.logo h1 {
align-items: center;
color: #262626;
display: flex;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: 50vh;
justify-content: center;
max-width: 100px;
margin: auto;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
Give this a try. You should set the flex properties on the parent div only, and not the h1. This way, you can manipulate the height of the h1 and the width in which the :hover is activated.
body {
background-color: #efefef;
overflow: hidden;
}
.logo {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #262626;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: fit-content;
width: fit-content;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
</head>
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
I am writing an HTML Document. I am trying to make no space between a p and a div. There were no error messages included.
I have already tried:
adding 0px margin, padding to the p element and div element
making no whitespace between them in the code
Code:
#IO-out {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings";
}
.t.normal {
color: white;
background-color: black;
}
html
<head>
<title>
ivyghostkit
</title>
<link rel="stylesheet" href="common.css" type="text/css">
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
<!-- p elements with class "pn" are added here using javascript -->
</div>
<p id="VoidKeyboard"></p>
</div>
<script src="g.core.js"></script>
</body>
</html>
For clarification, the problem is that noticeable space is inbetween #VoidKeyboard and all p elements in #IO-out.
Add this in your css file
p{
margin: 0;
padding: 0;
}
And add some text in your markup..
Here is the full code
<!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>
<style>
#IO-out {
width: 100%;
height: 100%;
/** make void keyboard work **/
margin: 0px;
padding: 0px;
}
p{
margin: 0;
padding: ;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
color: white;
background-color: black;
}
</style>
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
p elements with class "pn" are added here using javascript
</div>
<p id="VoidKeyboard">Remove Spacing</p>
</div>
</body>
</html>
I am slightly new to html and css and want to create my own portfolio. I have some problems with the classes though. Whenever I try to call them in css it doesn't seem to do what its supposed to do.
When I call it without using classes it works perfectly fine.
Hope somebody can help and find my mistake,
thanks in advance.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE
Changed css but still doesn't work.
This class won't work.
You pointed to the link with class header_nav. But you don't have it.
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
It should be (link inside the class .header_nav)
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE:
I've included the snippet. Is it what you want?
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
UPDATE 2
Order in the CSS is really mater. If you want to enforce your style you can use !important after the style. (Although I saw the articles where it's considered as bad practice.)
.header_nav a {
font-family: arial;
display: block;
color:white!important;
text-align: center;
padding: 14 px 16 px;
text-decoration: none!important;
}
I'm not sure what you are expecting, but it appears your class declarations are a little backwards. It should be class then element so,
.header_nav li { your styles }
.header_nav a { your styles }
Make the following changes:
From
a.header_nav {
}
To:
.header_nav a {
}
and also you can make change to html for easiness
body{
background-color: #f1f6fe;
}
ul.header_nav_container {
float:right;
padding: 20px;
}
ul.header_nav_container li.header_nav {
list-style-type: none;
float: left;
padding: 0 20px
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav_container">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
If class doesn't work you can specify ids and pass the styles similarly