prateek88
Members-
Posts
6 -
Joined
-
Last visited
Previous Fields
-
Languages
HTML,CSS
Profile Information
-
Location
India
-
Interests
Coding,Reading,Music
prateek88's Achievements
Newbie (1/7)
0
Reputation
-
hello everybody, I am trying to add an image on a login page but when the browsers viewport is resized the image gets overlapped. /*-------------------------Simple reset--------------------------*/ *{margin:0;padding:0;} /*-------------------------General Styles--------------------------*/ html{background:url('../img/bg_tile.jpg') #161718;}body{background:url('../img/bg_center.jpg') no-repeat center center;min-height: 600px; padding: 200px 0 0;font:14px/1.3 'Segoe UI',Arial, sans-serif;}a, a:visited {text-decoration:none;outline:none;color:#54a6de;}a:hover{text-decoration:underline;}section, footer{display: block;}#loginimg{color:white;background: url('../img/login.png') no-repeat;height: 400px;width:400px;float:left;margin-left: 315px;top: 0px;padding: 0 0 0;display: block;} /*----------------------------Styling the forms-----------------------------*/ #formContainer{width:288px;height:321px;margin:0 auto;position:relative;z-index:1; -moz-perspective: 800px;-webkit-perspective: 800px;perspective: 800px;}#formContainer form{width:100%;height:100%;position:absolute;top:0;left:0; /* Enabling 3d space for the transforms */-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transform-style: preserve-3d; /* When the forms are flipped, they will be hidden */-moz-backface-visibility: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden; /* Enabling a smooth animated transition */-moz-transition:0.8s;-webkit-transition:0.8s;transition:0.8s; /* Configure a keyframe animation for Firefox */-moz-animation: pulse 2s infinite; /* Configure it for Chrome and Safari */-webkit-animation: pulse 2s infinite;} /* Firefox Keyframe Animation */@-moz-keyframes pulse{0%{ box-shadow:0 0 1px #008aff;}50%{ box-shadow:0 0 8px #008aff;}100%{ box-shadow:0 0 1px #008aff;}}/* Webkit keyframe animation */@-webkit-keyframes pulse{0%{ box-shadow:0 0 1px #008aff;}50%{ box-shadow:0 0 10px #008aff;}100%{ box-shadow:0 0 1px #008aff;}}#login{background:url('../img/login_form_bg.jpg') no-repeat;z-index:100;}#recover{background:url('../img/recover_form_bg.jpg') no-repeat;z-index:1;opacity:0; /* Rotating the recover password form by default */-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg);}#formContainer.flipped #login{ opacity:0; /** * Rotating the login form when the * flipped class is added to the container */ -moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);}#formContainer.flipped #recover{ opacity:1; /* Rotating the recover div into view */-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);transform:rotateY(0deg);} /*----------------------------Inputs, Buttons & Links-----------------------------*/ #login .flipLink,#recover .flipLink{ /* The blue ribbon links */ height: 65px; overflow: hidden; position: absolute; right: 0; text-indent: -9999px; top: 0; width: 65px;}#recover .flipLink{right:auto;left:0;}#login:after{/* The "Click here" tooltip */width:98px;height:16px;content:'';background:url('../img/click_here.png') no-repeat;position:absolute;right:-120px;top:22px;}input[type=text],input[type=password]{/* The text fields */font: 15px 'Segoe UI',Arial,sans-serif;border: none;background:none;height: 36px;left: 26px;position: absolute;top: 176px;width: 234px;text-indent: 8px;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);color:#eee;outline:none;}#loginPass{top: 215px;}#recoverEmail{top:215px;}input[type=submit]{ /* Submit button */ opacity:0.9;position:absolute;top:262px;left:25px;width: 239px;height:36px;cursor:pointer;border-radius:6px;box-shadow:0 1px 1px #888;border:none;color:#fff;font:14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif; /* CSS3 Gradients */ background-image: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(80,102,127)), color-stop(0.5, rgb(87,109,136)), color-stop(1, rgb(106,129,155)));}input[type=submit]:hover{opacity:1;}input::-webkit-input-placeholder { color:#eee;} /*----------------------------The Footer-----------------------------*/ footer{background-color: #111111;bottom: 0;box-shadow: 0 -1px 2px #111111;height: 45px;left: 0;position: fixed;width: 100%;z-index: 100000;}footer h2{color: #EEEEEE;font-size: 14px;font-weight: normal;left: 50%;margin-left: -400px;padding: 13px 0 0;position: absolute;width: 540px;}footer h2 i{font-style:normal;color:#888;}footer a.tzine,a.tzine:visited{color: #999999;font-size: 12px;left: 60%;margin: 16px 0 0 110px;position: absolute;text-decoration: none;top: 0;}footer a i{color:#ccc;font-style: normal;}footer a i b{color:#c92020;font-weight: normal;} <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Login</title> <!-- Our CSS stylesheet file --> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="loginimg"> </div> <div id="formContainer"> <form id="login" method="post" action="./"> <a href="#" id="flipToRecover" class="flipLink">Forgot?</a> <input type="text" name="loginEmail" id="loginEmail" value="Email" /> <input type="password" name="loginPass" id="loginPass" value="pass" /> <input type="submit" name="submit" value="Login" /> </form> <form id="recover" method="post" action="./"> <a href="#" id="flipToLogin" class="flipLink">Forgot?</a> <input type="text" name="recoverEmail" id="recoverEmail" value="Email" /> <input type="submit" name="submit" value="Recover" /> </form> </div> <footer> <h2>© 2012 <i>TechGeeks<i> |</h2> <a class="tzine">Design by TechGeeks Team </footer> <!-- JavaScript includes --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/js/script.js"></script> </body></html>
-
Yeah, you are right the path wasn't correct.....sorry for wasting your time for such a stupid problem....
-
Hello everyone, I am playing with some HTML & CSS code in order to learn practically. I am not getting why the background for the content class i defined in the .Css file isnt visible. [/font][/color]*{ margin:0; padding:0;}html {[/font][/color][color=#000000][font=verdana, geneva, lucida,]}body { min-height: 900px; font:14px/1.3 Arial,sans-serif; background: #000000 url(images/main_bg.jpg) repeat-x;}header { box-shadow: 0 -1px 2px #111111; color:#fff; display:block; height:70px; position:relative; width:100%; z-index:100;}header h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px;}header a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0;}header .stuts span { font-size:22px; font-weight:bold; margin-left:5px;}.container { height: auto; margin: 0px auto; width: 957px; }.content{height: 900px;margin: auto auto;width: 957px;background: url(images/content_bg.jpg) top center no-repeat;color:#fcfcfc;}[/font][/color][color=#000000][font=verdana, geneva, lucida,]footer{background-color: #111111;bottom: 0;box-shadow: 0 -1px 2px #111111;height: 45px;left: 0;position: fixed;width: 100%;z-index: 100000;display: block;}[/font][/color][color=#000000][font=verdana, geneva, lucida,]footer h2{color: #EEEEEE;font-size: 14px;font-weight: normal;left: 50%;margin-left: -400px;padding: 13px 0 0;position: absolute;width: 540px;}[/font][/color][color=#000000][font=verdana, geneva, lucida,]footer h2 i{font-style:normal;color:#888;}[/font][/color][color=#000000][font=verdana, geneva, lucida,]footer a.tzine,a.tzine:visited{color: #999999;font-size: 12px;left: 60%;margin: 16px 0 0 110px;position: absolute;text-decoration: none;top: 0;}[/font][/color][color=#000000][font=verdana, geneva, lucida,]footer a i{color:#ccc;font-style: normal;}[/font][/color][color=#000000][font=verdana, geneva, lucida,]footer a i b{color:#c92020;font-weight: normal;}[/font][/color][color=#000000][font=verdana, geneva, lucida,] /////////////////////////////////////////////////HTML HTML//////////////////////////////////////////////////// <!DOCTYPE html><html lang="en" > <head> <meta charset="utf-8" /> <title>Welcome</title> <link href="styles/layout.css" rel="stylesheet" type="text/css" /> <link href="styles/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <header> <h2>XpertCareers</h2> </header> <div class="container"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a class="hsubs" href="#">Menu 1</a> <ul class="subs"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a class="hsubs" href="#">Menu 2</a> <ul class="subs"> <li><a href="#">Submenu 2-1</a></li> <li><a href="#">Submenu 2-2</a></li> <li><a href="#">Submenu 2-3</a></li> <li><a href="#">Submenu 2-4</a></li> <li><a href="#">Submenu 2-5</a></li> <li><a href="#">Submenu 2-6</a></li> <li><a href="#">Submenu 2-7</a></li> <li><a href="#">Submenu 2-8</a></li> </ul> </li> <li><a class="hsubs" href="#">Menu 3</a> <ul class="subs"> <li><a href="#">Submenu 3-1</a></li> <li><a href="#">Submenu 3-2</a></li> <li><a href="#">Submenu 3-3</a></li> <li><a href="#">Submenu 3-4</a></li> <li><a href="#">Submenu 3-5</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="Login.html">Login</a></li> <div id="lunar"></div> </ul> </br> </div> <div class="content"> hello world hello worldhello worldhello worldhello </br> hello world hello worldhello worldhello worldhello </br> hello world hello worldhello worldhello worldhello </br> hello world hello worldhello worldhello worldhello </br> </div> <footer> <h2>© 2012 <i>TechGeeks<i> |</h2> <a class="tzine">Design by TechGeeks Team </footer> </body></html>
-
Oh, yes that will surely save me from lot of trouble thanks for the tip.
-
Many thanks, for the quick reply. It is working now. Is there any more efficient way to achieve this as i will be using too many rows and cells according to the seats.
-
hello, I want to develop a script which could change the each and every <td> cell in a table when clicking.What i am considering to achieve this is by assigning each <td> an id and use it as a function parameter, so that in function i could change the color of that particular cell. Something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">function changeColor(id){var cell = document.getElementById(id);cell.style.background = red;//cell.style.color = black;}</script></head> <body><table><tr><td id='cell' onclick="changeColor('cell')">a1</td></tr></table></body></html> but since onclick would not work for the <td> so what else better way to perform this. If someone could suggest better alternative for achieving sucha a thing it would be very kind. Note: All this to start my online movie ticket booking self learning project, so please guide me to the appropriate directionThanks in advance