[CSS] besoin d'avis illuminé =O

besoin d'avis illuminé =O [CSS] - HTML/CSS - Programmation

Marsh Posté le 13-05-2003 à 16:45:50    

hello
je dois faire un menu en css avec du code ultra simple (divs emboités) et css basique ...
 
voila a quoi doit ressembler le menu:
 
http://pouet.cocomatic.net/menu.gif
 
en gros il faut quel'on puisse ouvrir et fermer les trucs de droite (par exemple ici "Acquérir les bases de l'nalyse financière" ) donc que le sous bloc devienne visible non visible, mais par exemple, si ce sous bloc devient invisible il faut que le carré à gauche (ici "Objectifs" ) devienne plus petit ....
 
voila, en fait je peux pas spécifier de tailles "ouvert" et "fermé" car ce serait trop contraignant vu que ces trucs sont ammenés à être générés dynamiquement, d'où la nécessité de code extrêmement simplifié et d'une css puissante ...
 
j'ai pensé à une structure du style
 
<div class="grosbloc">
  <div class="bloc">
    <div class="blochead">OBJECTIFS</div>
    <div class="blocbody">
      <div class="sousbloc">
        <div class="sousblochead">Acquerir les bases de l'analyse financiere</div>
        <div class="sousblocbody">
          <div class="sousousbloc">
            <div class="sousousblochead">Buts</div>
            <div class="sousousblocbody"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
 
 
etc etc... en gros pouvoir separer les "head" des body, pour pouvoir rendre invisible, si le bloc est fermé, le body respectif, etc....
bref en fait j'arrive pas, vu que je suis obligé de positionner ces sousblocs de facon "absolute" de faire que le bloc "Objectifs" tienne compte de la taille de son body, voila, j'y arrive po, et j'arrive pas non plus à m'exprimer tellement tout ceci est obscur, donc voilà si quelqu'un a un peu pigé ma merdouille et s'il veut bien m'aider :)

Reply

Marsh Posté le 13-05-2003 à 16:45:50   

Reply

Marsh Posté le 13-05-2003 à 16:49:56    

Je crois pas que ce soit possible en css pur. Si tu peux faire le resize en js, c'est très simple : chopper la taille de l'arbre, l'assigner à la partie 'objectifs', eg :
 
document.getElementById('objectifs';).style.height = document.getElementById('arbre';).offsetHeight;
 
