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.
Related
I need to recreate this:
My Attempt:
I'm trying to recreate the first picture above and the result I got was the 2nd picture I need
this is a university homework, specifically how do you add a "Use the menu to select different stylesheets" in that way below the Header, at first i tried adding another but the result is as you can see
my code:
<!DOCTYPE html>
<html>
<body>
<head>
<style>
h1 {
text-align: center;
background-color: lightgreen;
font-family: Arial;
font-size: 200%;
}
h2 {
text-align: center;
background-color: lightgreen;
font-family: Arial;
font-size: 100%;
}
</style>
</head>
</body>
<h1>Welcome to my Homepage</h1>
<h2>Overview of Homepage</h2>
</html>
I think you want something like this.
<!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>
.content{background-color: #2ed274; text-align: left; padding: 20px;}
body{color: white; font-family: Arial;}
h1 {font-size: 30px; margin-bottom: 0;}
h2 {font-size: 15px; margin-top: 0;}
</style>
</head>
<body>
<div class = 'content'>
<h1>Welcome to my Homepage</h1>
<h2>Overview of Homepage</h2>
</div>
</body>
</html>
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;
}
I am trying to create a wholy grail template using flexbox and css. I'm new to this...
I have tried everything but i can not get the code to display in graphics (if that make sense). Please advise.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="flex-header">
HEADER
</header>
<main class="flex-main">
<nav class="flex-nav">
SIDENAV
</nav>
<article class="flex-article">
MAIN CONTENT
</article>
<aside class="flex-aside">
SIDEBAR
</aside>
</main>
<footer class="flex-footer">
FOOTER
</footer>
</body>
</html>
css file:
* {
margin: 2px;
}
body {
font-size: 24px;
color: white;`
height: 100vh;
text-align: center;
}
.flex-header {
background-color: #5070B5;
padding-top: 3rem;
padding-bottom: 3rem;
}
.flex-main {
}
.flex-nav {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-article {
background-color: #81A43C;
padding-top: 3rem;
}
.flex-aside {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-footer {
background-color: #5070B5;
padding-top: 3rem;
scroll-padding-bottom: 3rem;
}
It shows the text only, no graphics.
Please check line 6 of your CSS color: white;`.
There is an invalid character ` at the end of the line. Such errors may cause browser to stop processing any further CSS.
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>
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty