this is my page code sample
<body>
<div id="header">
<?php
include 'includes/header.php';
?>
</div>
<div id="loginpage">
<div class="data">
<h5><?php echo $errors ;?></h5>
<form class="loginform" action="login.php" method ="post">
<h5>UserName:</h5>
<input type="text" name="username" id="s" placeholder="username" required="required"/><br>
<h5>Password:</h5>
<input type="password" name="password" id="s" placeholder="password" />
<br>
<input type="submit" id="searchSubmit" value="submit" />
</form>
</div>
<img src="login.jpg" width="400px" height="380px"/>
</div>
<?php
include 'includes/footer.php';
?>
</body>
and this is my css rule
#loginpage
{
width:100%;
height:auto;
background:white;
display:-moz-box;
-moz-box-orient:horizontal;
position:relative;
}
.data {
width:300px;
height:250px;
margin:50px;
margin-top:100px;
padding:10px ;
text-align:left;
background:#e8fccc;
position:relative;
box-shadow: 0px 0px 5px 1px rgb(0,0,0 0.1) ;
}
#loginpage img{
margin:50px;
border-radius:10px;
box-shadow: 0px 0px 5px 1px rgb(0,0,0 0.1) ;
}
.loginform{
margin-top:50px;
}
now problem is css nt working properly in div data(class)
i defined its height 250px bt it is taking the same height of the img tag.
height is changing when i am incresing or decresng the height of img tag
If you don't want it to take shape of the elements inside add overflow:hidden; to the .input class
Also, you have to add # in front of your color or it won't work.
so black 000000 should be #000000 without the # it's no good.
also this is bad practice
margin:50px; margin-top:100px;
if you want 50px margin all around and 100px just on the top you should do margin:100px 50px 50px 50px thats top right bottom left.
Remove class="input" in that div <div class="input">
And use
input { //without the dot
width:300px;
height:250px;
margin:50px;
margin-top:100px;
padding:10px ;
text-align:left;
background:e8fccc;
position:relative;
box-shadow: 0px 0px 5px 1px rgb(0,0,0 0.1) ;
}
Related
I'm a beginner in web development and I have made a Signup form for a webpage . What I feel like is trully missing from the form is a circular avatar icon on top of it like the picture below :
I have html and css code and I have loaded an avatar icon . However I do not know how to place it on the top middle of the form just like the image . I would appreciate your help and guidance with this task .
My code :
//the avatar appears inside the page not on top
.avatar{
height:500px;
border-radius:50%;
}
.form-area{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;
background:rgb(0,0,0,0.5);
padding:40px;
}
h1{
margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
}
.form-area p {
margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
}
.form-area input,select{
margin-bottom:20px;
width:100%;
}
.form area input[type=text], .form-area input[type="password"]
{
border:none;
border-bottom:1px solid #ccc;
background-color:transparent;
outline:none;
height:40px;
color:#ffffff;
display:16px;
}
.form-area select{
margin-top:20px;
padding:10px 0;
}
.signupbtn{
border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer;
border-radius:20px;
}
.cancelbtn{
border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer;
border-radius:20px;
}
button:hover{
opacity:0.7;
}
<div class="form-area">
<form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
//the avatar I want to display on the form
<div class="imgcontainer">
<img src="IMAGES/login.jpg" alt="Avatar" class="avatar">
</div>
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name" ><b><span>Name<span></b></label>
<input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
<label for="surname" ><b><span>Surname<span></b></label>
<input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>
<label for="email" ><b><span>Email<span></b></label>
<input type="text" placeholder="Enter Email" name="email" id = "mailID" required>
<label for="psw"><b><span>Password</span></b></label>
<input type="password" placeholder="Enter Password" name="psw" id = "pass" required>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
Thank you in advance . If you have any questions or need more information about my page tell me and I will update the post.
Add this to the image:
.imgcontainer img{
height: 100px; /* set a default height*/
margin-top: -75px; /* move image up fo 75px */
border: 1px solid black; /* define a border */
border-radius: 50%; /* make the image rounded, this works only with square images*/
}
and this to it's container:
.imgcontainer{
display: flex; /* change display */
justify-content:center;/* align to the center the image */
/* NOTE : there is a lot of other way to align the image to the center, you can use the one that you prefer*/
}
If this method does not do what you want in the way you want, another way is to use position: absolute, center it on center top, and than traslate it -50% top and -50% left
I have a simple form that allows users to send mails to the site's owner. I wouldn't like to change it totally, because I've got already written PHP script for this, and this solution worked fine before I tried to add some styles to it...
The problem is, "Wyślij >" (submit) inside the textarea does not work ONLY in firefox. I can't click it, like the button is somewhere underneath. In Opera, Chrome, Edge, IE - it works just fine. I'm starting to giving up on this. I would appreciate any help, I don't know what's causing this.
JSFiddle: http://jsfiddle.net/c0vz64m1/
HTML code:
<form method="post" action="kontakt.php" id="contactform" style="margin-left:35vw; margin-top:20px;">
<label for="name">Imię<font color="white">*</font>:</label><br>
<input type="text" name="name" id="name" placeholder=" Twoje imię (wymagane)" required /><br>
<label for="email">Email<font color="white">*</font>:</label><br>
<input type="text" name="email" id="email" placeholder=" Twój email (wymagane)" required />
<div id="text-area">
<label for="message">Wiadomość<font color="white">*</font>:</label><br>
<textarea name="message" rows="9" cols="50" id="message" placeholder=" Twoja wiadomość (wymagane)" equired></textarea>
<input type="submit" name="submit" value="Wyślij »" class="submit-button"/></div>
</form>
CSS:
input#name,input#email {
box-shadow:0px 0px 10px skyblue;
border:2px solid skyblue;
border-radius:7px;
padding-left:5px;
transition:all .2s ease-in-out;
}
input#name:focus,input#email:focus {
box-shadow:0px 0px 20px skyblue;
transition:all .2s ease-in-out;
}
input#name:hover,input#email:hover {
box-shadow:0px 0px 20px skyblue;
}
.submit-button {
width:75px;
height:36px;
margin-left:380px;
display:block;
margin-top:-41px;
border-top:2px solid blue;
z-index:5000;
font-size:14pt;
color:skyblue;
font-family:Andada;
}
textarea {
box-shadow:0px 0px 10px skyblue;
border:2px solid skyblue;
border-radius:10px;
resize:none;
height:150px;
width:375px;
z-index:1;
padding-right:75px;
transition:all .2s ease-in-out;
}
textarea:focus {
box-shadow:0px 0px 20px skyblue;
transition:all .2s ease-in-out;
}
textarea:hover {
box-shadow:0px 0px 20px skyblue;
}
Use absolute positioning to put the button over the textarea and it will work.
Remove from class .submit-button these things:
margin-left:380px;
margin-top:-41px;
and add these:
position:absolute;
right: 0;
bottom: 30px;
Then add position:relative to #text-area .
Please see updated fiddle: http://jsfiddle.net/w86o8hhh/ which adds:
z-index:10;
to the CSS, and:
id="submit"
to the submit button
Here is my Html code for setting header and editable drop down
<div class="header" style="position:fixed; width:100%;">
<div class="container-fluid" id="continer1ForProjectContext">
<div class="row-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><a>img style="margin-left:10%; margin-top:0.3%;" ></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group has-success" style="margin-left:30%;">
<div class="select-editable" id="select2">
<select ng-options="item.label for item countryValues track by item.id" ng-model="selectedCountry">
<input type="text" name="Country" value="select" ng-model="selectedProject.label" id="txtProject" required />
</div>
</div>
</div>
</div>
and here is the CSS which i used
#continer1ForProjectContext{
background-color: #009530;
color: #959696;
height: 65px;
}
.select-editable {
background-color:white;
width:120px;
height:18px;
position:absolute;
}
.select-editable select {
top:0px;
left:0px;
font-size:14px;
border:solid #3c763d 1px;
width:170px;
margin:0;
height:30px;
border-radius: 5px 5px 5px 5px;
position:absolute;
}
.select-editable input {
bottom:0
width:150px;
padding:1px;
font-size:12px;
border:solid #3c763d 1px;
border-bottom:none;
height:29px;
border-radius: 5px 0px 0px 5px;
position:absolute;
}
.select-editable select:focus, .select-editable input:focus {
outline:none;
}
I want the header to be fixed which is done but at the same time when i scroll down the page the editable combo box is visible over the header. what is the problem??? any help is appriciable!!!
This 'problem' is caused because position: absolute; and position: fixed; take an element out of the document flow. To make sure your 'layers' of elements are in the correct order on the z-axis, you can use z-index.
A good read with a little more information is found here.
Am trying to make my fieldset data to be at center of the page but it displays in my page towards left. It displays fine fiddle, http://fiddle.jshell.net/8SuLK/ but not displaying to center of page in browser. How to go about.
Thanks in advance.
Remove position from fieldset and try like this: DEMO
CSS:
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
text-align:center;
display:block;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
width:70%;
border: 2px groove threedface;
}
If you don't need to have your fieldset positioned as fixed then you can center it in two ways.
1) Setting a width to your fieldset and add auto to its margin property.
EXAMPLE
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border: 2px groove threedface;
width:75%;
}
DEMO http://fiddle.jshell.net/8SuLK/3/
2) Adding a wrapper to your fieldset and set it as text-align:center; and then set display:inline-block; to the fieldset.
EXAMPLE
<div class="wrapper">
<fieldset>
<label>First Name:</label>
<input type="text" />
<label>Middle Name:</label>
<input type="text" />
<label>Last Name:</label>
<input type="text" />
<label>Date of Birth:</label>
<input type="date" />
</fieldset>
</div>
.wrapper{text-align:center;}
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display:inline-block;
border: 2px groove threedface;
}
DEMO http://fiddle.jshell.net/8SuLK/4/
PS. Just a reminder in your jsfiddle you can see the syntax highlighter showing in red the syntax errors. In your case the last closing tag, </fieldset> was in red because each input tag wasn't closed. Remember the right syntax for input is <input type="text" />.
Furthermore it's good practice to add the id to each input <input type="text" id="firstname" /> and then specify what the label is for like <label for="firstname">First Name</label>
Can anyone explain why on the 3rd line of the CSS in this JFiddle demo why the div ID of #form_container requires a height in order for the background to show if a float:left is specified at line 14?
I thought floats did not remove objects from the flow of the browser...
<div id="form_container">
<form id="contact_form" action="#" method="get" accept-charset="utf-8">
<p>
<label for="byour_name">Name:</label>
<input type="text" name="byour_name" value="" id="byour_name">
</p>
<p>
<label for="byour_email_address">Email:</label>
<input type="text" name="byour_email_address" value="" id="byour_email_address">
</p>
<p>
<label for="subject">Subject:</label>
<input type="text" name="formsubject" value="" id="form_subject">
</p>
<p>Message:
<br/>
<textarea id="form_messagebox" name="Message" rows="20" cols="25"></textarea>
</p>
<p>
<input id="submitBtn" type="submit" value="Send it!">
</p>
</form>
CSS
#form_container {
width: 300px;
/* height: 300px; Background works with this uncommented if the float is enabled*/
border: 2px red solid;
padding: 0 10px 0 10px;
background-color: red !important;
}
#form_container form {
color: black;
}
#form_container input, p {
margin: 0;
padding 0;
float:left; /* This breaks the background */
display:inline;
}
#form_container label {
width: 200px;
position:relative;
}
#submitBtn {
}
#contact input, textarea {
box-sizing: border-box;
color: rgb(0, 0, 0);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
background-color: rgb(221, 220, 219);
font: normal normal normal 16px/1.3em'open sans', sans-serif;
border: 0px solid rgb(192, 185, 181);
}
#form_messagebox {
height: 150px;
width: 200px;
}
here is fiddle of your que see this
http://jsfiddle.net/jkkheni/eJS6b/3/
added a css class of clear
.clear{ clear:both; height:0px; width:0px; display:table; content:"";}
and added a div in your html
<div class="clear"></div>
before closing div with id form_container
when you use float always clear all float.
or you can also use overflow:hidden in div with form_container id
float removes height of the element if it is not specified.
Try:
#form_container{
overflow:hidden;
}
DEMO here.
OR
clear floats after finishing form:
<div class="clr"></div>
.clr{clear:both;}
DEMO here.