I am making an application with jquery mobile. In my login screen I have a submit button. On this button I want to apply this CSS class.
input.submit {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 8px 20px;
background: -moz-linear-gradient(
top,
#007ca5 0%,
#8080f5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#007ca5),
to(#8080f5));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ffffff;
-moz-box-shadow:
0px 1px 6px rgba(0,0,0,0.9),
inset 0px 0px 5px rgba(161,142,016,0.6);
-webkit-box-shadow:
0px 1px 6px rgba(0,0,0,0.9),
inset 0px 0px 5px rgba(161,142,016,0.6);
text-shadow:
0px -1px 3px rgba(255,255,255,0),
0px 1px 0px rgba(255,255,255,0);
}
And used this class like this in my HTML
<INPUT name=submit value=Inloggen type=submit class="submit">
Now I think the problem is that my CSS is not specific enough. Because when I am going to look at my code with Firebug I get this div
<div class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-g" data-theme="g" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Inloggen</span>
</span>
<input class="submit ui-btn-hidden" type="submit" value="Inloggen" name="submit" aria-disabled="false">
</div>
So can anybody help me, I am not that good in making my CSS more specific.
Check that you embedded your custom style sheet after jquery mobiel css file ex:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="Style/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="Script/jquery.mobile-1.0.1.js" type="text/javascript"></script>
<style type="text/css">
input.submit
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 8px 20px;
background: -moz-linear-gradient(
top,
#007ca5 0%,
#8080f5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#007ca5),
to(#8080f5));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ffffff;
-moz-box-shadow: 0px 1px 6px rgba(0,0,0,0.9), inset 0px 0px 5px rgba(161,142,016,0.6);
-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,0.9), inset 0px 0px 5px rgba(161,142,016,0.6);
text-shadow: 0px -1px 3px rgba(255,255,255,0), 0px 1px 0px rgba(255,255,255,0);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<div data-role="page">
<div data-role="content">
<input name="submit" value="Inloggen" type="submit" class="submit">
</div>
</div>
</form>
</body>
</html>
Related
Please take a look to my code I am getting double transparent which looks very awkward behind my
signup form and also I want both forms on the extreme right
thank you here is my code. I hope my question has been understood.
I will be glad if anyone can help me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>login Page</title>
<!-- Stylesheet -->
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="font-welcome">
<h1> Welcome to Site.</h1>
<p>Connect with the MarketPlace and other fascinating people.
</p>
<div class="loginform cf">
<form class="form signin" method="post">
<div class="field"><label for="email">Email</label></div>
<input type="email" required="" placeholder="yourname#email.com" name="usermail">
<div class="field"><label for="password">Password</label></div>
<input type="password" required="" placeholder="Password" name="password">
<button class="loginbtn" type="submit">
Log in
</button>
<div class="remember-forgot">
<label class="t1-label remember">
<input type="checkbox" checked="checked" name="remember_me" value="1">
<span>Remember me</span>
</label>
<span class="separator">·</span>
Forgot password?
</div>
</form>
</div>
<div class="signup cf">
<form class="signup" method="post">
<div class="field"><label for="email">Email</label></div>
<input type="email" required="" placeholder="name#email.com" name="email">
<div class="field"><label for="password">Password</label></div>
<input type="password" required="" placeholder="Password" name="password">
<select class="selector" required>
<option value="">Please select</option>
<option value="Individual">Individual</option>
<option value="Business">Business</option>
</select>
<button class="loginbtn" type="submit">
sign up
</button>
</div>
</form>
</body>
</html>
here is my css stylesheet.
#import url("http://fonts.googleapis.com/css?family=Oswald:400,700");
html {
background: rgba(0, 0, 0, 0) url("../images/bg.jpg") repeat scroll center top / 100% auto;
font-size: 10pt;
}
h1 {
color: white;
font-family: "Oswald",sans-serif;
font-size: 30px;
padding: 20px;
text-align: left;
}
label {
color: #999999;
display: block;
font-family: "Oswald",sans-serif;
font-size: 25px;
}
.loginform {
background-color: rgba(250, 250, 250, 0.5);
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
margin: 50px auto;
padding: 25px;
width: 410px;
}
h2 {
color: #066a75;
font-family: "Oswald",sans-serif;
font-size: 30px;
text-align: center;
}
.signup { background-color: rgba(250, 250, 250, 0.5);
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
margin-left: 230px;
width: 410px;
}
p {
color: white;
font-family: "Oswald",sans-serif;
font-size: 30px;
padding: 20px;
text-align: left;
}
.loginbtn {
color: black;
display: block;
font-family: "Oswald",sans-serif;
margin: 5px;
text-decoration: none;
}
HEre is your complete css and html. I have modified according to you.
JsFiddle Fiddle
#import url("http://fonts.googleapis.com/css?family=Oswald:400,700");
html {
background: rgba(0, 0, 0, 0) url("../images/bg.jpg") repeat scroll center top / 100% auto;
font-size: 10pt;
}
h1 {
color: black;
font-family: "Oswald",sans-serif;
font-size: 30px;
padding: 20px;
text-align: left;
}
label {
color: #999999;
display: block;
font-family: "Oswald",sans-serif;
font-size: 25px;
}
.loginform {
background-color: rgba(250, 250, 250, 0.5);
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
margin: 50px auto;
padding: 25px;
width: 410px;
float: right;
clear: right;
}
h2 {
color: #066a75;
font-family: "Oswald",sans-serif;
font-size: 30px;
text-align: center;
}
.signup { background-color: rgba(250, 250, 250, 0.5);
border-radius: 5px;
/* border: 1px solid rgba(0, 0, 0, 0.3); */
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
/* margin-left: 230px; */
width: 410px;
float: right;
clear: right;
padding: 25px;
}
p {
color: black;
font-family: "Oswald",sans-serif;
font-size: 30px;
padding: 20px;
text-align: left;
}
.loginbtn {
color: black;
display: block;
font-family: "Oswald",sans-serif;
margin: 5px;
text-decoration: none;
}
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>login Page</title>
<!-- Stylesheet -->
<link href="style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="font-welcome">
<h1> Welcome to Site.</h1>
<p>Connect with the MarketPlace and other fascinating people.
</p>
<div class="loginform cf">
<form class="form signin" method="post">
<div class="field"><label for="email">Email</label></div>
<input type="email" required="" placeholder="yourname#email.com" name="usermail">
<div class="field"><label for="password">Password</label></div>
<input type="password" required="" placeholder="Password" name="password">
<button class="loginbtn" type="submit">
Log in
</button>
<div class="remember-forgot">
<label class="t1-label remember">
<input type="checkbox" checked="checked" name="remember_me" value="1">
<span>Remember me</span>
</label>
<span class="separator">�</span>
Forgot password?
</div>
</form>
</div>
<div class="signup cf">
<form class="" method="post">
<div class="field"><label for="email">Email</label></div>
<input type="email" required="" placeholder="name#email.com" name="email">
<div class="field"><label for="password">Password</label></div>
<input type="password" required="" placeholder="Password" name="password">
<select class="selector" required="">
<option value="">Please select</option>
<option value="Individual">Individual</option>
<option value="Business">Business</option>
</select>
<button class="loginbtn" type="submit">
sign up
</button>
</form></div>
</div></body></html>
I'm developing my first web application using Google App Engine. Now, while the core backend program is working and ready, I'm having some trouble working with the UI of the website. Now, the width of my website is extending beyond the given screen, which I do not want.
You can see the live version of the site here:
http://deploymentapp.appspot.com/
Now, the site is still under development, please pardon my terrible try at web designing for now.
As can be seen from the site, the width of the whole site is extending beyond the screen width.
Here's the HTML code:
<html>
<head>
<title>Live Quora Feed</title>
<style type = "text/css">
*
{
margin:0px;
padding:0px;
}
body
{
width:100%;
background-image: url("http://www.bluelinerny.com/wp-content/uploads/2011/03/quora_illustration_1.jpg");
background-position: top center;
background-repeat:no-repeat;
}
input.button {
width:40px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#fff;
color:#09C;
}
orm has no structure, no color, and no personality. We can change that with a little bit of code. First, we are going to style the form tag itself.
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0.1, 0.3);
}
#form
{
position:relative;
left:730px;
top:300px;
}
</style>
</head>
<body bgcolor = "black">
<div id = "form">
<form method = "post">
<div>
<label>
<span>Enter your query</span><input id="name" type="text" name="rssquery" />
</label>
<input type="submit" value="Submit Form" />
</div>
<div class="text">
<p>This is some demonstration text</p>
<p>This is some more wonderful text</p>
</div>
</div>
</form>
</body>
</html>
Also, I have copied most of the CSS from another source.
How can resolve this problem?
Your problem lies in #form.
Your left won't always be the right amount.
You need to use % instead of px.
This is called responsive web design.
If you want it non-obstructing the quora logo, I seem to have fixed it by changing left to 50%
You need to turn your css to be responsive.
Instead of using px in #form, just use % like this:
#form {
margin-top:300px;
margin-left:55%;
}
There is a nicer way to have the same result. It's to float the form to the right and set a margin-right.
#form {
float:right;
margin-right:15%
margin-top:300px;
}
Behind responsive there is much more then this, if you want to read more start from this link: http://learn.shayhowe.com/advanced-html-css/responsive-web-design
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TheGelu - Coming Soon</title>
<style type="text/css">
body {
background: #474747 url(http://line25.com/wp-content/uploads/2009/letterpress/demo/bg.png);
}
p.margin {
margin-left:300px;
}
p.box {
margin-left:300px;
}
h1 {
font: 60px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
boxy {
border: 0px solid #db9b20;
text-align: center;
background-color: #f0f0f0;
padding: 0px 0px 0px 0px;
margin: 4px 0px 4px 0px;
moz-box-shadow: 5px 5px 5px #000;
-moz-border-shadow: 0pc;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
-webkit-box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
box-shadow:0px 0px 0px 3px rgba(240, 240, 240, 1);
}
</style>
</head>
<body><h1><center>TheGelu *-*</center></h1>
<p class="margin"><img src="RoundRound.png" alt="" width="136" height="137" /><img src="arrowSignal.png" alt="" width="318" height="126" /></p><div style="width:400px;height:300px;float:right;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background-color:#FFFFFF;-webkit-box-shadow: #000000 2px 2px 2px;-moz-box-shadow: #000000 2px 2px 2px; box-shadow: #000000 2px 2px 2px;">Pretty Text Here!</div>
</body>
</body>
</html>
And I want the box to be exactly next to the arrow (on the right). How can I do that? I've tried float but I don't know how to put it up.
Live version at http://thegelu.bl.ee/test.html
Is this what you want?
1. p.margin, add float:left;
2. text box div, also add float:left;
Done.
Edit:you mean like this?
Because your arrow uses an image and that image has a transparent background that is wider than the image itself.
Solutions:
1. modify your image and remove the blank space
2. no need to modify image, just add margin-left:-90px; to your text box div
You can move the div in your p.margin and specify on it style="display: inline-block".
border-radius is not working on IE-8 . Need help.
I am using the following code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Border</title>
<style type="text/css">
.mc-button {
positon:relative;
behavior: url(/PIE-1.0.0/PIE.htc);
-webkit-box-shadow: #999 0 0 12px;
border: 1px solid #696;padding: 60px 0;text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
}
</style>
</head>
<body>
<input class="mc-button" type="button" value="submit"/>
</body>
</html>
That code i am using for a button. But I am not finding any way to solve. I checked previous questions and as well as answers ,but those solutions are not working.
border-radius is not supported by IE8.
To check browser compabitility the http://caniuse.com site is a great resource.
I am currently developing a back end interface for a client of mine and i've hit a brick wall. It seems that Internet Explorer (all versions, including 9 beta) and Chrome are not displaying the page as desired. Firefox and Safari are displaying the page perfectly. I find it rather strange that it works on safari but not chrome.. anyway that's besides the point.
How the form looks in Safari and Firefox - it is the desired outcome:
How the form looks in all browsers other than Safari and Firefox - this is not desired:
I'm after a way to make the background expand to the width that is set in the css in these other browsers. Any hints and tips would be much appreciated as I've been stuck on this for about 5 hours today and it's starting to get very frustrating for me.
After some help, i've narrowed the problem down to the jQuery plugin "equal height columns" however I require the effect is has, so surely there is a way to make this work in the other browsers.
My HTML is:
<head>
<meta charset="UTF-8">
<title>User Login</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" />
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/jquery.equalHeightColumns.js" type="text/javascript"></script>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<script type="text/javascript">
$(document).ready(function() {
$("#form_left, #form_right, #form_right input").equalHeightColumns();
});
</script>
</head>
<body>
Forgot Password?
<div id="container">
<div id="header">
<h1>User Login</h1>
</div>
<div id="form">
<form name="login" action="#" method="post">
<div id="form_left">
<label for="">Username</label>
<input type="text" id="username" />
<label for="">Password</label>
<input type="password" id="password" />
</div>
<div id="form_right">
<input type="submit" name="submit" value="Log In" />
</div>
<div class="clear"></div>
</form>
</div>
</div>
</body>
and the CSS:
//*
TYPE
*/
a.loginmeta { position: absolute;
right: 20px; top: 20px;
color: #4a4f5b;
font-size: 12px; }
a.loginmeta:hover { color: #5d6472; }
/*
STRUCTURE
*/
body { background: url('../images/page_background.png') repeat; }
#container { width: 480px; display: block;
margin: 100px auto 0 auto; }
/*
FORM
*/
form { width: 480px; margin: 30px 0 15px 0; }
form label { color: #919191;
text-transform: uppercase;
display: block;
margin-bottom: 10px; }
form input { background: #ffffff;
border: 1px solid #d1d1d1;
font-size: 17px;
color: #414141;
padding: 10px; margin-bottom: 10px;
width: 328px; }
#form_left, #form_right { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
#form_left { float: left;
width: 350px;
background: url('../images/form_background.png') repeat-x bottom left #f3f3f3;
padding: 20px 20px 10px 20px; }
#form_right { float: right;
background: url('../images/form_background.png') repeat-x bottom left #f3f3f3; padding-bottom: 30px; }
#form_right input { width: 80px;
font-size: 12px;
text-transform: uppercase;
color: #939393;
background: none;
border: none;
margin: 15px 0;
padding: 0; }
***
Thank you!
I don't know if this helps, but since your problem seems to be coming from the plugin, maybe you could try this instead :
var columnMaxHeight = 0;
$("COLUMN_SELECTOR").each(function() {
var columnHeight = $(this).height();
if (columnMaxHeight < columnHeight) {
columnMaxHeight = columnHeight;
$(this).height(columnMaxHeight);
}
});