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 28 days ago.
Improve this question
I'm working on the Odin Project Foundations course. The Etch-a-Sketch project.
I'm 10 minutes in, and I'm having a problem.
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.header {
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
justify-content: space-around;
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
justify-content: space-between;
}
<!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">
<link type="stylesheet" href="/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="app.js"></script>
<title>Etch-a-Sketch</title>
</head>
<body>
<h1>Etch-a-Sketch</h1>
<div class="header">
<h6>Select a size:</h6>
<button id="popup" class="btn btn-danger">Select</button>
</div>
<div class="container"></div>
<div class="footer">
<button class="btn btn-danger">Black</button>
<button class="btn btn-danger">Random</button>
<button class="btn btn-danger">Reset</button>
</div>
</body>
</html>
When I open a dev server, everything is glued to the top left corner. In Chrome DevTools it doesn't show any of my CSS. There's a read-only "user agent stylesheet" that's seemingly over-riding my code.
Suggestions?
I'm new, so I thought I might be doing something wrong with flexbox, so I tried other display-types to no avail. Tried resizing the whole html element, which didnt work either. When I copy CSS into devtools, it works.
<link rel="stylesheet" href="./styles.css">
Duh: I had <link type="... instead of <link rel="...
Make sure your styles.css is in the same folder and add a ./ before your path.
<link rel="stylesheet" href="./styles.css">
Try this. Hope it'll solve the issue.
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 3 days ago.
Improve this question
I'm implementing a web page, but the CSS file is not fully applied.
Could you please check what the problem is?
Here is my css, html file.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="index.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section>
<div class="form-box">
<div class="form-value">
<form action="">
<h2>Login</h2>
<div class="inputbox">
<ion-icon name="mail-outline"></ion-icon>
<input type="email" required>
<label for="">Email</label>
</div>
<div class="inputbox">
<ion-icon name="lock-closed-outline"></ion-icon>
<input type="password" required>
<label for="">Password</label>
</div>
<div class="forget">
<label for=""><input type="checkbox">Remember Me?</label>
Forget Password
</div>
<button>Log in</button>
<div class="register">
<p>Don't have a account <a href='#'>Register</a></p>
</div>
</form>
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
index.css
*{
margin: 0;
padding: 0;
font-family: 'poppoins',sans-serif;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
background: #00ff00;
}
.formbox{
position: relative;
width: 400px;
height: 450px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
I entered the Chrome developer version and tried a strong refresh, deleted cookies and cache from the Internet history scan deletion, and behind the css file
<link href="index.css?ver=1" rel="stylesheet">
I also modified it to
<link href="index.css?after" rel="stylesheet">
but it doesn't work.
This question already has an answer here:
how to centre align div horizontally when using flex direction column
(1 answer)
Closed 8 months ago.
So I tried putting the banner-content-container in the center after using flex-direction:column; in the media query, but it doesn't work. It centers normally but when it gets to the 776px max-width, It doesn't center the div.
Here's my code:
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
display: flex;
justify-content: center;
flex-direction: column;
}
}
<!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>
</head>
<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Changing the flex-direction flips your main axis.
When in row mode, horizontal alignment is achieved via flex-direction and vertical alignment with align-items. In your breakpoint, the opposite is now true.
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
align-items: center;
flex-direction: column;
}
}
<!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>
</head>
<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Note also that you don't need display: flex within your media query; it's already set in the statement above, media queries don't reset properties.
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
I started a project to learn HTML, CSS and JavaScript and coded a full HTML page but my navigator doesn't load images, FontAwesome icons, and it doesn't apply my css file (tried on Brave and Microsoft Edge navigator).
I removed the most part of the code, I just left the CSS and header of my code - Any ideas of what is causing me trouble?
* {
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
background-color: #F2F2F2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="/css/style.css">
<link href="/css/normalize.css">
<title>Booki</title>
<nav>
<a class="nav" href="#">Hébergement</a>
<a class="nav" href="#">Activités</a>
<nav>
<img src="/assets/logo/Booki.png">
</head>
</html>
UPDATE:
I found how to display the path wasn't correct,i just need to remove the slash at the start of the path, and it works !
Use body tag to render your content on the page
<!DOCTYPE html>
<html>
<head>
...
<title>Booki</title>
</head>
<body>
<nav>
<a class="nav" href="#">Hébergement</a>
<a class="nav" href="#">Activités</a>
<nav>
<img src="/assets/logo/Booki.png">
</body>
</html>
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 8 years ago.
Improve this question
Okay, so Codecademy gave me this code to create what looks like box using div and background-colors:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div></div>
</body>
</html>
and the css...
div {
background-color: #cc0000;
height: 100px;
width: 100px;
}
It worked fine. I got a red box. Afterwards I tried to do it on my own but its not working. My code's pretty much exactly the same but don't know what's going on. Here's mine:
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href"boxes.css"/>
<title> Boxes </title>
</head>
<body>
<div></div>
</body>
</html>
the css...
div {
background-color: #2D1132;
height: 100px;
width: 100px;
}
If someone could explain how I can make this work that would be great!
You have not referenced the stylesheet correctly.
<link type="text/css" rel="stylesheet" href"boxes.css"/>
Should be:
<link type="text/css" rel="stylesheet" href="boxes.css"/>