hauteur d'une div s'ajustant automatiquement à la resolution - HTML/CSS - Programmation
Marsh Posté le 21-06-2010 à 16:58:14
avec du javascript : détection de la résolution et maj des styles à la volée?
Marsh Posté le 21-06-2010 à 19:38:25
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 ?
Marsh Posté le 22-06-2010 à 00:55:54
retirer le "position: absolute;" ligne 223 de style.css ?
|
Ca fonctionne (au moins sous firefox), mais il faut aussi agrandir l'ombre maintenant...
Marsh Posté le 22-06-2010 à 09:01:02
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.
Marsh Posté le 22-06-2010 à 17:03:06
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é
Marsh Posté le 22-06-2010 à 17:19:49
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...
Marsh Posté le 22-06-2010 à 17:30:35
integrer mes ombres aux backgrounds, c'est à dire ?
c'est ce que je fais sur #ombre_contenu non ?
Marsh Posté le 22-06-2010 à 17:50:37
Ch'DUP a écrit : integrer mes ombres aux backgrounds, c'est à dire ? |
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...
Marsh Posté le 22-06-2010 à 18:06:46
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é
Marsh Posté le 23-06-2010 à 16:56:52
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.
Citation : .titre { |
Citation : <div id="conteneur"> |
Marsh Posté le 23-06-2010 à 19:42:08
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...)
Code :
|
T'as plein de possibilité...
Ça commence à faire bcp de <div> , n'hézite pas à revoir la structure même de ton integration...
Marsh Posté le 24-06-2010 à 12:01:19
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.
Marsh Posté le 26-06-2010 à 18:30:20
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
Marsh Posté le 28-06-2010 à 10:48:39
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 !
Marsh Posté le 28-06-2010 à 19:50:37
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
Marsh Posté le 21-06-2010 à 16:54:38
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)
<body>
<div id="conteneur">
<div id="fonce">
</div>
<div id="clair">
<div id="padding_clair">
CONTENU
</div>
</div>
</div>
</body>
html{
height:100%;
}
body {
background-color:#535353;
height:100%;
}
#conteneur {
width:1004px;
margin:auto;
height:100%;
}
#fonce {
width:100px;
float:left;
}
#clair {
width:896px;
min-height:100%;
background-color:#e5e5e5;
float:left;
font-family: Helvetica, Arial, sans-serif;
color:#535353;
}
#padding_clair {
padding:250px 100px 100px 100px;
}
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