New to HTML. During a book exercise, I was commenting some code using Notepad++ editor and I noticed that when I commented above a segment, that the rendering in the browser is changed (I thought HTML comments do not affect the rendering at all).
What I am attempting to do is simply change a block color to yellow within a black border using classes and the "div" element. When I comment, the block becomes white, instead of yellow (which it appears WITHOUT the comment). I again, restate that the ONLY thing I change is the comment to cause this discrepancy Can someone explain to me what is happening/what I am doing wrong? Thank you.
(This is the code that works: it changes my box to yellow)
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
.div-box-yellow{
background-color: yellow;
}
</style>
<body>
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
(This is the commented code that nullifies my yellow box color )
<DOCTYPE! html>
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
<!--comment-->
.div-box-yellow{
background-color: yellow;}
</style>
<body>
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
You are writing the comment in the CSS style tag which needs /* instead of <!-- for block comments. Using the <style> is basically like a css file rather than a html file.
<html>
<head>
<meta charset= utf-8>
<title>div padding border margin test 1</title>
</head>
<style>
.box1{
border-style: solid;
border-color: black;
border-width: 3em;
text-align: center;
}
/* how to block comment css comment */
.div-box-yellow{
background-color: yellow;}
</style>
<body>
<!-- how to block comment html comment -->
<div class="box1 div-box-yellow"><p>hello</p></div>
</body>
</html>
Related
Basically i just want to put a button around a link and this is my code:
.btn {
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
Explore Now
Unfortunately, nothing happens when i add the CSS part. The link gets added in right part, but doing anything in CSS won't change the look of it. Where is my error please?
Your CSS must be inside the <style> tag, like this:
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
</style>
</head>
<body>
Explore Now
</body>
</html>
... or referenced with a link to a stylesheet (e.g styles.css) with your css styles
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Explore Now
</body>
</html>
Note: In this example, the stylesheet is supposed to live in the same directory of your html file.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Hey guys so I'm just creating a simple webpage for class but for some reason my html file won't connect to my css file, it is in the same folder and everything. Any help would be appreciated.
This is my HTML:
<!DOCTYPE html>
<html>
<!--<style>
body {
background-image: url('gold.jpg');
background-repeat: repeat;
}
</style>-->
<head>
<meta charset="utf-8">
<title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</title>
</head>
<body class="loggedin">
<div class = "tab-content">
<h1>Role: Admin</h1>
<li>Manage User Accounts</li>
<li>Assign Roles</li>
<li>Help Desk</li>
<li>Logout</li>
</div>
</body>
</html>
This is my CSS
body {
background:
url(gold.jpg) center repeat;
}
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-right: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
There may be multiple reasons:
Your "link" tag shouldn't go inside the "title" tag
Make sure your css file is in the same directory as the html one, and check if the file name is the same.
Check your css file
Edit: Just checked and you have no elements with such Id, make sure you can see the changes made by the css file.
Also check the developer console, it helps a lot in debugging.
There are some problems with it:
The link tag should not go in the title tag. Keep them seperate, but within the head.
Type attribute in the link tAG is not neccesary. Try to keep things simple.
Check your CSS file name. It may be different.
Here is your corrected code:
<head>
<meta charset="utf-8">
<title> Your Title </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
First, you should structure your HTML correctly. Starting by removing your CSS file from the Title since it won't work there.
Second, Check your folder structure and make sure you are following the right path to your CSS file.
Then if you are using VS code. You could just click ! (exclamation mark) and you get to pick a prebuilt HTML page that will get you started with the right structure.
Here is an example.
<!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="assets/css/style.css">
<title>Document</title>
</head>
<body>
<div class="testing">Hello world</div>
</body>
</html>
Everything is fine in your code. There is just a little mistake to do some change and enjoy.
1)Remove the link(CSS) from the title.
2) Your class name is tab-content but you write it this tablist in CSS file.
3) class is represented by a dot(.) and id is represented by hash(#)
I'm not sure if you put hashes on purpose to make your css code not generating the desired output so i did clean up a bit of your code.
As others already said <title></title> expects and accepts only plain text so your link becomes invalid and shows up as such in your browser tab.
Hashes are for Ids and . for classes so i did delete these since there are no Ids configured in your HTML file. When your .css file already sets a background-image you dont need to code it twice in HTML. The code looks cleaner this way and might prevent future errors.
Have a nice day :)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>plain text</title>
<link rel="stylesheet" type="text/css" href="so1.css"/>
</head>
<body class="loggedin">
<div class="tab-content">
<h1>Role: Admin</h1>
<li>Manage User Accounts</li>
<li>Assign Role</li>
<li>Help Desk</li>
<li>Logout</li>
</div>
</body>
</html>
CSS:
body {
background: url(gold.jpg) center repeat;
}
div {
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
}
li{
list-style: none;
display: inline;
margin: 0;
}
li a{
text-decoration: none;
padding: 3px 0.5em;
margin-right: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
Here is my sample printable application form that that allow my user to fill in their information and print it out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pritable Document</title>
<style>
p{
font-size: 20px;
}
.fillin {
border-bottom: 2px dotted #888;
font-weight: bold;
line-height: 12px;
}
</style>
</head>
<body>
<p>
Name:<span class="fillin">Jonh Nathon</span>
</p>
<p>
Gender:<span class="fillin">Male</span>
</p>
<p>
Date of Birth:<span class="fillin">10-July-1990</span>
</p>
</body>
</html>
The dotted point (...) as the fillable space looks fine on the browser, however when I print it out, it does not look the same as on browser. It something like a square and asterisk, instead.
How can I fix this problem in CSS as I use border-bottom style dotted already? Thanks.
try to use the predefined html way to do it!
<!DOCTYPE HTML>
<html>
<head>
<style>
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
</style>
</head>
<body>
Name: <u class="dotted">John Nathon</u>
</body>
</html>
I'd like to make color change when hovering h1 as the code shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
h1 {color:#aef;font-size: 14em;line-height: 0.1;}
h1:hover {color: #ff9224;}
</style>
</head>
<body>
<h1>More</h1>
</body>
</html>
(The code is also in JS Bin.)
However, I want the color change when hovering on letters only, like, in the picture, the letter area below the green line. I had tried line-height and height to very small values, but both didn't take effect.
Should I change something else? Or just use p to replace h1 for convenience?
try this snippet i created if it helps
.border {
overflow: hidden;
}
h1 {
color: #aef;
font-size: 14em;
line-height: 163px;
margin: 0;
}
h1:hover {
color: #ff9224;
}
<div class="border">
<h1>More</h1>
</div>
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.