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
}
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 6 months ago.
my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<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 rel="shortcut icon" type="image/x-icon"
href="//theme.zdassets.com/theme_assets/2197739/1a71d05024d0bf628f47cb2a498903409ad571f0.png" />
<title>myAbstract</title>
</head>
<header class="header">
<a href="https://www.goabstract.com/">
<img src="//theme.zdassets.com/theme_assets/2197739/df1f3a3595ad6f2e809942c0cbfa85f84156dd61.svg" alt="Logo"
class="favicon">
</a>
<span class="help-center"> | Help Center</span>
<button class="submit-btn">submit a request</button>
<button class="sign-in-btn">sign in</button>
</header>
<body>
<div class="search-body">
<h1>How can we help?</h1>
<input class="search-bar" type="search" placeholder="Search" aria-label="Search">
</div>
<div class="first">
<div>
<h3>Using Abstract</h3>
<p>Abstract lets you manage, version, and document your designs in one place.</p>
<a href="https://help.abstract.com/hc/en-us/categories/360005436612-Using-Abstract"
class="category-list-link">Learn More →</a>
</div>
<div class="img1">
<img src="1.png" alt="1st">
</div>
</div>
</body>
</html>
related part of my CSS code
.header {
background-color: black;
width: 100%;
height: 88px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0;
margin: 0;
}
.search-body {
background-color: #DADBF1;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-x: hidden;
padding: 0;
margin: 0;
}
I tested some different methods but they didn't work. please check my image.
https://i.stack.imgur.com/OhAcu.png
I compare my code with some pages but can't find solution.
which one must I use ?
margin, overflow, width, position or another.
You might want to use css reset :)
* {
margin: 0;
padding: 0;
}
This question already has answers here:
Why does z-index not work?
(10 answers)
Z-index Won't Work
(3 answers)
Closed 4 years ago.
I'm trying to z-index different "containers" in bootstrap in order for them to be placed on top of each.
I've classed the different containers and provided them different z-index positions. Nothing happens.
Here is the code and the css
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="stylesheet.css" type="text/css"></link>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-7 col">
<h1>fælælflflflflf</h1>
<p>
fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
</p>
</div>
</div>
</div>
<div class="container behind">
<div class="row justify-content-center">
<div class="col-sm-7 col">
<h1>fælælflflflflf</h1>
<p>
fkgkfklgkmnøblingbngæbkbjngækjndfælgkbjnfdækgjngfæbkjngfæbf gbkjnlfdkgbjngflkbjngfækbjnglkbnblkgjnblkgjbngflkbjgflkbjfkl
gfnæbæklkgjnbdkæjnblkjfdnblkdjngfkjbnlkjbnkgbjldkbjngklbjnkgjn
</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
font-family: trebuchet ms;
color:#666666; }
.container {
z-index: 1;
}
.col {
margin:20px;
padding-bottom:20px;
background-color:white;
box-shadow:20px 20px 10px #0033cc;
}
.behind {
padding-bottom:40px;
z-index: 2;
}
Note: i've added some padding in order to see containers layered on top of each other.
Thanks for your reply
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>
I'm using html form inputs on my page (text, textarea, submit) to create a contact form, and I want to do some custom styling using css.
I've set the width of my inputs to 100%, but somehow the button input(submit) ends up being smaller than the textarea and text inputs. I can't really figure out what's going on here.
How do I get them to be all the same size (I need to use % values, want to make my site responsive)?
Snippet below, missing the main .css file since it's not relevant to the question. Ionicons.css is a custom icons fonts, that I use on other parts of this page, and I've linked normalize.css from a CDN.
Thanks for the help.
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
Most of form elements have default padding and border styles, it may vary depending on different browser and OS. Apply box-sizing:border-box can make them to be truly 100% size.
input, textarea {
width: 100%;
box-sizing: border-box;
}
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
box-sizing: border-box;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
border-left-width: 2px;
border-right-width: 2px;
padding-left: 0px;
padding-right: 0px;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
Set
input, textarea{
box-sizing: border-box;
}
to keep your padding's inside the element. The inputs' and textarea's padding's are pushing the width beyond 100%. Alternatively, set
input, textarea{
width: Calc(100% - 4px); // 4px = cumulated lateral padding
}
input.button{
width: 100%;
}
Seems to work fine in Opera and Chrome but the same code in FF and IE11 hides the text, which is no fun at all. I don't have a Mac so I don't know what it's like in Safari.
Here is a plunker demonstrating the issue.
I've tried adding line-height and overflow:visiblebut neither seem to have much effect.
css:
#userResponse {
font-size: 2em;
padding: 1em 0.25em;
text-align: center;
}
html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input class="form-control" id="userResponse" type="text">
</body>
</html>
Bootstrap also has classes for input tags to increase the height of text fields, try with input-lg, hope it meets your requirement
<input class="form-control input-lg" type="text">
remember to put all form-control inside form-group
<div class="form-group">
<input class="form-control input-lg" type="text">
</div>
for more http://getbootstrap.com/css/#forms-control-sizes
Luzan's solution is probably the best approach. However, to keep the the spacing similar to how it appears in chrome with the padding I gave it a new fixed height of 58px and removed the padding entirely. This seems to give consistent results across all four browsers.
Updated Plunker.
html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input class="form-control" id="userResponse" type="text" value='abcdefghijklmnopqrstuvwqyz'>
<div class="form-group">
<input class="form-control custom" type="text" value='abcdefghijklmnopqrstuvwqyz'>
</div>
</body>
</html>
css:
/* Styles go here */
#userResponse {
font-size: 2em;
padding: 1em 0.25em;
text-align: center;
}
.custom {
text-align:center;
font-size:2em;
height:58px;
}