Ce n'est pas standard mais ça marche sous ie & moz.  
(Par 'arbre', j'entends un gros <div> qui encapsule toute la hiérarchie).

Reply

Marsh Posté le 13-05-2003 à 17:07:47    

bin en fait je préférerai vraiment réussir avec de la css pure et dure et du html basique, car ce sera un tres grand plan qui devra aussi être réactif même sur un vieux céléron :'( et car ici les graphistes d'où je bosse commmencent à s'habituer à cette méthodo de divs emboités et css :/
donc si possible avec css, moi preneur !

Reply

Marsh Posté le 13-05-2003 à 18:45:04    

up!  :sweat: pitié

Reply

Marsh Posté le 13-05-2003 à 18:48:41    

k666 a écrit :

up!  :sweat: pitié


 
ben désolé, mais je vois pas ce qu'on peut faire pour toi.  :sweat:

Reply

Marsh Posté le 13-05-2003 à 19:12:44    

HotShot a écrit :

Nope, pas en l'état actuel ("les navs" gèrent pas les propriétés :hover sur des éléments autres qu'un <a>, et les <a> emboités déconnent grave :D


 
Si si, en fait, à part IE, ils supportent le hover sur les autres balises :D.
 
Enfin, faudrait que je teste avec Konqueror...

Reply

Marsh Posté le 13-05-2003 à 19:38:36    

pourquoi me parles tu de HOVER :??:

Reply

Marsh Posté le 13-05-2003 à 22:39:32    

bah en fait c pas quand je passe dessus, je veux pouvoir cliquer sur des trucs pour les ouvrir et recliquer pour les fermer !!

Reply

Marsh Posté le 13-05-2003 à 22:48:33    

k666 a écrit :

bah en fait c pas quand je passe dessus, je veux pouvoir cliquer sur des trucs pour les ouvrir et recliquer pour les fermer !!


 
je ne pense pas que ce soit possible sans JS, désolé.  :hello:

Reply

Marsh Posté le 13-05-2003 à 22:49:01    

ah! et il y a un rechargement de la page après le click?

Reply

Marsh Posté le 13-05-2003 à 22:49:01   

Reply

Marsh Posté le 14-05-2003 à 00:08:10    

nan ya un changement de classe css dynamique

Reply

Marsh Posté le 14-05-2003 à 10:56:19    

en fait ce qui est con c qu'il me semble qu'il faudra passer par des tableaux ? par exemple le bloc objectifs dans un td, puis le bloc de droite dans un autre td ... ce qui est un peu débole, de devoir faire tout ce bordel là uniquement à cause du fait que je veux que le sous bloc soit à droite :'(

Reply

Marsh Posté le 14-05-2003 à 11:09:14    

bah non, c'est pas nécessaire, tu peux modifier la taille de objectif via javascript. Par contre, si tu ne veux pas recharger la page, c'est obligé avec du javascript puisque le click est un event.

Reply

Marsh Posté le 14-05-2003 à 11:21:03    

oui je sais que je peux éventuellement la modifier fia JS, mais le probleme c qu'il faudra alors coder en dur la taille du bloc, chose qui était trop contraignante :'(

Reply

Marsh Posté le 14-05-2003 à 11:54:35    

non, ce n'est même pas obligé, tu peux la calculer en fonction de la taille de la fenêtre.

Reply

Marsh Posté le 14-05-2003 à 12:34:51    

bon j'ai fait un petit test avec des tableaux HTML et ça a l'air de marcher mais bon ca m'ennuie de pas pouvoir en faire autant avec des divs et de la css :'(
 
si vous avez le courage, cliquez sur le lien:
 
http://pouet.cocomatic.net/help/progression/test.html
 
 
puis cliquez sur "Comment naviguer dans cette application"
 
vous pourrez voir que le bloc de gauche s'agrandit par rapport à celui de droite, et la seule facon, pour que le bloc de gauche tienne compte du height:100% c de pas du tout positionner via de la css le bloc de droite, et donc la seule solution restante a priori est d'utiliser un table html et de dire" voila le bloc de gauche prend 100pixel et celui de droite ce qui reste ...
ca me parait vraiment bizare ...
si quelqu'un veut bien me donner un pti coup de main ??
merci j'en serai tres reconnaissant
 
 
 
edit: de toutes façons va falloir charcuter paske ca marche pas sous mozilla :'(
 
 
@l'aide :'( pitité!!!
 
 
sinon j'ai essayé le coup des element.style.height et ca passe pas, il ne connait pas le height de l'élement engloban le bloc gauche et le bloc droit


Message édité par k666 le 14-05-2003 à 12:41:04
Reply

Marsh Posté le 14-05-2003 à 14:55:41    

:bounce:

Reply

Marsh Posté le 14-05-2003 à 14:57:38    

Reply

Marsh Posté le 14-05-2003 à 16:35:11    

:ange: bah rien en fait  :sol:  
 
c t pipo [:urgeman]

Reply

Marsh Posté le 14-05-2003 à 16:47:50    

Salut, je pense ke tu peux essayer en utilisant l'attribut display (en le passant alternativement à '' et à 'none' avec un petit js :
 
<script language="JavaScript" type="text/JavaScript">
function toggle(e)
{
 if (e.style.display=='none';)
  e.style.display='';
 else e.style.display='none';
}
</script>
 
<script language="JavaScript" type="text/JavaScript">
function toggle(e)
{
 if (e.style.display=='none';)
  e.style.display='';
 else e.style.display='none';
}
</script>
<div id="mnu1"  onclick="toggle(mnu2)" style="background-color:red"> open it  
  <div id="mnu2" style="display:none;background-color:blue">test</div>
</div>
 
 
et voilà

Reply

Marsh Posté le 14-05-2003 à 18:09:33    

k666 a écrit :

:ange: bah rien en fait  :sol:  
 
c t pipo [:urgeman]


Non, non mais en fait c'était une vraie question hein. J'ai beau te lire, je n'arrive pas à voir si tu veux :
 - des DIV ou des tableaux
 - du JavaScript
 - des CSS
 
bref...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 14-05-2003 à 20:09:46    

je veux essentiellement de la css qui me permette:
 
 
de faire un surbloc composé de deux blocs, disons "gauche" et "droite",
je veux que gauche prenne 100% de hauteur, c'est à dire la hauteur de surbloc .
La hauteur de surbloc dépend de gauche et/ou de droite, il prendra la taille du bloc le plus grand ...
le problème c'est que le fait de dire, en css, que je veux un bloc à gauche et un bloc à droite, implique devoir sépcifier une position absolue à l'intérieur de surbloc, ce qui provoque que surbloc "ne sais plus combien il mesure en hauteur par exemple", car absolute embrouille l'affichage ...
voila en gros mon probleme, je pense que c assez simple en fin de compte de le comprendre, mais pour la réalisation technique, je pose certaines contraintes (prémisses plutôt :'( ) :
 
il ne faut mettre que des div histoire de pouvoir :
  -remodeler la strucuture de plein gré
  -pouvoir la générer depuis du xml sans trop me prendre la tete
 
il ne faut rien coder en dur dans la css
  - pas de positions absolute top 123px height 456px ...
 
 
 
 
voilà j'ai trouvé une solution pour pouvoir positionner un truc à gauche et l'autre à droite en utilisant un tableau html, chose qui me soule un peu à vrai dire :'( car ca marche pas terrible les tableaux et ça va contre ce que je voulais...
 
le JS entre en jeu pour ouvrir/fermer des  
morceaux de "droite", mais il faut que tout le bloc tienne compte de la nouvelle taille
 
 
voila c le bordel :'(

Reply

Marsh Posté le 15-05-2003 à 01:23:28    

up ?

Reply

Marsh Posté le 15-05-2003 à 16:37:22    

voila :) j'ai réussi à faire ce que je voulais faire j'ai du néanmoins passer par du <table> que j'aime pas trop mais ca a un bon aspect et rien n'est codé en dur :)
 
 
pour ceux qui souhaitent s'y aventurer :
 
http://pouet.cocomatic.net/help/pr [...] n_bas.html
 
clickables sont les truc bleu foncé et les trucs bleu très clair
 
voila dits moi évfentullement si ça marche pas sur votre browser :o
 

Reply

Marsh Posté le 15-05-2003 à 17:09:02    

ouioui!! pour l'instant c crade, je suis entrain de rajouter une couche de tracking et donc pour l'isntant les états des parties sont complètement insignifiants ...
sous mozilla j'arrive pas à faire que le bloc de gauche prenne 100% de la largeur disponible et ya des petits problemes je ne sais pas d'ou ca peut venir :'(

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed