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;
}
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.
I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
</body>
</html>
and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn't possible to "press" the icons.
This was caused by the display block styling of that element. So by removing that you'll be able to make those icons clickable again.
your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer's position to relative and z-index higher than 8, here is the code (you should add to css):
#my-footer{position:relative; z-index:99}
I solved it by changing display: block to display: table which reduced the navmobile height.
Context: the images posted by Iliass Nassibane above.
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">
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I building my first website, and i have made a navigation bar. but when i want to add text to the page it starts behind the navigation bar (in the left corner). The only way i can center down the text down is to use margin to get it down. Anyone know what i do wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="language" content="swedish">
<meta http-equiv="content-type" content="text/html">
<title>
Kontakt
</title>
<link rel="stylesheet" href="style.css">
<link rel=script href="script.js">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght#200&display=swap" rel="stylesheet">
<nav>
<ul>
<li>Hem</li>
<li>Vem är jag?</li>
<li>Mina projekt</li>
<li>Kontakt</li>
</ul>
</nav>
</head>
<body>
<h1>hej</h1>
</body>
</html>
You moved the nav tag to the head tag, which is a gross error. You need it like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="language" content="swedish">
<meta http-equiv="content-type" content="text/html">
<title>
Kontakt
</title>
<link rel="stylesheet" href="style.css">
<link rel=script href="script.js">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<h1>hej</h1>
<nav>
<ul>
<li>Hem</li>
<li>Vem är jag?</li>
<li>Mina projekt</li>
<li>Kontakt</li>
</ul>
</nav>
</body>
</html>
Sorry! Here is my stylesheet
body {
background-color: grey;
font-family: Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 100px;
background-color: white;
overflow: auto;
position: fixed;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
}
li {
float: left;
line-height: 100px;
}
a {
color: black;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
font-size: 17px;
padding: 0 20px;
font-family: Arial, Helvetica, sans-serif;
}
a:hover {
background-color: grey;
color: lavenderblush;}
}
You need to show your CSS as well. Also, your nav should be in the body part not in the head.
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>