I was learning CSS variables and doing some basic stuff.
/* Variables names must start with -- */
/* They are accessed with var(--name) */
:root {
--clr: blue;
--bgc: whitesmoke;
}
div{
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
background-color: var(--bgc);
margin: 50px;
}
.hello{
color: var(--clr);
}
.world{
color: var(--clr);
}
<!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="variables.css">
</head>
<body>
<div class="hello"></div>
<div class="world"></div>
</body>
</html>
When I ran the HTML using live-server in VS code.
I got a third and extra div out of nowhere.
which had the following properties
The extra div (and its inner div) is injected by the live server you are using.
While its inner div has display:none so you don't see it, your CSS has set a height and background color on all divs. This means the outer injected div is visible.
It picks up the background-color: var(--bgc) and the variable --bgc has been set as whitesmoke in root.
You could try running your code just from your browser on your PC and you should see just the Hello and World divs without anything extra being injected.
Related
So I'm new to programming and I've been learning on my own through the Odin Project. The first project I've been working on is a recreation of the Google search site. I've got some of the basic HTML layout but my CSS is not being applied, I originally started this project on codepin and everything worked. When I switched to vscode... nothing. Here's what I have so far for HTML and CSS.
.flex-container {
height: 100vh;
border: 3px solid blue;
display: flex;
justify-content: center; /* x-axis */
align-items: center; /* y-axis */
}
.flex-item {
font-size: 90px;
font-family: 'Noto Sans JP', sans-serif;
#G {
color: #4885ed;
}
#o {
color: #db3236;
}
#o1 {
color: #f4c20d;
}
#g {
color: #4885ed;
}
#l {
color: #3cba54;
}
#e {
color: #db3236;
}
.foot {
background-color: #A5A6A1;
height: 2em;
}
.ad {
color: blue;
}
<!DOCTYPE html>
<html>
<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>Google</title>
<style>
#import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP&display=swap');
</style>
</head>
<body>
<div class ='flex-container'>
<!-- Try using 'span' instead of a div for 'Google'.-->
<div class='flex-item'>
<span id='G'>G</span>
<span id='o'>o</span>
<span id='o1'>o</span>
<span id='g'>g</span>
<span id='l'>l</span>
<span id='e'>e</span>
</div>
<input type="Search">
</div>
<footer class='foot'>
<span id='ad'>Advertising</span>
<span>Business</span>
<span>How search works</span>
</footer>
</body>
</html>
This is my first post so hopefully its a good question. Any and all help is appreciated. Thanks!
You forgot to link your css file to your html file. Add a link tag at the end of the head tag, in case you have the html and css files in the same directory and your css file's name is styles, you can do like this:
<head>
...
<link rel="stylesheet" href="styles.css">
</head>
The reason it works on Codepen is because they do the linking work for you, so the html, js and css file are automatically connected to each other
Looking at CSS code it seems like it is in different file. So in this case you have to link CSS to HTML file you can do this by using <link rel="stylesheet" href="yourfilepath"> inside head tag.
-- You have to call the css file that you made with:
<link rel="stylesheet" href="the file of the css">
I want to make this code good for all devices. If I open it with like a smartphone, it looks very bad.
If you can tell me something to improve too, I would appreciate it!
Here is my index and stylesheet.
Thanks!
index.html:
.background {
width: 99%;
height: 100%;
}
.title {
margin-top: 9%;
color: white;
font-family: "Lucida Console", "Courier New", monospace;
}
.subtitle {
margin-top: 1%;
color: #9c9c9c;
font-family: "Lucida Console", "Courier New", monospace;
}
.socials {
bottom: 0;
}
.fa {
padding: 20px;
font-size: 30px;
width: 1%;
height: 2%;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
float: left;
clear: both;
}
.fa-telegram {
background: #34abdf;
color: white;
float: left;
clear: both;
}
.github {
margin-right: 55px;
}
<!DOCTYPE html>
<html>
<head>
<title>zDoctor_ | Developer</title>
<meta name="keywords" content="Minecraft, zDoctor, zDoctor_, Telegram, Github, Doctor, doctor">
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body style="background-color: #262a2e" class="background">
<div class="title"><center><h1>zDoctor_</h1></center></div>
<div class="subtitle"><center><h3>Java & Web Developer(I think)</h3></center></div>
<div class="socials">
</div>
<div class="github">
<center><a class="github-button" href="https://github.com/zDoctor-Dev" data-size="large" aria-label="Follow #zDoctor-Dev on GitHub">Follow #zDoctor-Dev</a></center>
</div>
</body>
</html>
It says there is too much code and I need to add more details, but I don't know what to write ^^' so I'm just typing some random things.
One trick is to make absolutely everything relative to the viewport. That way you at least get a properly responsive site on all window aspect ratios.
Whether or not it looks OK on all sizes is something to be considered once you've done this - for a simple design, for example with lots of stuff just centered, you should not need to go into media queries.
You can't make a circle by having width in % and height in %, they are %s of different things so you won't get the underlying square you need. Think about using vmin for the units here and giving them each say 3vmin and see how it works out.
You can even define your font sizes in terms of vmin and they will adjust along with everything else (though be aware that going very very small wont work on some browsers).
So, if you find yourself using px, stop and reconsider.
Also look up more 'modern' ways of doing things like achieving centering and space filling. e.g. flex. Check that everything you are using is both standard and not deprecated. For example using HTML for formatting such as '<center'> isn't now the thing.
For the future, start thinking mobile first when you do a design - but as I say the design you have shown so far should be fine on a smaller viewport if you head for vmin.
edit your meta tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
You can't simply improve like this. You have to add a meta tag for view port in HTML like: <meta name="viewport" content="width=device-width, initial-scale=1.0">In CSS you have a feature named media query like
#media screen and (min-width: /*Your size in which you want the thing to change*/930px) {
body {
/*Your command like mine is*/
background-color: black;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
The above code will change when the size will be decreased. You have to make one for yourself. This is my tip to use query string.
How can I make the input element completely transparent so that it has the body background image and not the background colour of its parent?
HTML code:
body{
background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
}
#wrapper{
background-color: white;
height: 100px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<input type="text">
</div>
</body>
</html>
Add css as follows:
#wrapper > input {
background-color: transparent;
border: none;
}
If you want to remove the border on focus too, then add:
#wrapper > input:focus {
outline:none;
}
You can do it this way :
#wrapper{
background-color: white;
height: 100px;
}
#wrapper > input
{
background-color: transparent;
border: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrapper">
<input type="text">
</div>
</body>
</html>
Similar answer was posted few years ago : set input transparent
As I understand you are trying to prevent child element from inheriting parent's background color.
The only way to do is overriding the style
I don't know if this works for you but you can do:
input{
background-image:url("image.jpg");
border: none;
}
you can also do whatever part of the background image you want to display instead input field, simply cut that part of the image and set as a background image for the input field.
How to disable page zoom in my code? I mean zooming like this:
Note: I only want it to work in chrome.
Here is the code:
*{
overflow: hidden;
}
.container {
overflow: hidden;
justify-content: center;
align-items: center;
}
.number-ticker {
position:absolute;
overflow: hidden;
top:0px;
left:0px;
color: #D9D9D9;
font-size: 2em;
font-family: Roboto Light;
overflow: hidden;
height: 1.1em;
background-color: transparent;
}
.number-ticker .digit {
overflow: hidden;
float: left;
line-height: 1;
transition: margin-top 0.75s ease-in-out;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number Ticker</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="number-ticker.css">
</head>
<body>
<div class="container">
<div class="number-ticker" data-value="10"></div>
</div>
<script src="number-ticker.js"></script>
</body>
</html>
I have used these in HTML head with no success...
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>
and this one:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
But unfortunately, it still zooms... !!! Am I missing something?
I have seen pages that don't zoom at all... So I know there should be a working way ...
I've had this problem before, too, and I think Chrome ignores "user-scalable=no" (at least on desktops).
Check out this answer:
https://stackoverflow.com/a/49371150/12343443
For those who may encounter this annoying problem. you only need to use vh and vw in all of your sizes (fonts, elements, etc...) instead of px and em.... those units do not follow page zoom!
I am making a website, which contains a game. The instructions area is supposed to be on the right side of the screen, and the upgrades area is supposed to be on the left. Right now, this is what I have.
(please don't comment on anything besides the div tags, I know I'm messing up the sizes)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
CRayen's answer didn't look like it actually accomplished what you wanted, so take a look here.
I did a few things:
Moved the upgrades div out of the text1 div so they are both
direct children of the game div
Set game to have a display value of flexbox, which is a new-ish CSS layout technique that really helps with this style of design.
Gave both upgrade and instruction boxes a flex-basis of 20%, which is similar to your width: 20%;
Removed the margin-right on upgrades
I highly recommend looking into Flexbox for more info on how to create and edit layouts like this!
I have made few changes to the CSS:
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
padding: 15px
}
.text1 {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: right;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
h2 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.upgrades {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: left;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>