I have created a login page but its not responsive and for achieving that I have messed up my entire design.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box
{
position: center;
top: 17;
left: 17;
}
.logo
{
position: absolute;
top:50px;
left: 100px;
border-right: 2px solid gray;
}
</style>
</head>
<body> <div class="container">
<h2>ADMIN PANEL LOGIN</h2>
<form>
<div>
<div class="form-group box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<img src="back_box.png" class="box" width="900" height=" 400" />
<img src="logo_written.png" class="logo" width="250" height="300" />
</div>
</form>
</body>
</html>
i have added bootstrap classes too but i am unable to achieve my goal of responsive design
For Bootstrap you need to add bootstrap file source just add this to your head section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
just add one link cdn of bootstrap.css..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.box
{
position: center;
top: 17;
left: 17;
}
.logo
{
position: absolute;
top:50px;
left: 100px;
border-right: 2px solid gray;
}
</style>
</head>
<body> <div class="container">
<h2>ADMIN PANEL LOGIN</h2>
<form>
<div>
<div class="form-group box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<img src="back_box.png" class="box" width="900" height=" 400" />
<img src="logo_written.png" class="logo" width="250" height="300" />
</div>
</form>
</body>
</html>
Add this meta tag to your head tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
after that you can able to write media query for multiple devices like mobile & tablates...
#media (max-width: 767px) {
/* write css for mobile here */
}
#media (min-width: 768px) and (max-width: 1024px) {
/* write css for tablate here */
}
Related
I am creating a front-end for google homepage for a project, but I am confused about how to apply spacing of the nav bar same as the original google home page. The code below has spacing something like this:About Store Images Sign in but I want something like this About Store Images Sign in.
html{
height: 100%;
min-height: 100%;
}
a{
display: inline-block;
padding: 15px;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
About
Store
Images
Sign in
</div>
<div id="main">
<img src="google.png" alt="img" width="auto">
<form action="https://google.com/search">
<input type="text" name="q">
<br>
<input type="submit" value="Google Search">
<input type="submit" name="btnI" value="I'm Feeling Lucky">
</form>
</div>
<div id="footer">
Advertising
Business
How Search works
Privacy
Terms
Settings
</div>
</body>
</html>
I will appreciate any help or suggestions for this.
Here is a solution using display: flex and justify-content: space-between;
html{
height: 100%;
min-height: 100%;
}
a{
display: inline-block;
padding: 15px;
color: black;
}
#header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
<div>
About
Store
</div>
<div>
Images
Sign in
</div>
</div>
<div id="main">
<img src="google.png" alt="img" width="auto">
<form action="https://google.com/search">
<input type="text" name="q">
<br>
<input type="submit" value="Google Search">
<input type="submit" name="btnI" value="I'm Feeling Lucky">
</form>
</div>
<div id="footer">
Advertising
Business
How Search works
Privacy
Terms
Settings
</div>
</body>
</html>
I can't get to center a component perfectly I want this form to be in the middle and that works, but I can't get the background to be around it perfectly, I've tried millions of things can someone give me a hand?
Thank you in advanced.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Accounts</title>
</head>
<body>
<div class="authform">
<form class="my-form form-horizontal">
<div class="color">
<fieldset>
<label class="col-md-4 control-label" for="username"></label>
<div class="col-md-5">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<br><br><br>
<label class="col-md-4 control-label" for="password"></label>
<div class="col-md-5">
<center><input id="password" name="password" placeholder="Password" class="form-control input-md a-in" required="" type="password"></center>
</div>
<br><br><br>
<label class="col-md-4 control-label" for="send"></label>
<div class="col-md-4">
<button id="send" name="send" class="btn">Auth</button>
</div>
</fieldset>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
CSS:
.authform {
padding-top: 15%;
width: 50%;
margin: auto;
float: center;
}
.color {
margin: auto;
float: center;
background-color: #2ecc71;
border-radius: 25px;
border: 2px solid #2ecc71;
padding: 20px;
}
You might want to try FlexBox. In my opinion, it's the single best thing that ever happened to CSS.
See my CodePen for an example using your HTML.
These 3 lines of CSS are the most important:
display: flex;
align-items: center;
justify-content: center;
Edit: My CodePen might not look perfectly centered, but that's because height: 100vh doesn't really work in CodePen. But it'll work outside of CodePen.
Edit 2: Updated codepen
Couldn't you simply apply the background and border to the .authform class or are you going for a different look?
.authform {
padding: 15% 20px 20px;
width: 50%;
margin: auto;
background-color: #2ecc71;
border-radius: 25px;
border: 2px solid #2ecc71;
}
You are using bootstrap for your inputs. Bootstrap's columns must be 12 in every row. In your case you have to add one div after every input.
<label class="col-md-4 control-label" for="username"></label>
<div class="col-md-4">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<div class="col-md-4"></div>
or
<label class="col-md-3 control-label" for="username"></label>
<div class="col-md-6">
<center><input id="username" name="username" placeholder="Username" class="form-control input-md a-in" required="" type="text"></center>
</div>
<div class="col-md-3"></div>
Maybe you could try, in css:
text-align:center;
margin-left:(half of the Pixels of the screen)
margin-top:(half of the Pixels of the screen)
I want to design a div that has an input box and some other elements. I want to use bootstrap to give a dynamic size to input box that change its width with changing window width and in mobile devices show in two line.
like this:
this is an example code without any class:
<form>
<div>
<input type="submit" value="search">
<select>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
some text
</div>
<div>
<input type="text" placeholder="search text input">
</div>
I implemented the first image in your post and it below in the code.
Try running it, dont forget to expand snippet
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
<div class="row">
<div class="col-sm-2">
<input type="submit" class="form-control" value="search">
</div>
<div class="col-sm-3">
<select class="form-control">
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
<div class="col-sm-2">
some text</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="search text input">
</div>
</div>
In order to achieve your requirement you need to go for the Flexbox display property to achieve this using pure CSS method. Here you are re arranging the UI depending up on the screen resolutions. Flexbox display provides you the best method to set the opder of the div according to your preference. I have attached the sample snippet along with this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.FormContainer {
width: 100%;
}
.Class1 {
width: 50%;
float: left;
}
.Class2 {
width: 50%;
float: right;
}
#media only screen and (max-width: 768px) {
.FormContainer {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.Class1 {
order: 2;
width: 100%;
float: right;
}
.Class2 {
order:1;
width: 100%;
float: left;
}
}
</style>
<body>
<form class="FormContainer">
<div class="Class1">
<input type="submit" value="search">
<select>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
some text
</div>
<div class="Class2">
<input type="text" placeholder="search text input">
</div>
</form>
</body>
</html>
Hope this will work fine for you.
You can find more about Flexbox here http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and http://philipwalton.github.io/solved-by-flexbox/.
Also look at this solution which explains more about Flexbox
How can I center the below form. Right now it is too far over to the right. I want it centered on the page (Moved slightly over to the left). I have tried a lot of different solutions however, I know I am missing something very small here. Thank you.
![<!DOCTYPE HTML>
<head>
<title>Page | Contact</title>
<meta charset="utf-8">
<!-- Google Fonts -->
<link rel='stylesheet' type='text/css' href='css/font.css'/>
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/simple_menu.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/contact.css">
<!-- Contact Form -->
<link href="contact-form/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="contact-form/css/uniform.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script src="js/contact.js"></script>
<?php include 'common_header.php'; ?>
</head>
<body>
<?php
include 'header.php';
?>
<div id="container">
<div class="one-third"> </div>
<div class="one-third">
<div class="heading_bg">
<h2>Contact Us</h2>
</div>
<form action="#" id="contact_form" class="TTWForm" method="post">
<div id="field1-container" class="field f_100">
<label class="required" for="name">Name</label>
<input name="name" id="name" type="text">
<span id="name_validation" class="error_message"></span>
</div>
<div id="field2-container" class="field f_100">
<label class="required" for="subject">Subject</label>
<input name="subject" id="subject" type="text">
<span id="subject_validation" class="error_message"></span>
</div>
<div id="field5-container" class="field f_100">
<label class="required" for="email">Email</label>
<input name="email" id="email" type="email">
<span id="email_validation" class="error_message"></span>
</div>
<div id="field4-container" class="field f_100">
<label class="required" for="message">Message</label>
<textarea rows="5" cols="20" id="message" name="message"></textarea>
<span id="message_validation" class="error_message"></span>
</div>
<div id="form-submit" class="field f_100 clearfix submit">
<input value="Submit" type="submit" id="submit_button">
</div>
</form>
</div>
<div class="one-third last">
</div>
<div style="clear:both; height: 0px"></div>
</div>
<!-- close container -->
<?php
include('footer.php');
?>
</body>
</html>][2]
CSS
#after_submit, #email_validation, #name_validation {
display:none;
}
#after_submit{
background-color: #c0ffc0;
line-height: 31px;
margin-bottom: 10px;
padding-left: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#after_submit{
color: #6c6c6c;
}
.error {
background-color:#FFDFDF;
color:red;
}
.error_message{
font-style: italic;
font-size: 10px;
}
.row {
margin:5px;
}
This should do the trick for you:
#contact_form{
width:50%;
margin-left:auto;
margin-right:auto;
}
Check the fiddle here
I have not added all your CSS, only showed how you can center the form. Using the CSS above in your code, you would be able to center it.
You can put the form in a div and use css on the div or use for the form. Set width accordingly, but the margin-left and right when set to auto, put it into center of the screen, no matter what the screen size is.
If this doesnt work, then create a jsfiddle with all your relevant css and html and comment.
This should do the trick. Might have to play with the width and margin, but as long as they add up to 100%, you should be okay.
#contact_form, .heading_bg {
display: block;
position: relative
width: 50%;
margin: 0 25%;
padding: 0;
}
That will at least center your main div. Then it's just a matter of playing with the inside div and input settings to get things where you'd like them.
Please don't judge me i just stared developing websites and this is my first one.
here is my website and no matter what i set position to i cant make form or images stay on there place. when using static position i cant place one image on another. so what can i do ?
<style type="text/css">
.position
{
position:Relative;
top:-40px;
left: 5px;
width:13%;
height:13%;
}
.WidthFull
{
position: static;
z-index: 0;
width: 99.4%;
}
.FormPosition
{
position: Relative;
top:-80px;
right:-1070px;
}
</style>
</head>
<body>
<img alt="" class="WidthFull" src="img/main%20Head.png" />
<img alt="" class="position" src="img/Letters%20connic.png" />
<div class=FormPosition>
<form id="login" method="post" action="index.php">
<input type="text" placeholder="Your Email" name="email" autofocus/>
<input type="text" placeholder="Password" name="email" autofocus />
<button type="submit" style="width: 5%; height: 25px; border: 0;background: #209cf8; border-radius:5px"><font size="3.0";><b>Login</b></font>
</button>
<span></span>
</form>
</div>
</body>
</html>
Use like this
outer side div property will be relative and inner image/div property will be absolute
which one you want to show up side
<style type="text/css">
.position-relative{
position:relative;
}
.position-absolute{
position:absolute;
top:10px;
left:10px;
z-index:10;
}
</style>
</head>
<body>
<div class="position-relative">
<img alt="" class="WidthFull" src="img/main%20Head.png" />
<img alt="" class="position-absolute" src="img/Letters%20connic.png" />
</div>
</body>
</html>