I want to put all of my elements in a white box. The code before is this:
<form action="/login" method="post">
<div class='boxput'>
<input autocomplete="off" autofocus name="username" placeholder="Username" type="text">
</div>
<div class='boxput'>
<input style='position: relative; top: 30px;' name="password" placeholder="Password" type="password">
</div>
<button style='position: relative; top: 60px; height: 30px; width: 90px; font-size: 16px;' type="submit">Log In</button>
</form>
<div style='position: absolute; top: 28%; transform: translate(-50%, -50%); left: 50%;'>
<h1 id='log'>Login:</h1>
</div>
<div style='position: absolute; display: inline-block; left: 50%; top: 69%; transform: translate(-50%, -50%);'>
<a href='/signup'>Don't have an account? Sign up here.</a>
</div>
and I have just put a div around it like such:
<div>
<form action="/login" method="post">
<div class='boxput'>
<input autocomplete="off" autofocus name="username" placeholder="Username" type="text">
</div>
<div class='boxput'>
<input style='position: relative; top: 30px;' name="password" placeholder="Password" type="password">
</div>
<button style='position: relative; top: 60px; height: 30px; width: 90px; font-size: 16px;' type="submit">Log In</button>
</form>
<div style='position: absolute; top: 28%; transform: translate(-50%, -50%); left: 50%;'>
<h1 id='log'>Login:</h1>
</div>
<div style='position: absolute; display: inline-block; left: 50%; top: 69%; transform: translate(-50%, -50%);'>
<a href='/signup'>Don't have an account? Sign up here.</a>
</div>
</div>
Upon further notice I found out that the new div I created was on the top left corner of the screen width a height of 0, which is not where I want it to be. How do I surround my elements with my new div?
You have used relative and absolute positioning quite liberally in the code. This can cause issues when you want to surround something with a div since the absolute positioned elements will jump out of the layout structure. Try using some margins to give distance between the elements:
<div style="background-color: white; position: relative; min-height: 16rem">
<form action="/login" method="post" style="padding-left: 10px">
<div class='boxput'>
<input style=' margin-top: 30px;' autocomplete="off" autofocus name="username" placeholder="Username" type="text">
</div>
<div class='boxput'>
<input style=' margin-top: 30px' name="password" placeholder="Password" type="password">
</div>
<button style='height: 30px; width: 90px; font-size: 16px; margin-top: 30px' type="submit">Log In</button>
</form>
<div style='position: absolute; top: 8rem; text-align: center; transform: translate(-50%, -50%); left: 50%;'>
<h1 id='log'>Login:</h1>
<a href='/signup'>Don't have an account? Sign up here.</a>
</div>
</div>
Here's a link to see how it looks
Your <div> is working fine, the problem is using of position: absolute, add position: relative; to your <div> to control your chlidren and change left and top children styles to fix your design.
read this:
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Related
I know this question has been asked and aswered before, but for some reason, the answers are not working for me; so any help is much appreciated.
I'm creating a hybrid mobile app and I need to add an clickable icon (SVG) inside an input field. Even though I have managed to add the icon, when I test my design in different screens, the icon doesn't not respect the position I need it to be in.
Here are some shots: This is how it's supposed to look in all screens and this is what it looks like in landscape mode, for example.
Here's my code: https://codepen.io/paulamourad/pen/djXvxq
CSS:
.wallet-body {
width: 100%;
margin: 0 auto;
}
.form-group {
position: relative;
}
.form-group input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
float: left;
width: 11%;
margin-top: -39px;
margin-left: 120px;
position: relative;
}
HTML:
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
</form>
</div>
.wallet-body {
width: fit-content;
margin: 0 auto;
float: left;
}
.form-group{
position: relative;
}
.form-group input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
width: 11%;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
</form>
</div>
I want to position my button on the right side using CSS.
here's the script:
<input id="search" class="form-control" type="text" placeholder="Search Location" style="margin-left: 100px; margin-top: 10px; width: 30%; z-index: 1;">
<input type="button" class="btn btn-default" onclick="location.reload();" style="width: 10%; margin-top: 10px; position: absolute; z-index: 1; background-color: #ffffff; border: 1px solid #dce4ec; color: #2c3e50" value="Refresh" />
<div id="map" style="position: relative;"></div>
Try this
.search-form input {
display: inline-block;
}
<div class="search-form">
<input id="search" class="form-control" type="text" placeholder="Search Location" style="margin-left: 100px; margin-top: 10px; width: 30%; z-index: 1;">
<input type="button" class="btn btn-default" onclick="location.reload();" style="width: 10%; margin-top: 10px; position: absolute; z-index: 1; background-color: #ffffff; border: 1px solid #dce4ec; color: #2c3e50" value="Refresh" />
</div>
<div id="map" style="position: relative;"></div>
Add all into one container and position the container, then add width to both to be equal 100%:
<style>
.container {
position: absolute;
top: 10px;
left: 100px;
}
.container #search {
width:80%;
}
.container .btn {
width:20%;
}
</style>
<div class="container">
<input id="search" class="form-control" type="text" placeholder="Search Location">
<input type="button" class="btn btn-default" onclick="location.reload();" value="Refresh" />
</div>
or, if you use bootstrap3, just follow this link:
http://getbootstrap.com/css/#forms-inline
.main{
width:300px;
height:25px;
position:relative;
}
.button{
position:absolute;
right:-75px;
top:0px;
}
<form>
<div class="main">
<input type="text" style="width:100%;" placeholder="Search Here"/>
<button type="reset" class="button">Refresh</button>
</div>
</form>
Try It Once
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.
I'm trying to change the div #header-search when focus the input #search. so when people focus the search field get bigger!
<div id="header-search">
<form >
<div class="input-box">
<input id="search" type="search" name="q" value="" class="input-text required-entry" maxlength="128" placeholder="Search" autocomplete="off">
<button type="submit" title="Search" class="button search-button"></button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
</form>
</div>
Style:
#header-search{
display: block;
position: absolute;
top: 0px;
left: 200px;
width: 40%;
height: 80px;}
#search{
width: 100%;
height: 80px;
}
#search:focus #header-search{
left: 0px;
width: 100%;
}