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.
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 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.
I need the input field under the image and not aligned. How I would go about centering the image and input field (+button)horizontally and vertically. As of now the input field is next to the image and I would like it below the image.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Solution for Technigo Coding Challenge</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
body{
background-color:#18344e;
}
div {
position:absolute;
top:0;left:0;right:0;bottom:0;
background: g;
display: flex;
align-items: center;
justify-content:center
}
</style>
</head>
<body>
<div>
<center><img><a href=><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" /></a></img></center>
<form action="/action_page.php"><center><form>
<strong>Search</strong>:<input type="text">
<input type="submit"value="Enter"></form></center>
</div>
<body/>
</html>
The problem can be solved simply by setting CSS text-align: center. I have also removed some HTML issues such as tags that weren't closed <form> & <img>, and tags that weren't required <center>.
Also, I would strongly suggest that instead of styling all div elements, you use class selectors .className and style specific classes, or use ID selectors #elementId to style individual elements.
body {
background-color: #18344e;
}
div {
text-align: center;
}
<body>
<div>
<a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
</a>
<form action="/action_page.php">
<strong>Search</strong>:<input type="text">
<input type="submit" value="Enter">
</form>
</div>
</body>
Just add to CSS margin-top equals to 10em.I will make what you want.
In addition, you've messed up some html codes. Especcially, you made mistakes using form tag.I fixed those issuses.Besides, that I have added class to div tag since it better to specifiy.
body {
background-color: #18344e;
}
div.main {
margin-top: 10em;
text-align: center;
}
<body>
<div class="main">
<a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
</a>
<form action="action_page.php">
<label for="search">Search:</label><input type="text">
<input type="submit" name="submit" value="Send">
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Solution for Technigo Coding Challenge</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body{
background-color:#18344e;
}
div{
position:absolute;
top:0;left:0;right:0;bottom:0;
background: g;
display: flex;
align-items: center;
justify-content:center
}
</style>
</head>
<body>
<div>
<center><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
<br/>
<form action="/action_page.php">
<strong>Search</strong>:<input type="text">
<input type="submit"value="Enter">
</form>
</center>
</div>
</body>
</html>
This question already has answers here:
Margin-Top push outer div down
(8 answers)
Closed 6 years ago.
I have this weird whitespace above the section-one div in the body.
Here it is:
Don't understand why, I've even reset the CSS to default i.e * { margin: 0;}
Html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id='section-one'>
<div id='headline'>
<h1> This is the headline </h1>
<div class='silver-line-break'>
</div>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend>Delivery Fee Calculator</legend>
<span>First name: </span> <input type="text" name="firstname" value="Mickey">
<span>Last name: </span> <input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</form>
</div>
<div class='silver-break-bar'>
<img id='red-car' src="img/red-car.png" alt="" height="250" width="300">
</div>
</div>
</div>
</body>
</html>
CSS
/* Basic Styles */
* {
margin-top: 0px;
padding: 0;
}
body {
padding: 0px;
margin: 0px;
background-color: pink;
}
#section-one {
background-color: #80be05;
margin: 0px;
padding: 0px;
}
Any ideas why there is space between above the section-one div in the body?
Update: I've added the complete code that asked. Not sure what the problem is? Is the something to do with my chrome browser?
the H1 has a margin of some pixels.
h1 {
margin: 0px
}
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 7 years ago.
Improve this question
When I add the class 'col-xs-12' into the div where id is "me", it will not stay at the center; then I remove the class, the div go to the center, but half of the background will disappear, how to fix it?
There is the code:
<div class="container container-fluid">
<div class="row text-center" style="margin-top: -50px;">
<!--There is the div what I want to put at center.-->
<div id="me" class="center-block clearfix col-xs-12" style="
height: auto;
width: 220px;
background-color: #5B0707;
padding: 10px;
color: white">
Text
</div>
</div>
</div>
The first problem's shoot:
And the second:
The website is: www.tengzeyuan.com
Just add
position: relative;
to the style for the div with id me
that is, the <div> would be like
<div id="me" class="center-block clearfix col-xs-12" style="
height: auto;
position: relative;
width: 220px;
background-color: #5B0707;
padding: 10px;
color: white">
Text
</div>
See the screenshot below
The following will solve your problem.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
#center{
position:absolute;
left:50%;
}
</style>
</head>
<body>
<div id = "center"class="container container-fluid">
<div class="row text-center" >
<!--There is the div what I want to put at center.-->
<div id="me" class="center-block clearfix col-xs-12 " style="
height: auto;
width: 220px;
background-color: #5B0707;
padding: 10px;
color: white">
Text
</div>
</div>
</div>
</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 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