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>
Related
I'm trying to position my bootstrap rows for small devices but I'm running into an issue with my rows.
They are touching the edge of the screen and it looks really ugly, and I tried to offset it with col-ex-off-2 but now that is not only not helping at all, but its messing up the screen medium and large screens.
Also, I can add any margin to the rows either and its making the text boxes look super ugly because they are touching.
Here is a link to the bootply replicating this issue. Notice the text boxes are touching each other and it looks bad. Also they are not side by side like I would prefer.
http://www.bootply.com/Ko7Ky3nj0M
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body {
height:100vh;
max-width: 1500px;
margin: 0 auto;
padding-top: 00px;
}
h1 {
font-size:50px;
}
.checkbox-margin
{
margin-left:30%;
}
.subtitle
{
display:block;
text-align:right;
border-top: 7px solid #ffffff;
color:white;
font-size:40px;
}
.textarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}
.content
{
min-height:90vh;
margin-top:5vh;
margin-bottom:5vh;
border-radius:15px;
box-shadow: 1px 1px 20px #000000;
margin-right:15px;
}
.stylebox
{
border-top-right-radius:15px;
border-bottom-left-radius:15px;
background-color:#FFFFFF;
color:#CC3611;
margin-top:5%;
margin-bottom:7%;
}
.full
{
min-height:100vh;
}
.textarea p
{
font-size:20px;
font-weight:bold;
}
.textarea h3
{
font-weight:bold;
}
.divarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}
.form-margin
{
margin-bottom:2%;
}
#media screen and (max-width: 992px) {
.container .col-xs-12 {
margin:0px;
padding:0px;
}
.col-xs-12
{
margin-top:50px;
padding-bottom:10px;
padding-left: 10px;
padding-right:10px;
}
.content
{
min-height:100vh;
border-radius:0px;
box-shadow: 0px;
}
h1 {
padding:0px;
}
}
</style>
</head>
<body>
<div class="container full">
<div class="row full">
<div class="col-xs-0 col-md-2">
</div>
<div class="col-xs-12 col-md-8 content">
<div class='divarea'>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
</div>
</div>
<div class="col-xs-0 col-md-2"></div>
</div>
</div>
</body>
</html>
You need to change the way that you are using your forms, there is no need to add custom css, if you wrap each pair of elements in a "input-group" class, you can apply other classes that separates the information nicely. If you check the Bootsrap input group documentation here you can get some examples on form elements.
You can solve you current problem by adding an empty element , such as a label, with the class m-b-1 (margin-bottom-1rem).
Note that this is a hotfix and would not recommend it otherwise.
<div class="row form-margin">
<div class="col-xs-8 col-xs-offset-2 col-md-6 ">
<input placeholder="Test" type="text" class="form-control" id="usr">
<label class="m-b-2"></label>
</div>
<div class="col-xs-8 col-xs-offset-2 col-md-6">
<input placeholder="Test" type="text" class="form-control" id="usr">
<label class="m-b-2"></label>
</div>
</div>
Website I'm building
Hello, I'm wondering if anyone could help me achieve the layout in this photograph? I'm trying to build this website, and my current progress is being frustrating. I've created the basic layout but it doesn't work correctly.
I'm not sure on how to position the content to match this image. If someone could point me in the write direction that would be great.
<body>
<div>
<div>
<div>
<div>
<h3>LOGO</h3>
</div>
<div>
<hr>
<h2>Console</h2>
</div>
<div class="form">
<form>
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
Forgot your password?
<button type="submit">Log in</button>
</form>
</div>
<div class="images">
<a id="firstPostLink" target="_blank">
<div class="box" id="firstPostImg">
</div>
</a>
<a id="secondPostURL" target="_blank">
<div class="box" id="secondPostImg">
</div>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
Heres the CSS`body {
background-color: #13253F;
color: white;
}
a {
text-decoration: none;
color: white;
}
hr {
border: solid #6cc1d6;
border-width: 5px 5px 5px 5px;
clear: both;
margin: 10px 0;
height: 0;
width: 160px;
position: relative;
left: 100px;
}
h3 {
text-align: center;
}
h2 {
margin-left: 100px;
margin-top: -15px;
}
label {
color: #f0f0f0;
}
.form {
padding: 20px;
margin: 0 auto;
position:relative
}
.box {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 600px;
height: 600px;
border:2px solid white;
}
.images {
position:absolute;
left:200px;
height:100%;
}
#firstPostImg {
position:relative;
left:1100px;
top:-300px;
}
#secondPostImg{
position:relative;
left:1100px;
top:-300px;
padding-bottom:0;
}`
Here's the link to the codepen
You didn't make it clear what specific issues you're trying to fix. But I do see several things that should be improved in the code. The first of which is the amount of divs you have. It seems you may have a lot of unnecessary nesting.
And if one of your goals is to make things more responsive, it's a good idea to use a grid framework (such as bootstrap or foundation).
Using Bootstrap, I created a wireframe of the beginning of what you're wanting to achieve. I'd recommend looking closely at how the grid system works. That'll make a big difference.
Here's my demo.
HTML
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<!-- Logo here-->
<img src="http://placehold.it/335x115" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<!-- Console -->
<h2>Console</h2>
</div>
</div>
<form class="row">
<!-- Form -->
<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-2">
<div class="row">
<div class="col-md-12 form-group">
<label for="email" class="control-label">Email Address: </label><br>
<input type="email" name="email" id="email">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="password" class="control-label">Password: </label><br>
<input type="text" name="password" id="password">
</div>
</div>
<div class="row">
<div class="col-md-8">
Forgot your password?
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</div>
</div>
</form>
</div>
<sidebar class="col-md-3 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-6">
<img src="http://placehold.it/275x290" class="img-responsive">
</div>
<div class="col-lg-12 col-md-12 col-xs-6">
<img src="http://placehold.it/275x290" class="img-responsive">
</div>
</div>
</sidebar>
</div>
I'd recommend positioning/styling everything you create. Good thourough code will ensure less issues with different browsers and devices.
Only use the containers (divs) you actually need, give them a class or ID and position everything properly in your CSS. Minimum you should float and give a width to your key structural divs so you get predictable results.
Here's one possible solution:
$(document).ready(function() {
feednami.load(urlToHT, getHeaderTagPost);
feednami.load(urlToKX, getKXBlogPost);
});
var firstPostImg = $("#firstPostImg");
var secondPostImg = $("#secondPostImg");
var firstPost = $("#firstPost");
var secondPost = $('#secondPost');
var firstPostURL = $("#firstPostLink");
var urlToImg = "";
var urlToArticle = "";
var urlToHT = 'http://wiki.headertag.com/feed';
var urlToKX = "http://kx.indexexchange.com/feed/";
var secondPostUrl = $("#secondPostURL");
function getHeaderTagPost(data) {
if (data.error) {
console.log(data.error);
} else {
var entries = data.feed.entries;
console.log("Header Tag " + entries);
urlToImg = removeCharacters(entries[0].image.url);
urlToArticle = entries[0].link;
firstPostImg.css("background-image","url("+ urlToImg +")");
console.log(urlToImg);
// firstPost.attr("src", urlToImg);
firstPostURL.attr("href", urlToArticle);
}
}
function getKXBlogPost(data) {
if (data.error) {
console.log(data.error);
} else {
var entries = data.feed.entries;
console.log("KX blog: " + entries);
urlToImg = removeCharacters(entries[0].image.url);
urlToArticle = entries[0].link;
console.log(urlToImg);
secondPostImg.css("background-image","url("+ urlToImg +")");
secondPostUrl.attr("href", urlToArticle);
}
}
function removeCharacters(string) {
return string.substring(0, string.indexOf('?'));
}
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
body {
background-color: #13253F;
color: white;
}
a {
text-decoration: none;
color: #00AFE5;
}
hr {
border: solid #6cc1d6;
border-width: 5px;
clear: both;
margin: 10px 0;
height: 0;
width: 100%;
position: relative;
float: right;
}
h3.logo {
margin-top: 110px;
text-align: center; margin-bottom: 40px;
}
h2 {
}
label {
color: #f0f0f0;
}
.form {
margin-top: 100px;
}
.box {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 300px;
border:2px solid white;
}
.images {
position:absolute;
right: 0px; top:0;
height:100%;
}
#firstPostImg {
position:relative;
}
#secondPostImg{
position:relative;
padding-bottom:0;
}
#media screen and (max-width: 992px) {
form.form {margin-top:30px;}
#firstPostImg {margin-top: 30px;}
}
<div class="container">
<div class="col-md-8">
<div class="col-md-12">
<h3 class="logo">Index Exchange</h3></div>
<div class="col-md-3">
<hr>
<h2>Console</h2>
</div>
<div class="col-md-6">
<form class="form">
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-md-7">
Forgot your password?
</div>
<div class="col-md-5">
<button class="btn btn-info btn-block" type="submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-4">
<a id="firstPostLink" target="_blank"><div class="box" id="firstPostImg"></div></a>
<a id="secondPostURL" target="_blank"><div class="box" id="secondPostImg"></div></a>
</div>
</div> <!-- end of .container -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
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
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>
i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:
login.html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="login_container">
<form action="#" method="POST">
<div class="row">
<label for="username" class="label">Username</label>
<input type="text" class="field" name="username" />
</div>
<div class="row">
<label for="password" class="label">Password</label>
<input type="password" class="field" name="password" />
</div>
</form>
</div>
css/style.css:
#login_container {
margin-top:50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border:1px solid black;
display:block;
}
.field {
float:right;
margin-left: 10px;
}
label {
float:left;
}
.row{
display:block;
clear:both;
}
and the output:
Why does the border cross the password text field?
EDIT:
with
form{
border:1px solid black;
}
the output is:
Add overflow:auto; to your #login_container div.
jsFiddle example
Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.