This is my html file. 1st.jpg file is in same folder. But still it's can't load on server. I don't understand what to do. I tried using inline css, embedded css as well external css also.
In debugging they shows Image can't load.
Code:-
//Form hidding Effect
$(document).ready(function() {
$("#b1").click(function() {
$("#main").hide();
});
});
//Button hidding Effect
$(document).ready(function() {
$("#b1").click(function() {
$("#b1").hide();
});
});
//Sub division hidding Effect
$(document).ready(function() {
$("#b1").click(function() {
$("sub").hide();
});
});
//FadeIn Effect on text
$(document).ready(function() {
$("#b1").click(function() {
$("#display").fadeIn(3000);
});
});
//FadeOut Effect on text
$(document).ready(function() {
$("#b1").click(function() {
$("#display").fadeOut(8000);
});
});
//FadeIn effect on Game_Table
$(document).ready(function() {
$("#b1").click(function() {
$("#game_div").fadeIn(13000);
});
});
function setUsername() {
var user = {
name: document.getElementById('name').value,
// lastname: document.getElementById('lastname').value,
// address: document.getElementById('address').value,
gen: document.getElementById('gen').value,
city: document.getElementById('city').value,
// emailid: document.getElementById('emailid').value,
// mobileno: document.getElementById('mobileno').value,
};
var data = {
data: {
en: "insert",
data: user
}
};
console.log("here-->", user)
socket.emit('req', data);
};
.name {
height: 40%;
width: 40%;
font-size: 25px;
font-family: Time-new-roman;
}
table {
border: 3px solid red;
background-color: #DCB68E;
}
/*button{
margin-left: 30%;
padding-left: 5%;
}*/
td {
width: 250px;
height: 50px;
padding-left: 8%;
}
.input_name {
width: 130px;
}
.input_btn:hover {
background-color: green;
width: 100px;
height: 50px;
}
#shadow1 {
border: 1px solid;
padding: 10px;
box-shadow: 7px 7px black;
}
.ft_clr {
color: #3f0a0a;
}
#font-face {
font-family: 'TheBlacklist';
src: url('./TheBlacklist/TheBlacklist.woff');
}
.div1 {
width: 326px;
height: 277px;
}
.div2 {
width: 326px;
height: 55px;
}
.div3 {
margin-top: 250px;
width: 1500px;
height: 600px;
}
.input_btn {
width: 100px;
height: 50px;
font-size: 175%;
font-family: TheBlacklist;
border: 1px solid;
padding: 10px;
box-shadow: 7px 7px black;
}
.h1_txt {
color: black;
font-size: 400%;
font-family: TheBlacklist;
}
body {
background-image: url('1st.jpg');
"
}
#game_table {
margin-top: 70px;
box-shadow: 7px 7px black;
}
#game_table td {
width: 60px;
height: 60px;
border: 3px solid black;
background-color: skyblue;
}
#game_div {
background-image: url('1st.jpg');
}
<!DOCTYPE html>
<html>
<head>
<title>For in Row</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body background="./1st.jpg">
<div id="main" class="div1">
<form action="" id="Registration" method="">
<table cellpadding="1" bgcolor="white" align="left" cellspacing="2" id="shadow1">
<tr>
<td colspan=2>
<center><b><h1 class="ft_clr"><font style="font-family: TheBlacklist">Gamer Registration</font></h1></b></center>
</td>
</tr>
<tr>
<td>Gamer Name</td>
<td><input type=text name=textnames id="name" size="30" class="input_name"></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gen" value="male" size="10" id="gen">Male<input type="radio" name="gen" value="Female" size="10" id="gen">Female</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="City" id="city">
<option value="-1" selected>Country</option>
<option value="uk">UK</option>
<option value="usa">USA</option>
<option value="india">India</option>
<option value="russia">Russia</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<div id="sub" class="div2">
<center><button id="b1" class="input_btn" onclick="setUsername()">Play</button></center>
</div>
<div id="display" class="div3" style="display: none">
<center>
<h1 class="h1_txt">Connecting to the Server..</h1>
</center>
</div>
</body>
</html>
I had same problem. It was working if i open html directly but not from nodejs. I couldn't find easy way but i found alternative solution.
Try full path or
http links (after uploded images to the web)
Remove " from
body{
background-image: url('1st.jpg');"
}
obsolete way
<body background="./1st.jpg">
try on the CSS
body{
background-image: url('./1st.jpg');"
}
Verify url direction of image
// Folder Up
"../image.jpg"
// same folder of CSS in this case
"image.jpg"
// Root direction
"/image.jpg"
Related
I have this HTML and CSS code here:
.container1{
text-align: center;
margin-top: 200px;
font-size: 30px;
padding: 30px;
transform: perspective(1px) translateY(-50%);
}
.textbox{
width: 300px;
height: 50px;
font-size: 20px;
text-align: center;
}
.textbox{
border-color: dodgerblue;
box-shadow: 0 0 8px 0 blue;
}
body {
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
window.onload=function(){
function GetDays(){
var dropdt = new
Date(document.getElementById("drop_date").value).getTime();
var pickdt = new
Date(document.getElementById("pick_date").value).getTime();
return parseInt((dropdt- pickdt) / (24 * 3600 * 1000));
}
document.getElementById("drop_date").addEventListener("change",function(){
if(document.getElementById("drop_date").value){
document.getElementById("numdays2").value=GetDays();
}
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0,10);
}
</script>
</head>
<body>
<div id="reserve_form" class="container1">
<div id="pickup_date"><p><label class="form">Todays Date:</label><input
type="date" class="textbox" id="pick_date" name="pickup_date" disabled
onchange="cal()"</p></div>
<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input
type="date" class="textbox" id="drop_date" name="dropoff_date" /></p></div>
<div id="numdays"><label class="form">Number of days:</label><input
type="text" class="textbox" id="numdays2" name="numdays"/></div>
</div>
</body>
</html>
How would I give a bit of space between the text and the text box. I still need it centered, but need some space for the shadow to look nice.
Also, how can I align the text above each text-box instead of being on the left?
I have started HTML and CSS coding very recently, all of this is new to me, but very interesting!
Thank you
Also, how can I align the text above each text-box instead of being on the left?
Make the wrappers of each section inside container1 a column flexbox and add align-items: center to align it horizontally. Also add a margin to the textbox - see demo below:
window.onload = function() {
function GetDays() {
var dropdt = new
Date(document.getElementById("drop_date").value).getTime();
var pickdt = new
Date(document.getElementById("pick_date").value).getTime();
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
document.getElementById("drop_date").addEventListener("change", function() {
if (document.getElementById("drop_date").value) {
document.getElementById("numdays2").value = GetDays();
}
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0, 10);
}
.container1 {
text-align: center;
margin-top: 200px;
font-size: 30px;
padding: 30px;
transform: perspective(1px) translateY(-50%);
}
.textbox {
width: 300px;
height: 50px;
font-size: 20px;
text-align: center;
border-color: dodgerblue;
box-shadow: 0 0 8px 0 blue;
margin: 10px; /*added */
}
#pickup_date p, #dropoff_date p, #numdays { /* added */
display: flex;
flex-direction: column;
align-items: center;
}
body {
background-color: #fff;
}
<div id="reserve_form" class="container1">
<div id="pickup_date">
<p><label class="form">Todays Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" disabled onchange="cal()"/> </p></div>
<div id="dropoff_date">
<p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" /></p>
</div>
<div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays" /></div>
</div>
Here is the updated fiddle:
window.onload = function() {
function GetDays() {
var dropdt = new
Date(document.getElementById("drop_date").value).getTime();
var pickdt = new
Date(document.getElementById("pick_date").value).getTime();
return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}
document.getElementById("drop_date").addEventListener("change", function() {
if (document.getElementById("drop_date").value) {
document.getElementById("numdays2").value = GetDays();
}
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0, 10);
}
.container1 {
text-align: center;
margin-top: 200px;
font-size: 30px;
padding: 30px;
transform: perspective(1px) translateY(-50%);
}
.textbox {
width: 300px;
height: 50px;
font-size: 20px;
text-align: center;
}
.textbox {
border-color: dodgerblue;
box-shadow: 0 0 8px 0 blue;
}
.form {
padding-bottom: 10px;
display: block;
}
body {
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="reserve_form" class="container1">
<div id="pickup_date">
<p>
<label class="form">Todays Date:</label>
<input type="date" class="textbox" id="pick_date" name="pickup_date" disabled onchange="cal()">
</p>
</div>
<div id="dropoff_date">
<p>
<label class="form">Dropoff Date:</label>
<input type="date" class="textbox" id="drop_date" name="dropoff_date" />
</p>
</div>
<div id="numdays">
<label class="form">Number of days:</label>
<input type="text" class="textbox" id="numdays2" name="numdays" />
</div>
</div>
</body>
</html>
I have multiple custom elements in my projects and I have a problem with css variables. In my parent element I have multiple item element with status classes. I want to manipulate the background and border color using that status classes, but I want to define the values in my parent element but somehow it not want to work.
Here my parent element:
<link rel="import" href="app-task.html" />
<dom-module id="app-task-grid">
<template>
<style>
:host {
display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
overflow:hidden; background: #eee;
--column-1-width: 80px;
--column-3-width: 120px;
--column-4-width: 180px;
--column-5-width: 220px;
--column-6-width: 100px;
--task-background-color: #eee;
--task-border-color: #ccc;
}
:host table.header {
position: absolute; top: 0; left: 0; width: 100%; height: 40px; background: #DDD;
}
:host table.header th {
letter-spacing: 2px; font-weight: normal; text-transform: uppercase;
font-size: 80%; border-left: 1px solid #aaa;
margin: 0; padding: 0 10px;
}
:host th.column1 {
width: var(--column-1-width);
}
:host th.column2 {
text-align: left;
}
:host th.column3 {
width: var(--column-3-width);
}
:host th.column4 {
width: var(--column-4-width);
}
:host th.column5 {
width: var(--column-5-width);
}
:host th.column6 {
width: var(--column-6-width);
text-align: left;
}
:host th.hide, :host td.hide {
display: none;
}
:host th.show, :host td.show {
display: table-cell;
}
:host table.header .scrollbar {
width: 20px; border-left: none;
padding: 0;
}
:host .items {
position: absolute; left: 0; top: 40px; right: 0; bottom: 0;
overflow:hidden; overflow-y: scroll;
margin: 0; padding: 0;
}
:host .items::-webkit-scrollbar {
width:22px; border-left: 6px solid #ddd;
background-color:#ddd;
}
:host .items::-webkit-scrollbar-thumb {
background-color:#aaa;
border-left: 6px solid #ddd;
min-height: 80px;
}
.waiting {
--task-background-color: #e9d32c;
--task-border-color: #b0a030;
}
.assigned {
--task-background-color: #1b7eee;
--task-border-color: #1357a4;
}
.started {
--task-background-color: #EF6207;
--task-border-color: #c05d1d;
}
.working {
--task-background-color: #e99c2c;
--task-border-color: #c48222;
}
.aborted {
--task-background-color: #E34126;
--task-border-color: #b72d15;
}
</style>
<table class="header">
<tr>
<th class="column1"></th>
<th class="column2">Column#2</th>
<th class="column3">Column#3</th>
<th class="column4">Column#4</th>
<th class="column5">Column#5</th>
<th class="column6">Column#6</th>
<th class="scrollbar"></th>
</tr>
</table>
<div class="items">
<app-task id="task0" class="waiting"></app-task>
</div>
</template>
<script>
Polymer({
is:"app-task-grid",
loadItems: function()
{
let statuses = ['waiting','assigned','started','working','aborted'];
for(var i = 1; i<=30; i++)
{
let itemStatus = statuses[Math.floor(Math.random()*statuses.length)];
let itemElement = document.createElement('APP-TASK');
itemElement.id = 'task'+i;
itemElement.classList.add(itemStatus);
console.debug( itemElement );
this.querySelector('.items').appendChild( itemElement );
}
}
});
</script>
</dom-module>
My children element:
<dom-module id="app-task">
<template>
<style>
:host {
display: block; margin: 8px 0; padding: 0;
}
:host table {
width: 100%; height: 80px;
background-color: var(--task-background-color, #fff);
border-bottom: 5px solid var(--task-background-color, #fff);
border-top: 5px solid var(--task-background-color, #fff);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07),
0 1px 5px 0 rgba(0, 0, 0, 0.06),
0 3px 1px -2px rgba(0, 0, 0, 0.1);
}
:host table td {
border-left: 1px solid var(--task-border-color, #ccc);
margin: 0; padding: 0 10px;
}
:host td.column1 {
width: var(--column-1-width);
}
:host td.column2 {
}
:host td.column3 {
width: var(--column-3-width);
}
:host td.column4 {
width: var(--column-4-width);
}
:host td.column5 {
width: var(--column-5-width);
}
:host td.column6 {
width: var(--column-6-width);
}
</style>
<table>
<tr>
<td class="column1">C#1</td>
<td class="column2">C#2</td>
<td class="column3">C#3</td>
<td class="column4">C#4</td>
<td class="column5">C#5</td>
<td class="column6">C#6</td>
</tr>
</table>
</template>
<script>
Polymer({
is:"app-task"
});
</script>
</dom-module>
I tried already:
:host .waiting { ... }
:host app-task.waiting { ... }
app-task.waiting { ... }
:root .waiting { ... }
:root app-task.waiting { ... }
:root { .waiting { ... } }
:root { app-task.waiting { ... } }
parent element for the app-task for the classes
style is="custom-style" inside the app-grid template
style is="custom-style" outside the template but inside the app-grid element html file
but none of them seems working.
If I define the css variables in the :host then it's working, only not working with classes somehow. Where did made a mistake?
UPDATE#1:
Something weird hapening with the style-scope, if I add the "style-scope app-task-grid" to the parent element for the tasks:
<div class="items">
<div class="style-scope app-task-grid waiting">
<app-task id="task1"></app-task>
</div>
</div>
then if I add a normal css rule like a color its applied in the app-task, but the css variables are not.
UPDATE#2:
As it was mention that this template is working, and I tested it and it is, !But id did not mention that the items are created on the fly and appended to the items. I added almost everything from my code on Plunker: http://plnkr.co/edit/b5XW1w3sEOy4UHc0rdWH?p=preview
Sorry about my mislead, I did not know that the problem source was the dynamic load.
Note: I updated the question with more example.
UPDATE#3:
Thanks to #a1626s and #GünterZöchbauer we found the answer:
My initial code was good and worked from the beginning, I defined the questions badly becasue I did not see what was the problem. So if somebody dynamically load elements inside an element must use Polymer.dom api.
Polymer.dom(this.querySelector('.items')).appendCild(itemElement);
I don't see any problem in your initial code. I copied your code and pasted it in plunker
<style>
:host {
display: block;
}
.waiting {
--task-background-color: #e9d32c;
--task-border-color: #b0a030;
}
.assigned {
--task-background-color: #1b7eee;
--task-border-color: #1357a4;
}
.started {
--task-background-color: #EF6207;
--task-border-color: #c05d1d;
}
.working {
--task-background-color: #e99c2c;
--task-border-color: #c48222;
}
.aborted {
--task-background-color: #E34126;
--task-border-color: #b72d15;
}
</style>
<div class="items">
<app-task id="task1" class="waiting"></app-task>
<app-task id="task2" class="waiting"></app-task>
<app-task id="task3" class="working"></app-task>
<app-task id="task4" class="working"></app-task>
<app-task id="task5" class="assigned"></app-task>
<app-task id="task6" class="aborted"></app-task>
</div>
and it seemed to be working fine for me.
As for your new problem replace your javascript method with this method and it should work.
{
let statuses = ['waiting','assigned','started','working','aborted'];
for(var i = 1; i<=30; i++)
{
let itemStatus = statuses[Math.floor(Math.random()*statuses.length)];
let itemElement = document.createElement('APP-TASK');
itemElement.id = 'task'+i;
itemElement.classList.add(itemStatus);
console.debug( itemElement );
Polymer.dom(this.$.items).appendChild(itemElement);
}
Polymer.dom.flush();
}
Also, here is the change that i made in your app-task-grid element
<div class="items" id="items"> //added id attribute to the div tag
The problem being the way you are adding child elements they do not get properly inserted into dom tree of the element. Polymer has documentation on how to work with tree of its elements. You can read more about it here
Remember that the <style> where the CSS variables are set must have is="custom-style" in the tag.
I've thrown together a very crude snippet to show it.
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="app-task">
<template>
<style>
:host {
display: block;
height: 80px;
margin: 5px;
background-color: var(--task-background-color, #fff);
border: 1px solid var(--task-border-color, #ccc);
}
</style>
<div>some stuff...</div>
</template>
<script>
Polymer({
is: 'app-task'
});
</script>
</dom-module>
<!-- Beginning of the 'parent element' -->
<style is="custom-style">
.waiting {
--task-background-color: #e9d32c;
--task-border-color: #b0a030;
}
.assigned {
--task-background-color: #1b7eee;
--task-border-color: #1357a4;
}
.started {
--task-background-color: #EF6207;
--task-border-color: #c05d1d;
}
.working {
--task-background-color: #e99c2c;
--task-border-color: #c48222;
}
.aborted {
--task-background-color: #E34126;
--task-border-color: #b72d15;
}
</style>
<div class="items">
<app-task id="task1" class="waiting"></app-task>
<app-task id="task2" class="waiting"></app-task>
<app-task id="task3" class="working"></app-task>
<app-task id="task4" class="working"></app-task>
<app-task id="task5" class="assigned"></app-task>
<app-task id="task6" class="aborted"></app-task>
</div>
Another example with it running through several elements
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="app-task">
<template>
<style>
:host {
display: block;
height: 80px;
margin: 5px;
background-color: var(--task-background-color, #fff);
border: 1px solid var(--task-border-color, #ccc);
}
</style>
<div>some stuff...</div>
</template>
<script>
Polymer({
is: 'app-task'
});
</script>
</dom-module>
<!-- Beginning of the 'parent element' -->
<dom-module id="app-task-grid">
<template>
<!-- normal styles -->
<style>
app-task {
width: 50%;
margin: 10px auto;
}
</style>
<!-- custom styles -->
<style is="custom-style">
.waiting {
--task-background-color: #e9d32c;
--task-border-color: #b0a030;
}
.assigned {
--task-background-color: #1b7eee;
--task-border-color: #1357a4;
}
.started {
--task-background-color: #EF6207;
--task-border-color: #c05d1d;
}
.working {
--task-background-color: #e99c2c;
--task-border-color: #c48222;
}
.aborted {
--task-background-color: #E34126;
--task-border-color: #b72d15;
}
</style>
<div class="items">
<app-task id="task1" class="waiting"></app-task>
<app-task id="task2" class="waiting"></app-task>
<app-task id="task3" class="working"></app-task>
<app-task id="task4" class="working"></app-task>
<app-task id="task5" class="assigned"></app-task>
<app-task id="task6" class="aborted"></app-task>
</div>
</template>
<script>
Polymer({
is: 'app-task-grid'
});
</script>
</dom-module>
<!-- And now pushing it to the screen -->
<app-task-grid></app-task-grid>
I have this sample:
link
CODE HTML:
<div class="border">
<div id="i-choose">
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Browse</label>
</div>
</div>
CODE CSS:
#i-choose {
float: left;
font-size: 17pt;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}
#i-choose label {
line-height: 0px;
font-size: 17pt;
margin-top: 12px;
height: auto;
color: #0096BD;
margin-left: 5px;
cursor: pointer;}
.border{
border:1px dashed grey;
overflow:hidden;
}
Basically what I want to do is shoot an image in the div and to be drop.
I put a picture more clearly understand.
How can I solve this problem? Does anyone have any idea?
Thanks in advance!
Please take a look at the sample JS code below:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
$("#file").change(function () {
readURL(this);
});
CSS:
#div1 {
border: 1px solid #aaaaaa;
padding: 10px;
min-height:70px;
width: 350px;
}
#i-choose {
float: left;
font-size: 17pt;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
#i-choose label {
line-height: 0px;
font-size: 17pt;
margin-top: 12px;
height: auto;
color: #0096BD;
margin-left: 5px;
cursor: pointer;
}
.border {
border:1px dashed grey;
overflow:hidden;
}
and the associated HTML :
<form id="form1" runat="server">
<div class="border">
<div id="i-choose">
<input type='file' id="file" name="file" class="inputfile" />
<label for="file">Browse</label>
<img id="blah" src="#" alt="" draggable="true" ondragstart="drag(event)" />
</div>
</div>
JsFiddle
here i am pasting html & css and when UI comes then extra space was coming. just could not understand why it is coming and how to make it look proper.
HTML
<div style="display: block; z-index: 1001; outline: 0px none; height: 400px; width: 400px; top: 77px; left: 428px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all noTitleStuff ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog2"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-dialog2"> </span><span class="ui-icon ui-icon-closethick">close</span></div><div id="dialog2" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: auto;">
<div id="Container">
<div id="acloginpod">
<div id="caption"> Enter Login Information </div>
<div class="acloginform">
<fieldset>
<span id="ctl00_mstPartBase_rptlogin_ctl00_Label1">Email Address:</span>
<input type="text" name="ctl00$mstPartBase$rptlogin$ctl00$txtEmail" id="ctl00_mstPartBase_rptlogin_ctl00_txtEmail" tabindex="1" class="textinput">
<span id="ctl00_mstPartBase_rptlogin_ctl00_Label2">Password:</span>
<input type="password" name="ctl00$mstPartBase$rptlogin$ctl00$txtPassword" id="ctl00_mstPartBase_rptlogin_ctl00_txtPassword" tabindex="2" class="textinput">
<div class="aclogin-action">
<div class="fl-left">
<div class="item">
<label>
<input type="checkbox" id="ctl00_mstPartBase_rptlogin_ctl00_chkRemember" name="ctl00$mstPartBase$rptlogin$ctl00$chkRemember" tabindex="3">
Remember me
</label>
</div>
<a id="ctl00_mstPartBase_rptlogin_ctl00_LinkButton1" tabindex="5" class="forgotpass" href="javascript:__doPostBack('ctl00$mstPartBase$rptlogin$ctl00$LinkButton1','')">Forgot password?</a>
</div>
<div id="btn" style="float:right;">
<input type="submit" name="ctl00$mstPartBase$rptlogin$ctl00$btnLogin" value="Login" id="ctl00_mstPartBase_rptlogin_ctl00_btnLogin" class="btnlogin" de="" style="margin-left: 83px">
<input type="submit" name="ctl00$mstPartBase$rptlogin$ctl00$btnRegister" value="Register" id="ctl00_mstPartBase_rptlogin_ctl00_btnRegister" class="btnlogin">
</div>
<div class="clearfix">
</div>
<br>
</div>
</fieldset>
</div>
</div>
</div>
</div></div>
CSS
#acloginpod {
background: url("../Images/acloginpodbg.gif") repeat-x scroll 0 0 #ebebeb;
border: 1px solid #d3d3d3;
}
#acloginpod label {
color: #444;
display: block;
font-size: 15px;
margin-bottom: 3px;
}
#caption {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 3px;
color: White;
font-family: arial;
font-size: 14px;
font-weight: bold;
padding: 10px;
text-align: center;
text-shadow: 0 2px 1px #000;
}
.btnlogin {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 6px;
box-shadow: 0 0 2px #333;
color: #ffffff;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: bold;
height: 33px;
padding: 3px 10px;
text-decoration: none;
text-shadow: 0 2px 1px #000;
}
.btnlogin:hover {
background: url("../Images/button-background-2.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 3px #046629 inset;
text-shadow: 0 2px 3px #333;
}
.btnlogin:active {
position: relative;
top: 1px;
}
#acloginpod input.textinput {
background: url("../Images/textinputbg.gif") repeat-x scroll 0 0 #ffffff;
border: 1px solid #d3d3d3;
color: #000000;
font-size: 15px;
margin-bottom: 10px;
padding: 7px 0;
text-indent: 7px;
width: 100%;
}
#acloginpod .acloginform {
margin: 22px;
}
#acloginpod form, #acloginpod fieldset {
border-width: 0;
margin: 0 !important;
padding: 0 !important;
}
also here i am pasting screen shot.
extra space is coming between two div called dialog2 & container so just guide me which css i need to modify as a result extra space will not come in left,right,top & bottom side. thanks
here is the js fiddle demo of my code http://jsfiddle.net/tridip/jj2cM/
here is my full code which is working
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />
<style type="text/css">
.noTitleStuff .ui-dialog-titlebar {display:none}
.offscreen {position: absolute; left: -999em;}
.BusyStyles
{
background-image: url('../Images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 300px;
}
.ui-dialog .ui-dialog-content{
padding:0 !important;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#opener2").click(function () {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$("<div id='dialog2'/>").dialog(
{
autoOpen: false,
width: 50,
height: 50,
dialogClass: 'noTitleStuff',
draggable: true,
resizable: false,
open: function (event, ui) {
$(this).dialog("widget").addClass('BusyStyles');
$(this).parent().appendTo("form");
}
}).dialog('open').show()
.load('login.aspx', function (responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
//alert('data found');
// sHtml = responseTxt;
// var element = $(this).find('#Container'); ;
// //$(element).addClass('offscreen').show();
// var width = element.width();
// var height = element.height();
// //alert('h ' + height + ' w ' + width);
// sHtml = $(sHtml).find('#Container').html();
// $sHtml = $(sHtml)
// $sHtml.css({ 'display': 'none' }).appendTo('div#dialog2');
$(this).dialog("widget").removeClass('BusyStyles');
$("#dialog2").dialog("widget").animate({
width: '346px',
height: 'auto'
}, {
duration: 200,
step: function () {
$("#dialog2").dialog('option', 'position', 'center');
}
});
$("#dialog2").css({ height: 'auto', width: 'auto' });
//$("#dialog2").html(sHtml);
}
if (statusTxt == "error") {
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
//$("#dialog2").dialog('open').show();
}
else {
$("#dialog2").dialog("close").dialog('destroy').remove();
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<button id="opener2">open the dialog2</button>
</form>
</body>
</html>
I think you have to set padding:0 to this class:
.ui-dialog .ui-dialog-content{
padding:0 !important;
}
fiddle
I'm trying to make this login page show/format correctly on every browser so far it only shows how I want it to work on IE9 on other browsers firefox/chrome the form section is on the left side and not in the middle. (The Username, Password, Pub key, and the log in button all have to be in the middle of the page and not move when the browser is re-sized.)
Can someone look at it and see what I'm doing wrong ?
Thanks for any help...
Here is the HTML CODE:
<script type="text/javascript">
// Return true if unable to open a new window
function popup_blocked() {
var popup = window.open('','_blank','toolbar=no,scrollbars=no','width=0,height=0');
if (!popup) {
return true;
} else {
popup.close();
return false;
}
}
if(popup_blocked()) {
alert('This page requires that you enabled popups in order to process and display content properly.');
} else {
//alert('POPUPS ARE ALLOWED! THANK YOU!');
}
</script>
<html><head><title>Login Page</title>
<style type="text/css">
.auto-style2 {
margin-right: 261px;
}
</style>
<style type="text/css">
.style1 {
vertical-align: top;
}
.auto-style4 {
text-align: center;
}
</style>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-family: Georgia, serif; background: url(login-page-bg.jpg) top center no-repeat #c4c4c4; color: #3a3a3a; }
.clear { clear: both; }
form { width: 406px; margin: 170px auto 0; }
legend { display: none; }
fieldset { border: 0; }
label { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; }
input { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px;
color: #3a3a3a; font-family: Georgia, serif;}
input[type=checkbox]{ width: 20px; margin: 0; display: inline-block; }
.button { background: url(button-bg.png) repeat-x top center; border: 1px solid #999;
-moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold;
-webkit-border-radius: 5px; font-size: 13px; width: 70px; }
.button:hover { background: white; color: black; }
.auto-style5 {
text-decoration: none;
}
.auto-style6 {
color: #3A3A3A;
}
.auto-style7 {
font-size: x-small;
}
</style>
<BODY onload="resetSession();setFocus(document.frmLogin.login);" style="margin-top: 150">
<table width=100%>
<form action="login_page.asp" method="post" name="frmLogin" class="auto-style2" style="width: 100%">
<div class="auto-style4" style="position: absolute; width: 100%; height: 174px; z-index: 1; left: 308px; top: 169px">
<input type="hidden" name="action" value="validate_login">
<table border="0" align="center">
<tr>
<td align="right">Username </td>
<td>
<input type="text" name="login" style="height: 34px">
</td>
</tr>
<tr>
<td align="right">Password </td>
<td><input name="password" style="height: 34px" type="password">
</td>
</tr>
<tr>
<td align="right">Pub Key </td>
<td><input name="pasword" style="height: 34px" type="password">
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<!--<input type="submit" VALUE="Login">-->
<input type="submit" style="margin: 0px 0 0 149px;" class="button" name="commit" value="Log in">
</td>
</tr>
</table>
</div>
</form></table>
<p class="auto-style4"><br><br>All Login Attempts are Logged.<br>
<br>
<span class="auto-style7">(11/16/2012 16:12)</span></p>
</body></html>
Your HTML is invalid (which is asking for trouble) and you have no Doctype so browsers will enter Quirks mode (which is inconsistent between browsers and intentionally buggy for compatibility with sites that were written when buggy browsers were the norm).
Add a Doctype
Perform automated QA
Also, avoid layout tables and use CSS for form layout.