Basically, the radio button is not working when I apply the z-index, but it does work when I remove the z-index.Any suggestions?
Here is the link to the code:
#firstqu {
position: relative;
left: 320px;
background-color: #EAEDED;
width: 800px;
height: 300px;
border-radius: 10px;
z-index: -1;
}
header {
font-size: 20px;
text-align: center;
background-color: purple;
position: sticky;
top: 0;
}
body {
margin: 0;
<header>Test</header>
<div id="firstqu">
<h1 style="color:black; font-size:25px;">1.Which superpower would you love to have?</h1>
<p for="outdoor" style="float:right; margin-top:55px; width:200px; position:relative; left:0;"><input name="indoor-outdoor" type="radio" value="outdoor">B.Invisibility</p><br></br>
<p for="outdoor"><input style="margin:0px; position:relative; right:0px;" type="radio" name="indoor-outdoor" value="outdoor">A.The ability to fly</p><br></br>
<p for="outdoor" style="float:right; width:200px; position:relative; left:0;"><input name="indoor-outdoor" type="radio" value="outdoor">D.Super strength </p>
<p for="outdoor"><input style="margin:0px; position:relative; right:0px;" type="radio" name="indoor-outdoor" value="outdoor">C.X-ray vision</p><br></br>
</div>
If you highlight the body from dev tools of your browser, you'll see the problem:
The body is over your radiobuttons. Giving more z-index to your controls, you can select them.
Related
I need to make a website without breaking it's structure. But, I've stepped into a problem. I was suggested to put a Newsletter Form on it, so I did. But when I try to resize the window (to check if it breaks), it's not breaking, but it is decentering, is there a way to make it always centers in relation to it's background?
Normal Size Centered:
Resized Not Centered:
I've tried vertical-aling:baseline; | position:sticky; | top:16.5%; bottom:16,5%
CSS:
.boletim .caixa_email{
position:absolute;
z-index:999;
margin:0 auto;
left:0;
right:0;
bottom:33%;
text-align:center;
width:50%;
font-family:Bebas Neue Regular;
font-size:1vw;
}
input[type=email], input[type=submit]{
width:45%;
height:auto;
padding: 12px;
margin: 8px 0;
display: inline-block;
vertical-align:baseline;
border: 1px solid #ccc;
box-sizing: border-box;
}
HTML:
<form action="action_page.php">
<div class="boletim">
<img src="Resumo.png" id="newsletter" alt="">
<div class="caixa_email">
<h1 id="texto_email">Inscreva-se em nosso boletim para receber ofertas!</h1>
<input type="email" name="email" placeholder="exemplo#exemplo.com.br">
<input type="submit" value="Inscrever-se">
</div>
</div>
</form>
I want to make it always centered (in relation to its background) when resizing the window.
try with transform
.boletim .caixa_email{
position:absolute;
z-index:999;
margin:0 auto;
left:50%;
top:50%;
text-align:center;
width:50%;
font-family:Bebas Neue Regular;
font-size:1vw;
transform: translate(-50%, -50%);
}
This result can be achieved with the simple Flex, no need of absolute position.
Give background to the background class in css or you can put image in there and make img absolute with height: 100%; width: 100%; left:0; top:0;
input[type=email], input[type=submit]{
width:45%;
height:auto;
padding: 12px;
margin: 8px 0;
display: inline-block;
vertical-align:baseline;
border: 1px solid #ccc;
box-sizing: border-box;
}
.background {
background: #999;
height: 100vh;
}
form {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="background">
<form action="action_page.php">
<div class="caixa_email">
<h1 id="texto_email">Inscreva-se em nosso boletim para receber ofertas!</h1>
<input type="email" name="email" placeholder="exemplo#exemplo.com.br">
<input type="submit" value="Inscrever-se">
</div>
</form>
</div>
See the result in full page snippet
I have successfully from examples created an CSS only tab functionality. The code works perfect on a pc screen, but on mobile the tabs go below each other and then they can't be pressed.
My CSS knowledge is limited to fix the problem. There is an "position: absolute;" div inside an "position: relative;" container.
If anyone can help change the code so the functionality can be affective on mobile also.
CSS for tab functionality.
.wietabs {
position: relative;
min-height: 600px;
clear: both;
margin: 25px 0;
}
.wietab {
float: left;
}
.wietab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
display: inline;
font-size: 14pt;
}
.wietab [type=radio] {
display: none;
}
.wietabcontent {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: auto;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
font-weight: bold;
}
[type=radio]:checked ~ label ~ .wietabcontent {
z-index: 1;
}
HTML for tab functionality
<div class="row-fluid">
<div style="min-height: 300px;" class="wietabs">
<div class="wietab">
<input type="radio" id="wietab-1" name="wietab-group-1" checked>
<label for="wietab-1">Tab1 Content</label>
<div class="wietabcontent">
<p>
Tab1
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-2" name="wietab-group-1">
<label for="wietab-2">Tab2 Content</label>
<div class="wietabcontent">
<p>
Tab2
</p>
</div>
</div>
<div class="wietab">
<input type="radio" id="wietab-3" name="wietab-group-1">
<label for="wietab-3">Tab3 Content Lang</label>
<div class="wietabcontent">
<p>
Tab3
</p>
</div>
</div>
</div>
</div>
JS Fiddle working example
Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.
body {
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
html {
text-alight: center;
}
#login {
text-align:center;
}
input[type=text], input[type=date], input[type=password] {
width: 30%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users {
width: 30%;
height: 50px;
}
#media only screen and (max-device-width: 1024px){
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users{
width: 100%;
height: 50px;
}
#keypad_users{
width: 345px;
height: 50px;
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:30px;
font-weight:bold;
}
#keypad {margin:auto; margin-top:10px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:100px;
height:80px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC;
}
#keypad tr td:hover {
background-color:#999999;
color:#FFFF00;
}
#display {
text-align:center;
width:345px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:48px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:18px;
font-weight:bold;
display:none;
}
}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
I've made a JSfiddle for you here (click me please) that resembles the picture you've added.
As requested to not use a third party like I've added the code here:
HTML
<div id="login">
<form action = "login.php" id="login" method ="POST">
<div class="picture">
</div>
<p>Username</p>
<input type="text" name="username" id="username" required /><br /><br />
<p>Password</p>
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
CSS
body
{
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#login
{
text-align:center;
width: 50%;
margin: 0 auto;
}
.picture
{
width:100px;
height: 100px;
border-radius: 100px;
background-color:red;
margin: 0 auto;
}
#login p
{
float: left;
}
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
EDIT:
New fiddle here: https://jsfiddle.net/gay1ufa1/2/
I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.
Further more use have a duplicated id, id's must be unique to the page.
#login_container /*This is Our base container for the login "control" */
{
width:30%; /*Define the width of the control*/
margin:auto; /*This Provide the horizontal centering of the control*/
padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
background-repeat:no-repeat; /*One Bil Murray is more than enough*/
background-color: #F0F0F0; /*Base Background image*/
}
#login_container label
{
display:block; /*Label will now take up a whole line*/
margin-bottom:.25em; /*Give it some room underneath*/
}
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
width:100%; /*Form controls now take 100% width of the container*/
margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
<label for="username">Username </label>
<input type="text" name="username" id="username" required />
<label for="password">Password</label>
<input type ="password" name="password" id="password" required />
<input type="submit" name="submit" value="Log in">
</form>
</div>
One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:
http://codepen.io/anon/pen/dNWQgp
What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.
What seems to be an easy HTML page and CSS set up I have come up to an issue. I am trying to make a DIV fill up the rest of the page and meet with the DIV at the bottom.
I have researched all through the web and tried many options I have come across.
It seems the most popular way is to use position:absolute but when I do that my Google map disappears. It will also not let me change the position of the Google Map DIV from relative.
At the moment it is displaying as you can see from my image. I would like the #map DIV to center and fill up the remainder of the space available.
My site in Chrome element view
My HTML code:
<div id="wrapper">
<div id="header">
<h1>Find a Car Park</h1>
</div>
<div id="section">
<input type="text" id="town" placeholder="Search for Town.." onkeypress="handle(event)" />
<input type="button" value="Find Car Parks" onclick="codeAddress()" />
<input type="button" value="View All" onclick="getAllCarParks()" />
<input type="button" value="Your Location" onclick="loadUserScript()" />
</div>
<div id="map">
<div id="googleMap">
</div>
</div>
<div id="footer">
<p>hello</p>
</div>
</div>
</body>
My CSS code:
body{
margin:0;
font-family: 'Cabin', sans-serif;
}
#header {
background-color:#2d89ef;
color:white;
text-align:center;
padding: 20px;
}
#wrapper{
position:absolute;
height:100vh;
width:100vw;
}
#section {
text-align:center;
padding-bottom:15px;
padding-top:15px;
width:100vw;
}
#footer {
background-color:#2c3e50;
color:white;
clear:both;
text-align:center;
padding-top:10px;
padding-bottom:10px;
bottom:0;
position:absolute;
width:100vw;
}
#map {
height:auto;
}
#googleMap{
height:65%;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #2d89ef;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
input[type=text] {
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: darkgrey;
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
Try using flexbox instead.
https://css-tricks.com/centering-css-complete-guide/
<div style="display:flex;justify-content:center;align-items:center;">
<div></div>
</div>
Try this CSS code on the #map, it will makes your map full width and height of the page :
#map {
display: block;
width: 100%;
height: 100%;
}
Fiddle
I am trying to make facebook style comment post area but css is not working. What I'm trying to do. When increased the height of the textarea i want to submit button move down at the same time. When you write a few lines in the textarea, you'll see the submit button does not go move down at the same time.
HTML
<div class="stcommenttext">
<form method="post" action="">
<div class="comtextarea">
<div class="yorumyazalani">
<textarea name="comment" class="comment" maxlength="200" id="" rows="2" cols="50" value="Add your comment here...."></textarea>
</div>
<div class="comgonder">
<input type="submit" value="" id="" rel="" class="comment_button wallbutton" />
</div>
</div>
</form>
</div>
CSS
.comment {
border:1px solid #fff;
width:425px;
margin-left:3px;
margin-top:3px;
font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
font-size:12px;
resize:none;
background-color:#f4f4f4;
}
.comtextarea {
float:left;
width:494px;
margin-left:3px;
height:auto;
border:1px solid #d8dbdf;
background-color:#fff;
}
.comtextarea textarea {
min-height:30px;
}
.yorumyazalani {
float:left;
width:auto;
height:auto;
}
.comgonder {
float:right;
width:auto;
height:auto;
bottom:0px;
margin-left:-5px;
}
.wallbutton {
float:left;
background-color: #fff;
min-width: 32px;
padding: 4px;
text-align: center;
background-position: left bottom;
background-repeat: repeat-x;
border: 1px solid #fff;
color: white !important;
cursor: pointer;
font-size: 12px;
font-weight: bold;
margin-top: 7px;
padding: 5px;
margin-left:5px;
text-decoration:none;
background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg);
background-repeat:no-repeat;
background-position:left;
outline:none;
}
Here is the DEMO
You can fix this in a couple of simple steps:
Set position: relative; on .comtextarea. Now each child can relate to it's container.
Set position: absolute; on .comgonder. Now you can position this element in relation to .comtextarea.
Set bottom: 5px; and right: 5px; on .comgondor. It now follows the right corner of .comtextarea.
Codepen Fork
Try this CSS for the button:
.comgonder {
width: auto;
height: auto;
margin-bottom: 8px;
vertical-align: bottom;
display: inline-block;
}
And this for the textarea:
.yorumyazalani {
width: auto;
height: auto;
vertical-align: top;
display: inline-block;
}
This will make your 2 form elements inline (instead of floating them) and allow the button to be aligned based on the bottom of the textarea, instead of the top.
Updated Demo: http://codepen.io/anon/pen/CdxDI
.comtextarea
{
position: relative;
}
.comgonder
{
position: absolute;
right: 0px;
bottom: 0px;
}
You can change the right/bottom offsets for better spacing/alignment if you like