bonjour à tous !
 
je suis en train de coder mon site-portfolio et je bloque sur un souci en particulier
www.chdup.fr/portfolio
 
le probleme se situe sur les pages avec un contenu depassant de la hauteur de l'ecran (presentation, competences par exemple)

 
 
le min-height:100% est necessaire pour que le gris clair descendent en bas de la page indépendamment du contenu.
le padding-clair est necessaire pour que les paddings appliqués ne s'ajoutent pas à la hauteur du min-height.
 
le probleme est que #clair prend la hauteur de 100% de l'ecran, mais pas plus, quand je voudrais qu'il s'allonge en hauteur.
 
une idée ?
merci

avec du javascript : détection de la résolution et maj des styles à la volée?

je sais pas si c'est top comme solution.
il faudrait que pour toute page dont le contenu ne depasse pas, le width de #clair soit egal à la hauteur de l'ecran détectée et que des que le contenu depasse, la hauteur devienne egale au contenu (+ marges)
ça me parait un peu usinagazesque, non ?

retirer le "position: absolute;" ligne 223 de style.css ?
 

 
Ca fonctionne (au moins sous firefox), mais il faut aussi agrandir l'ombre maintenant...

tout à fait, merci !
Je ne sais pas ce que cet absolute faisait la, surement un reste d'essais antérieurs.
mais effectivement reste le souci de l'ombrage ...
au debut j'appliquais un box-shadow mais le probleme est que ça me mettait d'office un scroll vertical.

bon en fait, je vais changer le design, pour coller mieux à la maquette.
je souhaite que la partie gris clair s'etende jusqu'au bout, à droite.
comme ça, plus de problème d'ombrage.
mais alors la, je ne vois pas du tout comment faire.
 
j'ai un conteneur de width fixe, qui est centré sur l'ecran, et qui comprend la partie gauche ou il y a le titre sur fond foncé, avec une width fixe + la partie grise claire, pour laquelle il faudrait que la width s'etende au dela de la width du conteneur
 
j'ai besoin de votre aide la, je suis bloqué

Ta méthode d'intégration n'est pas bonne à mon avis, tu peux faire plus simple et moins compliqué, en intégrant tes ombres aux background de tes élément par exemple, etc...
Je te montre vite fais...

integrer mes ombres aux backgrounds, c'est à dire ?
c'est ce que je fais sur #ombre_contenu non ?

Bon, je peux pas te faire un truc, ça prendrai trop de temps vu que ton JS serait à réadapter...
Cependant, pour ton ombre vertical, l'idée simple serait que tu mette un background à ton body, une image de largeur fixe que tu centre / repeat-y, gris clair avec l'ombre à droite ...
Attend, je te prépare un truc...

Voila,
Mets cette image en BG de ton body : PNG - 150 octet
css => background:url('bg_LMarty.png') center repeat-y #535353;
supprime ta <div id="ombre_contenu">
Tu peux aussi retirer ton background-color de #clair (du coup, la div n'est plus justifiée)
 
Voila, c'est tout bête mais c'est deja ça de réglé

merci de cette piste abais !!
et merci pour le bg.
effectivement ça resout le probleme d'ombrage qui suit la hauteur de la div maintenant.
par contre, ça ne m'aide pas dans l'optique du design que je voulais changer, à savoir etendre le gris_clair à droite. Mais bon, ça je verrai dans une future refonte
 
ce qui ne fonctionne plus du tout ce sont mes titres verticaux, à gauche.
www.chdup.fr/portfolio
comment faire en sorte que #txt_titre ne puisse passer à la ligne lorsque .pousse_titre est déplié, qu'il soit donc poussé à droite, à l'exterieur de .titre est donc caché par l'overflow:hidden.
 

Une idée :

Dans ton JS/JQuery, Plutot que d'animer la largeur d'un "pousseur", tu peux directement animer la propriété "left" de ton txt_titre

Une autre : Dans ton HTML, englobe ton pousseur et ton titre dans une <div> dont la largeur est suffisament grande pour ne pas avoir de retour à la ligne (le surplus est caché par .titre de toute façon...)

<div class="titre">
   <div style="width: 200px;">
      <div class="pousse_titre"></div>
                <div id="txt_titre" class="titre_identite"></div>
      </div>
</div>

T'as plein de possibilité...
Ça commence à faire bcp de <div>   , n'hézite pas à revoir la structure même de ton integration...

oui tout à fait, à force d'essayer plein de choses, ça devient chargé
je vais essayer de clarifier mon code déjà
merci
 
quand tu dis "une <div> dont la largeur est suffisament grande pour ne pas avoir de retour à la ligne", ok mais dans ce cas, le titre ne va pas se cacher, il va juste se deplacer.
sur cette adresse www.laurent-marty.fr tu peux revoir ce que je souhaitais obtenir.
 
edit: jy suis arrivé, merci du coup de main    
il reste encore pas mal de souci, mais ça c'est réglé, je vais chercher pour le reste.

abais,
 
j'ai un souci avec l'image centrée en background du body.
en reduisant la fenetre de mon navigateur, je vois que la partie "gris foncé" de gauche, disparait (normal, le background continu à se centrer sur le mileu de l image), et donc mon titre vient se superposer sur le gris clair.
comment imposer à garder cette partie foncée à gauche ?
 
merci de ton aide
 
www.laurent-marty.fr

Salut,
Il faut que tu forces ton <body> à avoir une largeur minimum, soit avec un min-width (de 1000px environ), soit en créant une <div> dans ce dernier (entre le </div> de #conteneur et le </body> ayant une largeur de 1000px et des margin auto...
je dis 1000px sans etre sûre hein, a toi du jauger !

j'ai essayé tes 2 solutions sans succès    
le min-width se fait manger par la reduction de resolution, et ajoute juste une barre de scroll, en fait