Problem hiding div within div

Ranch Hand

Posts: 39

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello to everyone. Not too long ago I began working with css files. The problem I am currently having is hiding a div within a div. My overall jsp page looks like the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr">
<head>
<title>Valeurs Mobilières Banque Laurentienne - Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/style_global.css" type="text/css" />
</head>
<body>
<div class="site"><div class="wrapper">
<div id="logo"></div>
<div id="menu_petit">
...some header links ...
</div>
<div id="actions"><img src="images/actions_fr.jpg" alt="Actions"/></div>
<div id="contenant">
<div id="outils">
<div id="recherche">
<form>
<div class="recherche_champs"><input type="text" value="Recherche"/></div>
<div class="ok"><a class="ok" href="#"><span>Ok</span></a></div>
</form>
</div>

...

</div>
<div id="contenu">
<div id="image"><img src="images/img_particulier_fr.jpg" alt="Accueil"/></div>
<div class="area">
some html code here
</div>
</div>
</div>
<div id="footer">
<div class="footer_menu">
...some footer links
</div>
<div class="footer_copy">© 2006 Valeurs Mobilières Banque Laurentienne</div>
</div>
</div></div>
</body>
</html>

The relevenat portions of my css are as follows:

/* ------------------------------------STYLE */
 
html, body {
background-image:url(../images/back.jpg);
background-repeat:repeat-x;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 4px 0 4px 0;
text-align: center;
}
 
div.site {
width: 923px; /*--756--*/
margin: 0 auto;
padding: 0;
border: 1px solid #848484;
overflow: hidden;
}
 
div.wrapper {
width: 925px; /*--758--*/
margin: 0 auto;
padding: 0;
overflow: hidden;
}

/* ------------------------------------AUTRES */
 
span{
display:none;
}
 
form{
padding:0;
margin:0;
}
 
/* ------------------------------------TOP */
 
#logo {
background-image:url(../images/logo.jpg);
background-position:top;
background-repeat:no-repeat;
position: relative;
float: left;
width: 200px;
height: 66px;
margin: 0;
padding: 0;
}
 
#actions {
background-image:url(../images/actions_back.jpg);
background-position:top;
background-repeat:repeat-x;
position: relative;
float: left;
width: 725px; /*--558--*/
height: 39px;
margin: 1px 0 0 0;
padding: 0;
text-align: left;
}
 
/* -----------------------------------MENU PETIT */
 
#menu_petit {
background-image:url(../images/menu_petit.jpg);
background-position:top;
background-repeat:repeat-x;
position: relative;
float: left;
width: 725px; /*--558--*/
height: 25px;
margin: 0;
padding: 0;
}
 
div.separateur {
background-image: url(../images/separateur.jpg);
background-repeat: no-repeat;
background-position: right;
position: relative;
float: right;
margin: 0;
padding: 0 19px 0 16px;
}
 
div.menupetit {
position: relative;
float: right;
margin: 0;
padding: 0 19px 0 16px;
}

/* -----------------------------------RECHERCHE--*/
 
#recherche{
position: relative;
float: left;
width: 199px;
height: 36px;
margin: 15px 0 0 0;
padding: 0 0 0 10px;
color: #7B7B7B;
text-align: left;
}

#devises{
position: relative;
float: left;
width: 199px;
margin: 0;
padding: 0 0 7px 0;
color: #7B7B7B;
text-align: center;
font-size: 0.7em;
}

#image {
background-color: #A6C8DE;
position: relative;
float: left;
width: 724px; /*--557--*/
margin: 0;
padding: 0;
}
 
#contenant{
background-image:url(../images/contenu.jpg);
background-repeat:repeat-y;
position: relative;
float: left;
width: 924px; /*--757--*/
margin: 0;
padding: 0;
}
 
#outils{
position: relative;
float: left;
width: 199px;
margin: 0;
padding: 0;
}

div.area{
background-image: url(../images/p_titre_fond.jpg);
background-position: top;
background-repeat: repeat-x;
position: relative;
float: left;
width: 725px; /*--558--*/
margin: 0;
padding: 0 0 15px 0;
text-align: left;
}

#footer{
background-image:url(../images/footer.jpg);
background-position:top;
background-repeat:repeat-x;
position: relative;
float: left;
width: 924px; /*--757--*/
height: 17px;
margin: 1px 0 0 0;
padding: 12px 12px 12px 12px;
color: #7B7B7B;
font-size: 0.6em;
}
 
div.footer_menu{
position: relative;
float: left;
margin: 3px 0 0 0;
padding: 0;
width: 501px; /*--460--*/
text-align: left;
}
 
div.footer_copy{
position: relative;
float: left;
margin: 3px 0 0 0;
padding: 0;
width: 392px; /*--285--*/
text-align: right;
}
 
a.footer{
color: #000101;
text-decoration: none;
}
 
a.footer:hover{
color: #000101;
text-decoration: underline;
}

The problem i am having is as follows. The pages I am creating are being built as jsps and as blocks (tiles) and then assembled together. I can call one of the subunits of the page delimited by the following div:

What I wish to add to my css file is the ability ( once the subunit containing only the above div is isolated) to have the display property of the <div id="image"> set to none when not encased by the <div id="contenant">.

Any help would greatly be appreciated. I am sorry if the question is not very clear.

Eric Pascarello

author

Posts: 15385

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

If there is nothing else in that wrapper div, why don;t you just hide that one by setting the display to none?

you could also try something like

#contenu div {display:none;}

Eric

Put the moon back where you found it! We need it for tides and poetry and stuff. Like this tiny ad:

We need your help - Coderanch server fundraiser

https://coderanch.com/wiki/782867/Coderanch-server-fundraiser