I am trying to add a vertical line between the orange icons and text fields and then also fix placement of the "OR" text and align the icons properly, as shown in the image below. What updates can I make to my code to do that?
What I would like
What I have right now
<html>
<head>
<style type="text/css">
body{
width:1000px;
font-family:verdana;
}
input{
position:relative;
left:143px;
width:70%;
height:50px;
padding:10px;
}
textarea{
position:relative;
left:68px;
width:70%;
height:150px;
}
.label{
display:inline;
width:140px;
}
.icon{
float:left;
}
.divitem{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;;
border-bottom:1px solid #7C94A0;;
}
.field{
background-color:#C6DEFF;
border:1px solid #7C94A0;
}
#sub{
width:80px;
height:40px;
left:0px;
border:1px solid #7C94A0;
border-radius:5px;
}
#mail{
left:149px;
}
#phone{
left:139px;
}
#name{
width:1024px;
height:100px;
}
#cntct{
width:1024px;
}
#desc{
width:1024px;
border-style:none;
}
#dlabel{
vertical-align:top;
}
</style>
<title>E-mail US</title>
</head>
<body>
<h1>E-mail Us</h1>
<form action="confirmed.php" method="get">
<div class="divitem" id="name">
<h2 class="label">Name</h2>
<input class="field" type="text"/>
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
</div>
<div class="divitem" id="desc">
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 id="dlabel" class="label">Description</h2>
<textarea class="field"></textarea>
</div>
<div class="divitem" id="cntct">
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 class="label">Email</h2>
<input id="mail" class="field" type="text"/>
<br/><span id="or">Or</span><br/>
<img width="40" class="icon" src="http://i.imgur.com/zZE0y3y.png">
<h2 class="label">Phone</h2>
<input id="phone" class="field" type="text"/>
<br/>
<br/>
<input id="sub" type="submit" value="SUBMIT">
</div>
</form>
</body>
</html>
<form action="confirmed.php" method="get">
<div class="divitem" id="name">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Name</h2>
</div>
<div class="field">
<input type="text" />
</div>
</div>
<div class="divitem" id="desc">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2 id="dlabel">Description</h2>
</div>
<div class="field">
<textarea class="field"></textarea>
</div>
</div>
<div class="divitemcntct" id="cntct">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Email</h2>
</div>
<div class="field">
<input id="mail" type="text" />
</div>
</div><span id="or">Or</span>
<div class="divitemPhone" id="Phone">
<div class="icon">
<img width="40" src="http://i.imgur.com/zZE0y3y.png" />
</div>
<div class="label">
<h2>Phone</h2>
</div>
<div class="field">
<input id="phone" type="text" />
</div>
</div>
<div class="divitem" id="desc">
<br/>
<br/>
<input id="sub" type="submit" value="SUBMIT" />
</div>
</form>
CSS
.divitem {
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;
border-bottom:1px solid #7C94A0;
width:1000px;
height:100px;
}
.label {
display:inline;
width:200px;
float:left;
height:100px;
text-align:center;
}
.icon {
margin:0px;
margin-left:-5px;
padding:0px;
float:left;
border-right:1px solid black;
height:100px;
}
input, textarea {
position:relative;
left:143px;
width:60%;
height:50px;
padding:10px;
background-color:#C6DEFF;
border:1px solid #7C94A0;
}
#or {
text-align:center;
width:1000px;
display:block;
font-weight:bold;
background-color:#BFD6F6;
}
#sub {
width:80px;
height:40px;
left:0px;
border:1px solid #7C94A0;
border-radius:5px;
background-color:#E6E6E6;
font-weight:bold;
}
.divitemcntct
{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-top:1px solid #7C94A0;
width:1000px;
height:100px;
}
.divitemPhone
{
padding:10px;
padding-left:20px;
background-color:#BFD6F6;
border-bottom:1px solid #7C94A0;
width:1000px;
height:100px;
}
Fiddle
Related
I want to put the go-page button and input center and export button right on the same line, it doesn't work below
<div>
<P style="float: center">
<input type="text" id="page-dir" name="page-dir" maxlength="6" size="4" autocomplete="on"
onkeydown="if (event.keyCode == 13) document.getElementById('go-page').click()"/>
<button style="float: center" id="go-page" onClick="goPage()">go to page</button>
</P>
<P style="float: right">
<button id="export" onclick="export()">export</button>
</P>
</div>
.container {
display:block;
text-align:center;
width:500px;/*you can use percentage*/
position:relative;
border:1px solid #ff4500;
}
.cont-one {
display:inline-block;
max-width:150px;
border:1px solid #000;
}
#page-dir{
width:50px;
}
.cont-two{
position:absolute;
display:inline-block;
width:50px;
float:right;
border:1px solid #000;
left:450px;
}
<div class="container">
<div class="cont-one">
<input type="text" id="page-dir" />
<button id="go-page" onClick="goPage()">Go to page</button>
</div>
<div class="cont-two">
<button id="export" onclick="export()">export</button>
</div>
</div>
I'm just wondering what do we need to add into our coding so that my div position will auto adjust according to the browser's window size? Currently my div and input box always run out of position whenever I reduce the size of my browser's window.
Below is my code:
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript">
function startTime()
{
var today=new Date();
var y=today.getFullYear();
document.getElementById('datetime').innerHTML="© Systems 2003-"+y+"<br>"+"All rights reserved.";
}
</script>
<style type="text/css">
#username{
position:absolute;
top:190px;
left:70px;
}
#login{
position:absolute;
top:260px;
left:545px;
}
#password{
position:absolute;
top:240px;
left:70px;
}
#box{
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
margin-top:100px;
margin-left:360px;
box-shadow: 4px 4px 10px black;
}
.btn{
height: 30px;
width: 100px;
position:absolute;
top:395px;
left:620px;
}
#logo{
position:absolute;
top:130px;
left:595px;
}
#model{
font-size: 25px;
position:absolute;
top:200px;
left:545px;
}
#datetime{
margin-top:20px;
}
</style>
</head>
<body onload="startTime()">
<div class="container">
<div id="box">
<img src="logo.png" alt="logo" id="logo"/>
<div id="model"><p>Welcome</p></div>
<div id="login"><p>Please login</p></div>
<form class="form-signin">
<div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div>
<div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div>
<button class="btn btn-primary">Login</button>
</form>
</div>
<div id="datetime" align="center">
</div>
</div>
</body>
Step One: Remove your absolutely positioned CSS stuff.
Step Two: Take a look at this demo bootply with this markup in it:
<div class="container">
<div class="row">
<div id="box" class="col-sm-6 col-sm-offset-3">
<img src="logo.png" alt="logo" id="logo">
<div id="model">
<p>Welcome</p>
</div>
<div id="login">
<p>Please login</p>
</div>
<form class="form-signin">
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary">Login</button>
</div>
</form>
<div id="datetime" align="center">
</div>
</div>
</div>
</div>
Step Three: Become more familiar with how Bootstraps grid works.
HTH :)
you dont need all those position absolutes. Replace your CSS with this: HERES A DEMO
#box {
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
margin:100px auto;
box-shadow: 4px 4px 10px black;
text-align:center;
}
.btn {
height: 30px;
width: 100px;
}
#model {
font-size: 25px;
}
#datetime {
margin-top:20px;
}
Here is a basic solution without bootstrap: Remember only use absolute positioning when you absolutely have to.
Note: If you intended for your login text inputs to be pushed off to the side, this works. However as far as UX goes this is probably a very bad idea.
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript">
function startTime()
{
var today=new Date();
var y=today.getFullYear();
document.getElementById('datetime').innerHTML="© Systems 2003-"+y+"<br>"+"All rights reserved.";
}
</script>
<style type="text/css">
html, body{
height:100%; margin:0; padding:0;
}
#box{
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:400px;
height:400px;
box-shadow: 4px 4px 10px black;
text-align:center;
}
.btn{
height: 30px;
width: 100px;
}
#model{
font-size: 25px;
}
#datetime{
margin-top:20px;
}
.form-control{
margin:10px;
}
.form-container{
width:25%;
height:500px;
float:left;
min-width:185px;
}
.container{
height:500px;
width:100%;
}
#box-container{
width:48%;
height:500px;
float:left;
}
#box2{
width:400px;
}
#form-signin1{
position: relative;
top: 35%;
transform: translateY(-50%);
}
</style>
</head>
<body onload="startTime()">
<div class="container">
<div class="form-container">
<form id ="form-signin1" class="form-signin">
<div class="col-md-8"><input type="text" class="form-control" id="username" placeholder="Username"></div>
<div class="col-md-8"><input type="text" class="form-control" id="password" placeholder="Password"></div>
</form>
</div>
<div id="box-container">
<div id="box">
<img src="logo.png" alt="logo" id="logo"/>
<div id="model"><p>Welcome</p></div>
<div id="login"><p>Please login</p></div>
<form class="form-signin">
<button class="btn btn-primary">Login</button>
</form>
</div>
<div id="box2">
<div id="datetime" align="center"></div>
</div>
</div>
</div>
</body>
Something like this?
Fiddle for you
#box {
border:1px solid #eaeaff;
background-color: #eaeaff;
border-radius:5px;
width:300px;
height:400px;
margin-top:100px;
margin-left:360px;
box-shadow: 4px 4px 10px black;
padding: 3em 4em;
}
#box form, #box header {
text-align: right;
}
#box .form-group {
margin-bottom: 15px;
/*boostrap will already have this so delete it */
}
.btn {
height: 30px;
width: 100px;
}
#model {
font-size: 25px;
}
#datetime {
margin-top:20px;
}
<div class="container">
<div id="box">
<header>
<img src="logo.png" alt="logo" id="logo" />
<h2 id="model">Welcome</h2>
<p>Please login</p>
</header>
<section>
<form class="form-signin">
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" id="password" placeholder="Password">
</div>
<button class="btn btn-primary">Login</button>
</form>
</section>
</div>
<div id="datetime" align="center"></div>
I have a checkbox within a container and need to center it within the main container.
Right now its being displayed on the left hand side.
html
<div class="maincontainer">
<div class="inner container">
<input id="id" type="checkbox" name="name1" value="name1">
</input>
</div>
</div>
css code
.maincontainer{
height:100px;
width:90px;
background-color:black;
}
this looks to be what you want: http://jsfiddle.net/pHUcC/
<div class="maincontainer">
<div class="inner container">
<input id="id" type="checkbox" name="name1" value="name1">
</input>
</div>
</div>
.maincontainer{
height:100px;
width:90px;
background-color:black;
text-align:center;
color:white;
}
I think this is what your looking for Fiddle
.maincontainer{
height:100px;
width:90px;
background-color:black;
text-align:center;
color:white;
line-height: 100px;
}
I created a table to display a shopping cart. My first two rows line up perfectly, but the last row doesn't. I tried recreating it and still can't figure out what I'm doing wrong. Any ideas?
To make it more readable, I took out the first two rows and just left the last row that is causing the problems.:
CSS
.gallery-list
{
}
.gallery-list .container
{
clear:both;
width:100%;
padding-top:10px;
padding-bottom:10px;
}
.gallery-list .container .imgContainer
{
width:25%;
float:left;
padding-top:5px;
}
.gallery-list .container .imgContainer img
{
width:98%;
}
.gallery-list .container .descContainer
{
width:74%;
float:left;
padding-left:5px;
}
.gallery-grid
{
}
.gallery-grid .container
{
width:33%;
padding-top:10px;
padding-bottom:10px;
float:left;
}
.gallery-grid .container .imgContainer
{
}
.gallery-grid .container .imgContainer img
{
width:98%;
}
.gallery-grid .container .descContainer
{
display: none;
}
ul.pager
{
list-style-type: none;
margin:0px;
padding:0px;
}
.pager li {display: inline; }
.pager li a {padding:5px; border:solid 1px #ccc;margin:2px;}
.current
{
color:black;
}
.current:hover
{
text-decoration:none;
}
#pager
{
clear:both;
}
html
<tr>
<td>
<div class="gallery-list">
<div class="container">
<div class="imgContainer">
<img src=""/>
</div>
<div class="descContainer">
<div class="name">
<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Single)</h2>
</div>
<div class="desc">
</div>
<div class="shortcode">
<object class="simpleecommcartAddToCartButton">
<form id='cartButtonForm_1' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
<input type='hidden' name='task' id="task_1" value='addToCart' />
<input type='hidden' name='simpleecommcartItemId' value='1' />
<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
<span style="color:#666;font-size:1.1em;"><em></em></span>
<span style="font-weight:bold;font-size:1.01em;">Price: $89.00</span>
<input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">
<br><input type='submit' value='Add To Cart' name='addToCart_1' id='addToCart_1' />
<input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
<div id="stock_message_box_1" class="SimpleEcommCartUnavailable" style="display: none;">
<h2>We're Sorry</h2>
<p id="stock_message_1"></p>
<input type="button" name="close" value="Ok" id="close" class="modalClose" />
</div>
</form>
</object>
</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="imgContainer">
<img src=""/>
</div>
<div class="descContainer">
<div class="name">
<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Couple)</h2>
</div>
<div class="desc">
</div>
<div class="shortcode">
<object class="simpleecommcartAddToCartButton">
<form id='cartButtonForm_2' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
<input type='hidden' name='task' id="task_2" value='addToCart' />
<input type='hidden' name='simpleecommcartItemId' value='2' />
<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
<span style="color:#666;font-size:1.1em;"><em></em></span>
<span style="font-weight:bold;font-size:1.01em;">Price: $129.00</span>
<input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">
<br><input type='submit' value='Add To Cart' name='addToCart_2' id='addToCart_2' />
<input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
<div id="stock_message_box_2" class="SimpleEcommCartUnavailable" style="display: none;">
<h2>We're Sorry</h2>
<p id="stock_message_2"></p>
<input type="button" name="close" value="Ok" id="close" class="modalClose" />
</div>
</form>
</object>
</div>
</div>
</div>
</td>
</tr>
</table>
If you inspect the source of the page, you have closed and reopened the tr before your last column which is causing the last two columns to be split like that
Having looked at the posted code there is nothing wrong and it works perfectly:
http://jsfiddle.net/9pPXq/
How to make a web form with 3 columns using CSS? In the above example all elements are placed just in a single column.
<html>
<head>
<style>
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}
/* --------- End of Form --------- */
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<label>Name: </label>
<input type="text" name="name" id="name"/>
<label>Email: </label>
<input type="text" name="email" id="email"/>
<label>Password: </label>
<input type="text" name="password" id="password"/>
</form>
</div>
</body>
</html>
DEMO: http://jsfiddle.net/bfZR4/
Basically, if you put all three into divs with a class of column like so:
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div class="column">
<label>Name: </label>
<input type="text" name="name" id="name"/>
</div>
<div class="column">
<label>Email: </label>
<input type="text" name="email" id="email"/>
</div>
<div class="column">
<label>Password: </label>
<input type="text" name="password" id="password"/>
</div>
</form>
Then you can apply the following style to the column class:
.column
{
float: left;
width: 33%;
}
you can use this for all form or if you want to do this in a particular form so you can define css name with class or id.
form div
{
display: inline;
width: 33%;
float: left;
}
Hey you can used display:inline-block;
HTML
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div class="column">
<label >Name:
<input type="text" name="name" id="name"/></label>
</div>
<div class="column">
<label>Email:
<input type="text" name="email" id="email"/></label>
</div>
<div class="column">
<label>Password:
<input type="text" name="password" id="password"/></label>
</div>
</form>
</div>
Css
.column
{
display: inline-block;
margin-left: 23px;
vertical-align: top;
}
.column + .column{
margin-left:25px;
}
Live demo http://jsfiddle.net/bfZR4/2/
Put every 3 fields in a div with id section. and then each of field in a div havin class subsection
<html>
<head>
<style>
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}
#section{
width:100%;
padding: 10px;
}
.subsection{
width:30%;
margin:0px 5px 0px 5px;
float: left;
}
/* --------- End of Form --------- */
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div id="section">
<div class="subsection">
<label>Name: </label>
<input type="text" name="name" id="name"/>
</div>
<div class="subsection">
<label>Email: </label>
<input type="text" name="email" id="email"/>
</div>
<div class="subsection">
<label>Password: </label>
<input type="text" name="password" id="password"/>
</div>
</form>
</div>
</div>
</body>
</html>
thanks