prateek88
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by prateek88
-
-
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
How to stop overlapping two images
in CSS
Posted
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;}