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 7 months ago.
Improve this question
when i use this code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid green;
}
li,
a {
text-decoration: none;
color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
}
<!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="styles.css">
<title>My first project</title>
</head>
<body>
<header>
<p>LOGO HERE</p>
<ul class="nav__links">
<li><a href="#">Home</li>
<li><a href="#">About</li>
<li><a href="#">Services</li>
<li><a href="#">Contact</li>
</ul>
<a class="cta" href="#">Call us button!</a>
</header>
</body>
</html>
i get this: output from code
instead of all 3 elements being evenly centered. any thoughts? I was following yt tutorial and last night it was all ok, but today it doesn't seem to work... I can't figure out what i am doing wrong...
It is because the a tags inside the li tags don't have a closing tag. The browser that renders it gets confused by where to close the tags and adds an extra a tag after the ul. So, the proper code would be:
<header>
<p>LOGO HERE</p>
<ul class="nav__links">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<a class="cta" href="#">Call us button!</a>
</header>
Related
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 6 years ago.
Improve this question
I have made a site using css and html and in the main body underneath my nav bar whenever I try and make a normal paragraph, everything within the paragraph becomes a link to the contact.html webpage!!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ace Moldels</title>
<meta name="description" content=“A website that sells radio controlled model cars" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="head">
<div class="header_content">
<center><img src="images/pic1.jpg"></center>
<div class="nav">
<ul>
<li><a href="index.html">HOME</li>
<li><a href="cars.html">CARS</li>
<li><a href="boats.html">BOATS</li>
<li><a href="about.html">ABOUT</li>
<li><a href="contact.html">CONTACT</li>
</ul>
</div>
</div>
<div class="headerbreak"></div>
</div>
<p> Greetings hello there</p>
<p> Greetings hello there</p>
You need to close the <a href="..."> tags:
<li>HOME</li>
<li>CARS</li>
<li>BOATS</li>
<li>ABOUT</li>
<li>CONTACT</li>
Close the anchor tags.
Example:
Text of the link
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 last year.
Improve this question
Hello i was trying to create a navbar and a red box below it. But red box came in the navbar .
I used css and html only . I have also provided the before and after of the outcomes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="bar">
<img src="background.png" class="pic">
<nav>
<ul class="navlist">
<li>Search</li>
<li>Browse</li>
<li>Tags</li>
<li>Filter</li>
<li>Dev</li>
</ul>
</nav>
<div class="signin"><a href="#" class='sign'>Sign In</a</div>
</div>
<div class="introbox">abcd</div>
</body>
</html>
Add the closing bracket of the anchor element
<div class="signin"><a href="#" class='sign'>Sign In</a></div>
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 am trying to write this html code but the CSS attributes just don't affect my code.
HTML file:
.hello{
background color: #333;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="hi.css">
</head>
<body>
<div class="hello">
<p> hi </p>
</div>
</body>
</html>
background color is not valid. It should be background-color
.hello{
background-color: #333;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="hi.css">
</head>
<body>
<div class="hello">
<p> hi </p>
</div>
</body>
</html>
You should add a - between background and color. You are providing different CSS attributes instead of one.
Do this:
.hello {
background-color: #333; // Add an hyphin
}
Try this
.hello {
background-color: #333;
}
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 5 years ago.
Improve this question
I am doing my first website using xampp and I have problems while changing specific parts of the text font on it. I managed to change the font of the whole body but i want a different font for the title, what i did was to create a rule in css with the name of the font and then using it in the part i want to change (h1). It probably is a stupid mistake so forgive my ignorance.
body {
font-family: 'Lato', sans-serif;
}
img {
max-width: 100%;
}
.quitar-float {
float: none;
}
.espacio-arriba {
/*margin-top: 100px*/
}
.pacifico {
font-family: 'Pacifico', cursive;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>
<div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal">
<img src="imgs/descarga.png">
<h1 class= "pacifico">hello world</h1>
<h2>This is my first website</h2>
<nav>
Galerie
About
</nav>
</div>
simple and quick answer.
You did everythink right but you got an blank in your h1 tag between = and ".
try:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="ccs/main.ccs">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>
<title>The best site in the world</title>
</head>
<body>
<div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal">
<img src="imgs/descarga.png">
<h1 class="pacifico">hello world</h1>
<h2>This is my first website</h2>
<nav>
Galerie
About
</nav>
</div>
</body>
</html>
and it should work.
body{
font-family: 'Lato', sans-serif;
}
img{
max-width: 100%;
}
.quitar-float{
float:none;
}
.espacio-arriba{
margin-top:100px
}
.pacifico{
font-family:'Pacifico', cursive;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="ccs/main.ccs">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>
<title>The best site in the world</title>
</head>
<body>
<div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal">
<img src="imgs/descarga.png">
<h1 class="pacifico">hello world</h1>
<h2>This is my first website</h2>
<nav>
Galerie
About
</nav>
</div>
</body>
</html>
That one is quite tricky... try this: <h1 class="pacifico">hello world</h1>
You put a space between class= and "pacifico"
And while it is a stupid mistake it happens to experienced developers every day so just forget that.
EDIT: While leaving this space in the code may work for newer webservers, older ones don't support it.
On your class .pacifico you need to define you are talking about the h1 tag.
It should look like:
.pacifico h1 {
font-family: 'Pacifico', cursive;
}
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 9 years ago.
Improve this question
<!doctype html>
<html>
<head>
<title>Single Column</title>
<link rel="stylesheet" type="text/css" href="single.css>
</head>
<body>
<div id="container">
<div id="content">
<h2>Here's some content</h2>
<p>This is where a story would go</p>
<h2>Here's more content</h2>
<p>This is another story</p>
</div> <!-- end content -->
</div> <!-- end container -->
</body>
</html>`
The code above is my HTML file and the code below is my css file. when i open the browser and search local host it displays the content but the font is not changing?
body
{
font-family: arial,helvetica,sans-serif;
}
#container
{
margin: 0 auto;
width: 600px;
background: #FFFFFF;
}
#content
{
clear: left;
padding: 20px;
}
You are missing the closing quote in your link href for css
<link rel="stylesheet" type="text/css" href="single.css">
^^ missing quote