I have made a menu bar at the top of my page.
But when I insert the main body, it just overlaps with my menu bar rectangle. How do I move my whole body text down to avoid overlapping?
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<head>
<title></title>
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
background: white;
margin-left:auto;
margin-right:auto;
margin-top: 200px;
position: relative;
}
p.x {
color: white;
font:25px arial,sans-serif;
position:relative;
left:20px;
}
.align {
position: absolute;
left: 8em;
}
body
{
background-color: #ebebeb;
top: 55px;
}
#rectangle {
width: 100%;
height: 70px;
background: deepskyblue;
position: fixed;
top: 0;
left: 0;
bottom: 20;
}
input[type=button]
{
background-color: lawngreen;
color: white;
}
</Style>
</head>
<body>
<div id="rectangle">
<p class="x">Home Page <input type="button" name="sign up" value="Sign Up"/></p>
</div>
<h1>Hello world, this is your home page.</h1>
<div class="ex">
<h1>签订</h1>
<hr>
${errorMessage}
<form action="register" method="post">
<p>
<label>
ID：
<input type="text" name="id" value="${person.id}" class="align"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password" class="align"/>
</label>
</p>
<p>
<label>
确认密码：
<input type="password" name="password" class="align"/>
</label>
</p>
<p>
<label>
姓名：
<input type="text" name="name" value="${person.name}" class="align"/>
</label>
</p>
<p>
<label>
地址：
<input type="text" name="address" value="${person.address}" class="align"/>
</label>
</p>
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}" class="align"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
</div>
</body>
</html>
The sentence of "Hello world, this is your home page." has been overlapped with blue rectangle I made. I want to move whole body field down. I know one method would be putting bunch of , but there must be other ways to do the same thing.
I appreciate if someone could help me.
You have to update your CSS for that. For example, by padding your top with 60px like so:
#rectangle {
width: 100%;
height: 70px;
background: deepskyblue;
position: fixed;
top: 60px;
left: 0;
bottom: 20;
}
check this working demo
use
#rectangle {
width: 100%;
height: 70px;
background: deepskyblue;
position: relative;
top: 0;
left: 0;
bottom: 20;
}
you can add padding-top:50px; to the body tag
body {
padding-top: 50px
}
Related
How do I align my text boxes in html? I have tried everything. The age box should start at the same location as Name and Email and it should be the same size as those two boxes. Please help if you can. I made the width of each input text box the same to ensure its the same size and tried to have the text boxes start at the same location. Thanks!
#Title{
text-align: center;
}
#description{
text-align: center;
}
body{
background-color: #7FFFD4;
}
#Survey-form{
background-color: f0f0f0;
text-align: center;
}
.nameageemail
{
clear: both;
margin: right;
margin:0px auto;
}
#Name{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
#Email{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
#Age{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<link href="SurveyForm.css" rel=stylesheet>
</head>
<body>
<h1 id="Title"> Survey Form </h1>
<form id="Survey-form">
<p id="description">Let us know how we can improve freeCodeCamp </p>
<div class="nameageemail">
<p> <label>Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name"> </p>
<label>Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email"><br>
<p><label> Age:</label>
<input type="number" min = "18" max="110" name="Age" id="Age" placeholder="Age"></p>
</div>
</form>
</body>
</html>
You can use a table-based display values to layout your form.
Also, some values were missing units and a color was missing the #.
body > * {
text-align: center;
}
body {
background-color: #7FFFD4;
}
.survey-form {
display: block;
}
.survey-form > div {
display: inline-block;
background-color: #f0f0f0;
text-align: initial;
padding: 8px;
}
.survey-form > div > p {
display: table-row;
}
.survey-form > div > p > * {
display: table-cell;
margin: 8px;
}
.survey-form input {
text-align: left;
width: 200px !important;
height: 25px;
display: inline-block;
margin-right: 30px;
padding: 1px 8px;
}
.instructions {
display: initial !important;
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<!-- REMOVED FOR SNIPPET
<link href="SurveyForm.css" rel=stylesheet>
-->
</head>
<body>
<h1> Survey Form </h1>
<form class="survey-form" action="">
<div>
<p class="instructions">
Let us know how we can improve freeCodeCamp
</p>
<p>
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name">
</p>
<p>
<label for="Email">Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email">
</p>
<p>
<label for="Name">Age:</label>
<input type="number" min="18" max="110" name="Age" id="Age" placeholder="Age">
</p>
</div>
</form>
</body>
</html>
When translating a form/input on the Z-axis, the area that accepts the cursor isn't brought forward in Z space with the apparent place of the element, and trying to click on the input box doesn't work unless you click where the element would be if it hadn't been translated. Is there any way to fix this?
HTML
<html>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/client-questionaire.css" type="text/css">
<div id="impress" data-transition-duration="3000">
<div id="yourself" class="step page" data-x="0">
<div class="innerDiv">
<p class="mainWord">
<span class="textLength">
<span class="black">YOUR</span><span class="white">SELF</span>
</span>
</p>
<div class="wrap">
<div class="formBox">
<form id="yourselfForm" class="form">
<label for="firstName">
What's your <u>first name</u>?
</label><br>
<input name="firstName" type="text" ><br>
<label for="lastName">
What's your <u>last name</u>?
</label><br>
<input name="lastName" type="text" ><br>
<label for="currentJob">
What's your <u>current job title</u>?
</label><br>
<input name="currentJob" type="text" ><br>
</form>
</div>
</div>
</div>
</div>
<div id="intro" class="step page" data-x="2000">
<div class="outerDiv">
<div class="innerDiv">
<p class="mainWord"><span class="black first">CREÆTIVE</span> <span class="white last">BRIEF</span></p>
<div class="formBox">
</div>
</div>
</div>
</div>
<div id="lookFeel" class="step page" data-x="4000">
<div class="outerDiv">
<div class="innerDiv">
<p class="mainWord"><span class="black firstSpan">LOOK</span> <span class="white secondSpan">&</span><span class="black"> FEEL</span></p>
<div class="formBox">
</div>
</div>
</div>
</div>
<script src="/js/impress.js"></script>
<script>
impress().init();
</script>
CSS
body {
background: #cc9933;
}
.page {
height: 830px;
width: 1480px;
margin: 0px;
}
.formBox {
position:absolute;
border: 1px solid black;
height: 450px;
width: 270px;
top: -150px;
left: 867px;
z-index: 21;
background: #cc9933;
transform: translateZ(300px);
}
.innerDiv {
position:absolute;
z-index: 9;
width: 1000%;
border-top: 1px solid black;
border-bottom: 1px solid black;
top:40%;
height: 108px;
}
.frontFiller {
transform: translateX(-2000px);
width: 1000%;
}
.mainWord {
margin: 0px 50px;
font-size: 90px;
height: 100%;
}
.black {
color: black;
}
.white {
color: white;
}
Not sure what you're trying to achieve, your example moves the input outside of the viewport and the translation isn't working at all.
So, I'll take a guess: Have you tried setting the CSS property perspective on the parent of .formBox?
Here's an example that shows how it would work:
.wrapper {
perspective: 50px;
transform-style:preserve-3d;
}
.formBox {
position:absolute;
border: 1px solid black;
height: 450px;
width: 270px;
left: 200px;
z-index: 21;
background: #cc9933;
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
}
<div class="wrapper">
<div class="formBox">
<form id="yourselfForm" class="form">
<label for="firstName">
What's your <u>first name</u>?
</label><br>
<input name="firstName" type="text" >
</form>
</div>
</div>
This is a browser bug, and specifically a Chrome bug. I can reproduce the effect from the HTML and CSS that you provided on Google Chrome. On Firefox (Quantum) it works as expected.
On Chrome, it only happens when you use both translateZ() AND z-index. If you can create your form without using z-index on the text fields, it should be fine.
Consider reporting this to Google Chrome but tracker.
I have a problem with my page which when i zoom in or zoom out the footer and the forms just slide off where i wanted it to be. Is there anyway of solving the issue? I've tried surfing the internet for solutions but didnt work for me.
Thanks in advance for any help.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1>Registration Form</h1>
<hr>
</header>
<article>
<form action="#">
<label for="FirstName"><b>First Name:</b></label>
<input name="FirstName" type="text" placeholder="John" required>
<label for="LastName"><b>Last Name:</b></label>
<input name="LastName" type="text" placeholder="Doe" required>
<label for="email"><b>Email:</b></label>
<input name="email" type="text" placeholder="example#mail.com" required>
<label for="password"><b>Password:</b></label>
<input name="password" type="password" placeholder="Password here." required>
<p></p>
<input type="submit" value="Submit">
</form>
</article>
<footer>
Copyright # 2017 Your name here
</footer>
</div>
<script src="main.js"></script>
</body>
</html>
CSS:
header h1 {
text-align: center;
margin: -60px 0 10px 0;
}
hr {
margin: 0 -80px 0 -80px;
}
form input {
display: block;
}
body {
background-color: gray;
}
html, body { height: 100%; width: 100%; margin: 0; }
article {
margin: 50px 0 0 0;
display: flex;
justify-content: center;
overflow: hidden;
}
footer {
text-align: center;
color: white;
background-color: black;
margin: 68px -80px 0 -80px;
overflow: hidden;
}
#container {
padding: 80px;
background-color: white;
width: 600px;
height: 259px;
margin: 0 auto;
overflow: hidden;
}
In your #container, I removed your width: 600px because it was preventing responsiveness and added max-width: 100%.
#container {
padding: 80px;
background-color: white;
height: 259px;
margin: 0 auto;
overflow: hidden;
max-width: 100%;
}
Check it out!
https://jsfiddle.net/5x48bzo5/
EDIT: Here is the new JSFiddle. https://jsfiddle.net/5x48bzo5/3/
I have this overlay and this overlay box and an overlay close button:
My issue with it, is that the close button is all over the place on Desktop, Tablet or Mobile. How can I fix this so that its always at the bottom right of the box. Here is the code:
.request-estimate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0,0,0,0.8);
display: none;
}
.request-estimate-box-container {
top: 0%;
position: fixed;
z-index: 99999;
}
.request-estimate-box {
display: none;
height: 400px;
width: 50%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
border-radius: 5px;
}
.request-estimate-close {
display: none;
position: fixed;
z-index: 99999;
color: #FFF;
bottom: 10%;
font-size: 26px;
left: 90%;
cursor: pointer;
}
<div class="request-estimate" style="display: block;"></div>
<div class="request-estimate-box-container">
<div class="request-estimate-box" style="display: block;">
<h1>Request Free Estimate</h1>
<form action="index.php" method="post">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control">
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control">
</p>
<p>
<label for="phone">Phone</label>
<input type="phone" name="phone" id="phone" class="form-control">
</p>
<p>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default">
</p>
</form>
</div>
<div class="request-estimate-close" style="display: block;">X</div>
</div>
Try wrap the content in a div with the css property postion: relative;
Add the close button's div in the box's div and make it float to the right. Check the code below:
Let me know if this doesnt answer your question.
.request-estimate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0,0,0,0.8);
display: none;
}
.request-estimate-box-container {
top: 0%;
position: relative;
z-index: 99999;
}
.request-estimate-box {
display: none;
height: 400px;
width: 50%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
border-radius: 5px;
}
.request-estimate-close {
display: none;
position: fixed;
z-index: 99999;
color: #FFF;
bottom: 5%;
font-size: 26px;
left: 80%;
cursor: pointer;
}
<div class="request-estimate" style="display: block;"></div>
<div class="request-estimate-box-container">
<div class="request-estimate-box" style="display: block;">
<h1>Request Free Estimate</h1>
<form action="index.php" method="post">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control">
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control">
</p>
<p>
<label for="phone">Phone</label>
<input type="phone" name="phone" id="phone" class="form-control">
</p>
<p>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default">
</p>
</form>
</div>
<div class="request-estimate-close" style="display: block; float:right;">X</div>
</div>
UPDATE
Since you want outside the box. I edited the code and set contained to position relative, let me know if still not working. It works for me.
I created an overlay with div over top of it, right now I am trying to center the div over top of the overlay, I tried messing around the left and right but nothing worked.
.request-estimate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0,0,0,0.8);
display: none;
}
.request-estimate-box {
display: none;
height: 400px;
width: 40%;
margin: 0 auto;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
padding: 20px;
border-radius: 5px;
}
And here is the CSS
<div class="request-estimate"></div>
<div class="request-estimate-box">
<h1>Request Free Estimate</h1>
<form action="" method="post">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" />
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" />
</p>
<p>
<label for="phone">Phone</label>
<input type="phone" name="phone" id="phone" class="form-control" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default" />
</p>
</form>
</div>
.request-estimate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: rgba(0,0,0,0.8);
/*display: none;*/
}
.request-estimate-box {
/*display: none;*/
height: 400px;
width: 40%;
margin-left:-20%; /*add this = width/2*/
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
left:50%; /*add this*/
padding: 20px;
border-radius: 5px;
}
<div class="request-estimate"></div>
<div class="request-estimate-box">
<h1>Request Free Estimate</h1>
<form action="" method="post">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" />
</p>
<p>
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" />
</p>
<p>
<label for="phone">Phone</label>
<input type="phone" name="phone" id="phone" class="form-control" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default" />
</p>
</form>
</div>
Solution: https://jsfiddle.net/gqqqeLfL/
request-estimate-box was not being contained by request-estimate.
Originally:
<div class="request-estimate"></div>
<div class="request-estimate-box"></div>
Changed to:
<div class="request-estimate">
<div class="request-estimate-box"></div>
</div>
Furthermore, removed position:fixed since that glues the element to an exact position thus nullifing your margin-auto. Now the position default is position:relative and the margin:auto is properly executed.
I see two alternatives :
.request-estimate-box {
height: 400px;
width: 40%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
left: 0;
right: 0;
margin: auto;
padding: 20px;
border-radius: 5px;
}
http://codepen.io/anon/pen/dPLxPJ?editors=110
And :
.request-estimate-box {
height: 400px;
width: 40%;
background-color: #FFF;
z-index: 99999;
position: fixed;
top: 15%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 20px;
border-radius: 5px;
}
http://codepen.io/anon/pen/ByEXyM?editors=110
And a margin half it's width from the center of course, like Tambo is suggesting.