Hello,
I have a web system that I created on the fly SIGNS (OOP php format). PANEL each is associated with a style.
Here is the php code that generates the fly SIGNS (Panel.class.php class method).
PHP Code:
<? Php
public function show() {
$ o = '';
$ o .= '<div class = "'.$ this->style."> ',
$ o .= '<div class = "titleblock" > ',
$ o .= '<div class="title">'.$ this->title.'</ div>',
$ o .= '<div class="subtitle">'.$ this->subtitle.'</ div>',
$ o .= '</ div>',
$ o .= '<div class="content">'.$ this->content.'</ div>',
$ o .= '</ div>';
return $ o;
}
?>
In my case, I have a problem with the insertion of a panel associated with a style * X * in another panel member him to Style Y. ..
Php I do something like:
PHP Code:
<? Php
$ p1 = new Panel("Panel outside");
$ p1->set_style("shyPanel")
$ p2 = new Panel("Panel Internal)
p2 $->set_style("sheet_panel")
$ p1->set_content(p2 $->show());
echo $ p1->show();
?>
The css for the first panel:
PHP Code:
. ShyPanel{
border:1px solid # 999999;
margin:0px;
margin-left:0px;
margin-right:10px;
margin-bottom:10px;
}
. shyPanel . titleblock{
display:block;
padding:3px;
padding-left:12px;
padding-top:3px;
padding-bottom:3px;
background-color: # e2e2e2; / *** HERE THE COLOR CLEAR OF BACKGROUND FOR THE TITLE
min-height:20px;
}
. shyPanel . title{
display:block;
font-size:12px;
font-weight: bold;
padding-left:22px;
}
. shyPanel . subtitle{
display:block;
font-size:11px;
font-style:normal;
padding-left:22px;
}
. shyPanel . content{
}
and the css for the second panel:
I said that these two css files are located in different ...
PHP Code:
. Sheet_panel{
border:1px solid # 999999;
margin:0px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
margin-top:10px;
}
. sheet_panel . titleblock{
display:block;
padding:3px;
padding-left:12px;
padding-top:3px;
padding-bottom:3px;
background-color: # 666666; / *** HERE THE COLOR DARK OF BACKGROUND FOR THE TITLE
min-height:20px;
}
. sheet_panel . title{
display:block;
font-size:12px;
font-weight: bold;
padding-left:22px;
}
. sheet_panel . subtitle{
display:block;
font-size:11px;
font-style:normal;
padding-left:22px;
}
. sheet_panel . content{
padding:10px;
background-color: # e2e2e2;
}
In the Dom, we can see the two panels with css classes shyPanel then sheet_panel ... Each of these panels has a first child element associated with the class "titleblock. In the screenshot, I selected the node "titleblock" the second panel to show her style. In
Firebug, we can see when the receiver panel is associated with the
style sheet_panel "but it seems to be" crushed "by the style of the
panel container, namely shyPanel ... (The items are crossed out).
I find this strange behavior, because technically the selector.
Sheet_panel. Titleblock is more accurate than the dial. ShyPanel.
Titleblock and should therefore prevail. But apparently that is not the case.
I would like to understand how CSS works at that level, and why is the
first style that overrides the second time in my logic, the opposite
would be more intuitive.
Thank you in advance
