Question

I have a simple problem with my interface. The situation I will describe as follow:

I have a main_menu.php (top menu) that I’m calling in all my pages the top menu has your own css style, bellow the top menu I’m calling an tiny app that I call info panel it shows up some information about my server, prices of some products, etc.

The point here is, My top menu it is working perfectly, my info panel (top_panel.php) also is working, but when I call the 2 app in the same page for example (call in my index.php) the css style broke up. I had try everything, but nothing change.

How can I put the info panel in a background, is it possible? or it is better to write the css style all together in a single file?

[EDITED from here]

Here goes some code:

my common page -> top.php

<?php 
// My common configurations
include_once("config/config.php");

?>

<link rel="stylesheet" type="text/css" href="<?=$server_name;?>/portal/style.css" />

<table>
 <tr>
  <td>

   <?php
   // if session ten require the main menu 
otherwise shows blank
   if (isset($_SESSION["nome"])) {

       require( "main_menu.php" );

   }
   ?>

  </td>
 </tr>
 <tr>

  <td> 

    <?php include( "includes/top_panel.php" ); // the panel shows up but it is in the foreground and I need it fixed in the background ?> 

  </td>

 </tr>


<!-- some other code -->

</table>

?>

My css style is in another file it is a long file, ’cause everything is in there.

The main_menu.php (the menu style is all together with the menu itself, showing only the style)

<style type="text/css">
body {
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
h1 {
    font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    color: #333;
    margin: 0;
    padding: 0px 0;
}
h1 small {
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
    color: #fff;
}
.container {width: 975px;}

ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 975px;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background: url(<?=$server_name;?>/portal/images/topnav_stretch.gif) repeat-x;
}

/* posicao do menu */
ul#topnav li {
    //background: #000;
    background: url(<?=$server_name;?>/portal/images/topnav_stretch.gif) repeat-x;
    float: left;
    margin: 3px; padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(<?=$server_name;?>/portal/images/topnav_active.gif) repeat-x; }
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 975px;
    background: #1376c9;
    color: #fff;

    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>

My top_panel.php

<style type="text/css">

#content_marquee {



    position: relative;

    top: 40px; 

    width: 975px;

    height: 30px;

    color: yellow;

    font-family: Verdana, Georgia, sans-serif;

    font-size: 25px;



    background: url(images/bg_black.png);

    background-repeat: repeat x y;



    -moz-border-radius-bottomright: 5px;

    -khtml-border-radius-bottomright: 5px;

    -webkit-border-bottom-right-radius: 5px;

    -moz-border-radius-bottomleft: 5px;

    -khtml-border-radius-bottomleft: 5px;

    -webkit-border-bottom-left-radius: 5px; 



    -moz-border-radius-topright: 5px;

    -khtml-border-radius-topright: 5px;

    -webkit-border-top-right-radius: 5px;

    -moz-border-radius-topleft: 5px;

    -khtml-border-radius-topleft: 5px;

    -webkit-border-top-left-radius: 5px;    



}



#opacity_div{

    opacity:0.5;

}

</style>



<div id="opacity_div">

    <label><marquee id="content_marquee"> __file__ __line__ __sleep __wakeup </marquee></label>

</div>

Answer 1

After take a deep look inside my style sheet and my interface, finally I discovered a little mistakes,and I have fixed up all of them. I’m answering my own question just to tell it is working now.

Then I did as follow:

Styles.css
It has all my styles now, I have centralized here.

my top.php

It has a call to the top_panel.php, but with one difference, before I was using table tags, and now I’m using div tags, it make the big difference, with table it was not working properly, the main_menu.php was in the background and top_panel.php in the foreground.

Then I have called top_panel.php before the main_menu.php, now it is in the background and I can call the menu and it is in the foreground.

It is an workaround that works perfectly and exactly as I was expecting to. Then the problem was solved.

Now I have 4 pages involved to arquieve the result.

• main_menu.php -> It is the top menu
• style.css -> all my styls is here (not anymore in the interface)
• top.php -> it is the layout/interface of the system (It is called in everywhere)
• top_panel.php -> (Now it just request some datas from the database and shows it up)

The secret was just call top_panel.php before than everything. And change the layout to a tabeless layout. finally I do not worry about broken position in my layout.