26787 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

j ai esssayé avec le min-height: 300px;
mais ca tourne pas
Smiley sweatdrop sam/
y a ti pas quelqu un qui pourrait m aider moi je n e m ensort pas ..
pourtant c est un gabarit de site assez courant mais ces deux colonnes me posent vraiment probleme ;((
HELP Smiley decu
sam/
le min-height ne fonctionne que sous FF ...
comment faire pour mettre une image de fonds dans un divsans y mettre du texte ...
merci
sam/
peut etre je ne formule pas mon probleme clairement..??
si c est cela demandez moi ce que vous en comprenez pas ...merci..
help help Smiley sweatdrop Smiley sweatdrop Smiley sweatdrop
le but cest de creer un site entré avec un menu a droite et gauche fixe..le centre fixe aussi mais des background image de droite et gauche qui descende qui continu au fur et a mesure que le texte du contenu centran descend...puis un footer ...c est classiuqe mais je n arrive pas a gerer ces baxkground image de gauche et droite qui napparaisse que si on met du contenu dedans ou alors seulement sous FF...
le but c est que a gauche et a droite ca fasse comme sur le site de la boite d alsa colonne de droite pas de contenu en bas mais le fond suit
http://www.alsacreations.fr/solutions.html
( site qui est tres beau sobre ..une belle charte garphique du beau boulot ...qui va tres bien ds la constuinite du .com....on reprend du citron et hop on fait si qui a de la guele : chapeau pour le design et le vectoriel...)
voir ma page :
[/url]http://www.lalibellule.com/maquette11.htm

merci vraiment si quelqu un peut m aider....

sam/
bon personne pour me donner un coup demain..
faut ptete que je reexplique plus simplement.?.?.?
bonne soirée Smiley cligne
sam/
masprod a écrit :
bon personne pour me donner un coup demain..
faut ptete que je reexplique plus simplement.?.?.?
bonne soirée Smiley cligne
sam/


Le problème, c'est que tu veux faire des colonnes. Mais des colonnes, c'est dans un tableau, pas avec des <div> ! Donc voilà : c'est tout bonnement pas possible, car une <div> prend :
- en largeur, toute la place disponible (sauf si on lui donne une largeur fixe, à laquelle elle se tiendra) ;
- en hauteur, uniquement la place nécessaire pour l'affichage de son contenu.
Donc pas de contenu = pas de div.
Une div qui prendrait la même hauteur qu'une div adjascente, ça s'appelle des colonnes, et ça demande d'utiliser un tableau. Si vraiment c'est indispensable, un tableau à 3 colonnes pour le gabarit de la page, ça peut aller. Cf site Framasoft, par exemple.

Si on veut absolument utiliser des divs, alors il faut ruser. Par exemple :
- en donnant une hauteur fixe à la "colonne" :
height: 400px;

... mais c'est un peu rigide, et ça ne marche pas comme une colonne (hauteur dynamique en fonction du contenu le plus long pour toutes les cellules d'une même ligne).
- en utlisant la solution d'un "bloc-conteneur" expliquée dans ce tutoriel (Alsacréations !) : Des blocs de même hauteur sans tableaux... précisons tout de même que ça ne force pas les <div> à se comporter comme des cellules de tableau, mais que l'on utilise plutôt une ruse de type "trompe-l'oeil".
merci beaucoup pour cette reponse complete mpop et du temps consacré à la rédiger...
le but est pour moi de realiser cette page en css.
je ne pensais pas que ca allait etre aussi compliqué...
mon maquette de page d accueil est pourtant tres classique donc je pensais qu elle etait facilement realisable.
je vais me pencher sur la piste du tutoriel d'Alsacréations.
merci.je reviens pour j espere pouvoir inscrire un petit "résolu".
bonne soirée,
sam/
salut,

Concernant le min-height, ça ne marche pas avec IE, mais ce dernier donne à la propriété height le même comportement qu'à "min-height". Donc il y a des solutions. cf FAQ : Min-height sur Internet Explorer

Pour qu'il n'y ait pas de vide entre div#droite et div#pied, tu peux ajouter une image de fond au #conteneur, en la positionnant comme il faut.

Concernant l'image de fond des « colonnes » (divs #droite et #gauche), par exemple http://www.lalibellule.com/slow_03.png, ne serait il pas plus logique séparer le "pied" de l'image que tu mettrais en image de fond dans une div en bas de #droite et #gauche (ou simplement en image de fond, position verticale bas, aux listes). Ainsi, quelque soit le contenu dans ces "colonnes/div", et donc leur hauteur, cela s'afficherait ajusté et fermé en bas. (suis-je clair ?...)
Modifié par Alan (17 Jan 2006 - 11:38)
merci Alan c' est tres clair...
pour
Pour qu'il n'y ait pas de vide entre div#droite et div#pied, tu peux ajouter une image de fond au #conteneur, en la positionnant comme il faut.

C est que j ai trouvé comme solution et que ke met en place ce matin reste la solution que tu me proposes à la fin de ton post...
mais comment fait ton pour que l image de fonds du conteneur du menu de droite par exemple s etire est s allonge avec la longueur du div sans repeat mais en s allongeant....
merci Alan...
sam/
Salut Sam,

Même si tu pouvais étirer l'image, cela déformerait ton motif de fond.

J'envisagerais de découper l'image, et de ne faire répéter que la partie centrale.
Ton image dont j'ai donné le lien ci dessus fait 572px de hauteur. Je la découperais ainsi :
- La partie haute, environ 300px, où figure le motif de fond et l'effet de dégradé.
- la partie centrale, juste 1px de haut, en répétition
- Le pied, 2px de haut ou un peu plus.

Sinon tu peux aussi ne garder que la partie haute et définir les bords juste en css sans image, mais dans ce cas par d'arrondi pour IE..
merci Alan...en effet le souci c etait le dégradé qui se deforme c est pas terrible....juste une derniere question coté code tes image de background son dans 3 div differents ou dans le meme ??
au niveau code je ne vois pas comment ?? le menu est dans la partie qui s etire ??
sam//merci encore.
la partie qui s etire ..non excuse moi dans la partie qui se repete ...
mon but dans ce bloc de droite c est la meme pour le gauche:
commencer le texte assez haut juste au debut du cadre
un titre
une liste de lien
un autre titre
une liste de lien
....voilou..
merci
sam/
Salut,

Ce n'est sûrement pas possible de mettre différentes images de fond dans une même div.
Il faudrait au moins ajouter une DIV pour la partie haute avec le motif et le dégradé.

<div id="gauche">
<div id="menuGauche">
      <ul>
  ..
      </ul>
  <div id="gauchePied"></div>
  </div>
</div>

div#gauche : l'image de 1px de hauteur qui se répète
div#menuGauche : La tête de l'image, sans répétition

pour le pied de l'image : comme dans l'exemple, une nouvelle div avec une hauteur de la taille de l'image qui sera en fond (par ex 2px). On doit pouvoir s'en passer mais bon..

J'ai tendance à ne pas être très économe, donc faut voir si on te propose d'autres solutions.
A+
Modifié par Alan (18 Jan 2006 - 12:06)
a écrit :
Ce n'est sûrement pas possible de mettre différentes images de fond dans une même div.
cest bien ce qu il me semblait...
merci Alan ...j applique ta solution demain et revient mettre le fameux résolu ....merci encore pour ton aide et bonne journée...
a écrit :
J'ai tendance à ne pas être très économe

c est pareil pour moi...
Smiley cligne
sam/
je pensais que c etait résolu mais non ...désolé...
sous firefox décallage en haut que n arrive pas a resoudre et surtout les le conteneur des deux menu gauche et droite qui ne s agrandissent pas avec la longueur des liste a l interieur..voir la differnce sous ie ou la ca tourne ...
qu en pensez vous ???
Mpop si t es la ??
page visible ici:
http://www.lalibellule.com/jeudi.htm

merci beaucoup

sam/
Bonjour,

Problème 1) il s'agit d'un cas normal de fusion des marges
Pour résoudre ce problème, tu peux remplacer dans div.texthaut le margin-top: 7px; par padding-top: 7px;

Problème 2) comme expliqué dans les messages ci-dessus, il faut utiliser la propriété "min-height" pour que tes div possèdent à la fois une hauteur minimale et puissent s'étendre en fonction du contenu. Pour le cas particulier de IE (qui ne prend pas en charge min-height), voir la solution dans la FAQ : http://forum.alsacreations.com/faq/#item60

Bonne continuation
Modifié par Alan (24 Jan 2006 - 11:42)
MERCI Alan
j aurais pu trouver le probleme 1 seul heureusement que tu es arrivé a la rescousse Smiley cligne
par contre pour le probleme 2 je galere ...
en fait mon cas est particulier a moins que j e n ai rein compris à tes sources...
moi ca fonctionne sous ie et ca ne fonctionne pas sous mozilla...
bizarre ...j ai utilisé les solutions proposées et lu les ressources mais ca tourne pas ??
sam/
Pages :