hauteur d'une div s'ajustant automatiquement à la resolution

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : hauteur d'une div s'ajustant automatiquement à la resolution

Ch'DUP

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)

Citation :

<body>
<div id="conteneur">
<div id="fonce">
</div>
<div id="clair">
<div id="padding_clair">
CONTENU
</div>
</div>
</div>
</body>

Citation :

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

Publicité

rufo

Pas me confondre avec Lycos!

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

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Ch'DUP

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 ?

ced-2k

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

.txt_accueil, .txt_identite, .txt_parcours, .txt_competences, .txt_print, .txt_internet, .txt_photos, .txt_contact {
/*position:absolute;*/
width:704px;
display:none;
}

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

Ch'DUP

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.

Ch'DUP

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é

abais

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...

Message édité par abais le 22-06-2010 à 17:24:30

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Ch'DUP

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

Message cité 1 fois

abais

Ch'DUP a écrit :

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...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

abais

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é

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Publicité

Ch'DUP

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 {
margin-top:200px;
margin-left:50px;
width:43px;
overflow:hidden;
float:left;
border:solid 1px blue;
}

.pousse_titre {
height:1px;
width:60px;
float:left;
border:solid 1px green;
}

#txt_titre {
float:left;
width:33px;
}

.titre_accueil {
background-image:url(../images/titre_accueil.jpg);
height:167px;
}

.titre_identite {
background-image:url(../images/titre_identite.jpg);
height:154px;
}

Citation :

<div id="conteneur">
<div class="titre">
<div class="pousse_titre">
</div>
<div id ="txt_titre" class="titre_accueil">
</div>
</div>
<div id="contenu">
<div class="txt_accueil">
...

abais

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 :

<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> :pfff: , n'hézite pas à revoir la structure même de ton integration...

Message édité par abais le 23-06-2010 à 19:43:11

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Ch'DUP

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.

Message édité par Ch'DUP le 24-06-2010 à 12:19:36

Ch'DUP

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

abais

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 !

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Ch'DUP

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

FORUM HardWare.fr

Programmation

HTML/CSS

hauteur d'une div s'ajustant automatiquement à la resolution

Sujets relatifs
Agrandir ma winform ainsi que mes composants le tout automatiquement	[VBA] Pb hauteur listbox créée dynamiquement
[Résolu] Pb de résolution de type dans un template	[VBA ACCESS] cocher automatiquement
[VBA] Comment envoyer des mail automatiquement?	images de fond trois colonnes de même hauteur
[Matlab] Générer automatiquement des évènements de face avant	Editer automatiquement les valeurs d'un fichier texte
Remplir automatiquement les champs d'un pdf (ou jpg)	besoin d'un coup de main pour affichage foireux dans IE6
Plus de sujets relatifs à : hauteur d'une div s'ajustant automatiquement à la resolution

Page générée en 0.078 secondes