Afficher un border si bloc absent

Bonjour,

Je suis en train de travailler sur un design et le souci est le suivant :

Dans le corps du site, (moteur drupal), j'ai l'affichage d'un ou de 2 blocs <div> selon si je suis connecté ou non.

J'ai supprimé le bord suppérieur du bloc qui s'affiche tout le temps, et lorsque je suis connecté, pas de soucis.

Par contre, une fois déconnecté, ou en arrivant sur le site, il manque ce fameux bord.

Je recherche une fonction afin d'afficher un "border" uniquement si un bloc <div> est absent.

Quelqu'un pourrait-il m'aider ou aurait une autre solution?

Merci

Hello Newby et bienvenue,

comme ce n'est pas très clair un lien vers une page en ligne ne serait pas de refus (ou à défaut le code généré dans les cas d'un seul ou de 2 éléments DIV).

Pour ce qui est de cette question :

Newby a écrit :
Je recherche une fonction afin d'afficher un "border" uniquement si un bloc <div> est absent.

Si tu veux parler d'un élément DIV contenu ou non dans un autre tu pourrais faire :

html

<div id="preums">
   ...
   <div id="deuze">
      ...
   </div>
</div>

css

#preums, #deuze {
   border: 1px solid black;
}

#preums #deuze {
   border: none;
}

Ce fonctionnement est lié à la priorité des sélecteurs.

Et si les deux blocs se suivent directement, ça peut donner:

#deuxieme {border-top: 1px solid black;}
#premier + #deuxieme {border-top: none;}

Merci pour vos réponses, mais je me suis embrouillé en décrivant mon problème.
J'ai mélangé border et image de fond.

j'avais tout à l'heure :

#content-header {
	background: url("images/motif.png");
	background-repeat: repeat-x ;
	background-color: #404040;
	border-left: 2px dashed yellow;
	border-right: 1px dashed yellow;
	padding: 5px;
}

#content-area  {
	background-color: #404040;
	border-left: 2px dashed yellow;
	border-right: 1px dashed yellow;
	border-bottom: 3px groove yellow;
	padding: 5px;
}

avec ce code , il me manque la bordure faitepar l'image de fond quand le block "#content-header" ne s'affiche pas.




Voici ce que j'ai maintenant:

#content-header {
	background: url("images/motif.png");
	background-repeat: repeat-x ;
	background-color: #404040;
	border-left: 2px dashed yellow;
	border-right: 1px dashed yellow;
	padding: 5px;
}

#content-area  {
	background: url("images/motif.png");
	background-repeat: repeat-x ;
	background-color: #404040;
	border-left: 2px dashed yellow;
	border-right: 1px dashed yellow;
	border-bottom: 3px groove yellow;
	padding: 5px;
}

#content-header  #content-area  {
	background-color: #404040;
	border-left: 2px dashed yellow;
	border-right: 1px dashed yellow;
	border-bottom: 3px groove yellow;
	padding: 5px;
}

Maintenant, la fameuse "bordure" faite par l"image reste entre ces 2 blocks magré tout lorsqu'ils s'affichent tous les 2.

Peut etre que la soluce avec une image n'est pas top?

Si l'image en question revient à mettre un border-top il serait effectivement plus simple d'utiliser ce dernier. Quoi qu'il en soit le principe est le même quelle que soit la propriété css.

Comme je te le disais il faudrait voir le code html en plus du code css pour répondre précisément même si d'après cette phrase :

Newby a écrit :
Maintenant, la fameuse "bordure" faite par l"image reste entre ces 2 blocks magré tout lorsqu'ils s'affichent tous les 2.

... on peut supposer qu'il s'agit de 2 éléments DIV qui se suivent (et qui ne sont donc pas imbriqués) auquel cas il faudrait utiliser la solution proposée par Florent du sélecteur adjacent. Ce qui donne :

#content-header, #content-area {
	background: #404040 url("images/motif.png") repeat-x;
}

#content-header + #content-area {
	background: #404040;
}

Voila le pti bout de code :

    	<div id="main" class="clearfix">
		
		<div id="content">
			<div id="content-inner" class="inner column center">
    	  	     	<div id="content-header">
			<div class="breadcrumb"><a href="/site/">Accueil</a>
			</div>		
		        <h1 class="title">Créer un contenu</h1>  				
		        </div> <!-- /#content-header -->
		        	            	
		        <div id="content-area"> 
<!-- CONTENT AREA -->
		        	<dl class="node-type-list">
				<dt><a href="/site/node/add/page" title="blablabla.">Page</a></dt>
				<dd>blablabla</dd>
				<dt><a href="/site/node/add/story" title="reblabla">Story</a></dt>
				<dd>reblabla</dd></dl>		        	
			</div>	  		  	
  	  		</div>
			</div> <!-- /content-inner /content -->

Vu que tes deux éléments se suivent, la solution du sélecteur adjacent est la bonne. Grâce à ce sélecteur, tu peux «détecter» le cas où le bloc #content-area est précédé d'un bloc #content-header.

Par contre, cette solution ne sera pas compatible avec IE6. Deux solutions:
- soit tu t'en fiches (et j'aurais tendance à dire que tu as bien raison);
- soit tu t'arranges pour modifier le code HTML en ajoutant une classe particulière au bloc #content-area, classe qui n'existe que si #content-header existe (là ça relève de la logique de programmation, ça dépend de comment ton site est développé).

Merci Florent

Ca marche en effet pour firefox et chrome, mais pas sous IE7

Tant pis pour IE7, meme si ca concerne 51% des visiteurs.

Pas encore testé IE8, mais bon ca serait bien qu'ils fassent un effort

Moi aussi remarque, faudrait que je prenne des cours
Modifié par Newby (26 Jun 2009 - 16:14)

Newby a écrit :
Ca marche en effet pour firefox et chrome, mais pas sous IE7

C'est censé marcher sous IE7, qui comprend les sélecteurs avancés de CSS 2.1. Il se peut que ça ne marche pas sous IE7 en mode Quirks, mais n'importe quel IE (6, 7 ou 8) en mode Quirks c'est comme utiliser le moteur de rendu d'IE 5.5, donc bon... faut être un peu maso.

euh ...
désolé mais je ne connais pas ce mode.

Mon pc est a jour et en bon état, et IE7 fonctionne avec les réglages par défaut.
Modifié par Newby (28 Jun 2009 - 00:12)