Forums

Manojsethi

I Have Created a Main Page Having 4 Dynamic Pages in PHP. My Main page has one CSS which Works Fine. One of my Dynamic Page has it's own CSS file Which does not come into role when i click on the link. Any Suggestion Will be Helpful.
Thanks in Advance

Senff

You have a live example where you can show this? Will be easier for us to help you, not really sure when you say "does not come into role".

Manojsethi

This is code for my home page having navigation links

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1;charset=windows-1252">
        <title>Welcome to Police Service of India</title>
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
        <script type="text/javascript" src="main.js"></script> 
        <link rel="stylesheet" type="text/css" href="navigation.css" />
                     </head>

        <body>
         
        <div class="container">
            <div id="header">
                <div class="disclaimer"><b><a>E-Mail : admin@indianpolice.org</a></b></br></br>
                
                <a href="default.php?p=index" title="Login">Login</a>
                <a href="default.php?p=Register" title="Register">  Sign UP</a></div>
            <ul class="topnav"> 
        <li><a href="default.php">Home</a></li>  
        <li><a href="#">Departments</a></li> 
        <li><a href="#">Submit</a></li> 
        <li>  
            <a href="default.php?p=Register">About us</a>  
            <ul class="subnav">  
                <li><a href="">Contact Us</a></li>  
                <li><a href="">History</a></li>  
            </ul>  
        </li>  
        <li><a href="default.php?p=news">News</a></li>  
        <li><a href="#">Contact Us</a></li>  
    </ul>  
                <div class="content">
                   <?php
                   
                   if (!empty($_GET['p']))
                   {
                       $login_dir='login';
                       $login=scandir($login_dir,0);
                       unset($login[0],$login[1]);
                       $p=$_GET['p'];
                       $cssfile=array('0','0','login/police.css');
                       
                       if(in_array($p.'.inc.php',$login))
                            {
                           
                                include($login_dir.'/'.$p.'.inc.php');
                            }
                       else
                       {
                           echo "Sorry Page not Found";
                       }
                          
                        
                   }
                    
                    ?>
                    
                    </div>
            </div>
            </div> 
         </body>
</html>

This is the code for the login page which comes when login button is clicked

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="police.css" />
        <title>Welcome to Police Service of India</title>
         
       </head>
        <?php
        // put your code here
        ?>

    <body>
        <div id="center_div">
        <div class="container">
      
            
        <form action='Login.inc.php'method='POST'>
              
            <p id="text"><font size="5" face="monotype corsiva">Username : </font><input type="text" name="username" value="Username"> </p>
            <p id="text"><font size="5" face="monotype corsiva">Password : </font><input type="password" name="password"></p>
            <p class="submit"><input type="submit" name ="login" value="Login" >
            <font face="Monotype corsiva" size="3" > New User ?<a href="register.php"> Register Here</a>
        </form> 
        </div></div>
            
</pre>

This is my css code for login page named as police.css



body {    
     background-image:url("Police.jpg");
     background-repeat:repeat-x;
 }
.container
{
text-align:center;
}
#center_div
{
    a:hover color:#FF00FF;
    a:visited color:#FF00FF;
margin-left:auto;
margin-right:auto;
margin-top: 20%;
width:27%;

    background-color:rgba(178,58,238,0.8);
height: auto;
padding:8px;
-webkit-border-radius: 15px;  
    -moz-border-radius: 15px;
    
}
#text
{position: relative;
    -moz-opacity:1.0;
    filter:alpha(opacity=100);
    opacity:1.0;
margin:5px 5px;
color:black;
}
.submit input { 
    
    width: auto;  
    padding: 9px 15px;  
    background:#00cc66;  
    border: 0;  
    font-size: 14px;  
    color: #FFFFFF;  
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px; 
    }  
   input, textarea {  
    padding: 9px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 15px/100% Verdana, Tahoma, sans-serif;  
    width: 200px;  
    background: #FFFFFF url('bg_form.png') left top repeat-x;  
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));  
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);  
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;  
    -webkit-border-radius: 8px;  
    -moz-border-radius: 8px; 
    }  
  
textarea {  
    width: 400px;  
    max-width: 400px;  
    height: 150px;  
    line-height: 150%;  
    }  
      
input:hover, textarea:hover,  
input:focus, textarea:focus {  
    border-color: #C9C9C9;  
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;  
    }  
    
            
    </body>
</html>

CSS Code for my Home Page


body {
    
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
	background: #ddd url(body_bg.gif) repeat-x;
}
.container {
	width: 960px;
	margin: 0 auto;
	position: relative;
            }
#header {
	background: url(header_b.gif) no-repeat center top;
	padding-top: 120px;
        }
#header .disclaimer 
         {
	color: #999;
	padding: 100px 0 7px 0;
        font-size: 14px;
	text-align: right;
	display: block;
	position: absolute;
	top: 0; right: 0;
        }
        
#header .disclaimer a 
    {	
    color: #ccc;
    }
ul.topnav {
	list-style: none;
	padding: 0 20px;
	margin: 0;
        float: left;
	width: 920px;
	background: #222;
	font-size: 1.2em;
        background: url(topnav_b.gif) repeat;
       }
ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_h.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_b.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
        -moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; 
	border-bottom: 1px solid #444; 
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown.gif) no-repeat 10px center;
}
#header .content{
            margin-left: auto;
            margin-right: auto;
            width: 650;
            padding: 5px;
            font-size: 14px;
        }        </pre>

Manojsethi

The Problem that i am facing is that when i click on the login button on the page the page appears with just text boxes and their name along with submit button but the css is not loaded.

treehouse : what would you like to learn today?

Forums

Dynamic CSS over Static CSS