Bug Alsacréations

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Bug Alsacréations

Message par guilhem_mdg »

Bonjour,
Je me retrouve confronté à un problème:
Alsacréations propose la mise en page suivante:
http://css.alsacreations.com/modeles/modele3.htm
Mais si la partie centrale contient beaucoup moins de lignes que le menu alors le menu dépasse...
Et c'est pas bon!
Comment corriger?
Merci.
Cordialement.
Guilhem.
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Personne ne trouve ? :cry:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Cordialement.
Guilhem.
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

Hello,

Il y a plusieurs solutions, tout dépend de ce que tu veux faire.
Je crois qu'il y a un autre modèle Alsacreations où les deux "colonnes" évoluent ensemble.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Bah, qu'est-ce que tu ne comprends pas dans mon explication ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Cordialement.
Guilhem.
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

Hello,

Je comprends ce que tu dis, mais je ne sais pas ce que tu as. Par exemple, est-ce que toutes tes pages seront plus courtes que ton menu ? Quel résultat veux-tu quand le contenu est très court ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Oui c'est bien ça en fait, si mon menu est plus grand que le corps de page alors le menu dépasse et du coup le pied de page ne s'affiche pas en dessous du menu mais en dessous du corps de page...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Cordialement.
Guilhem.
epsy
Varan
Messages : 1024
Inscription : 21 déc. 2005, 19:58

Message par epsy »

salut,
Asumbaa a écrit :Par exemple, est-ce que toutes tes pages seront plus courtes que ton menu ?
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
҈ - config- http://fr.enlightenment.org - wikipedia mon amiiii! - JID: epsy arobase :) jaim.at
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

Faisons des suppositions, puisque tu ne sembles pas voiloir donner de précisions :wink:

CAS 1 : toutes tes pages ont peu de contenu et/ou ton menu est super-grand donc le souci du menu est partout
RESOLUTION 1 : positionner non pas le menu mais le contenu en absolu

Code : Tout sélectionner

#centre {
position: absolute;
left: 150px;
top: 100px;
background-color:#9999CC;
}
#gauche {
width: 150px;
}
CAS 2 : tu as des pages avec plein de contenu, d'autres avec peu de contenu. Tu veux que dans tous les cas le footer soit à sa place en dessous de tout le monde.
RESOLUTION 2 : tu as le choix entre oublier la position absolue et utiliser les flottants, ou bien organiser ta page autrement pour inclure ton menu et ton contenu dans une boîte englobant #centre (mais c'est moins propre sémantiquement)

Code : Tout sélectionner

#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
float: left;
width: 150px;
}
#pied {
clear: left;
height: 30px;
background-color: #99CC99;
}
ou

Code : Tout sélectionner

#corps {
position: relative;
width: 750px;
padding-right: 600px;
}
#centre {
position: absolute;
left: 150px;
top: 0;
background-color:#9999CC;
}

<div id="corps">
  <p>menu</p>
  <p>largeur fixe : 150px</p>
  <ul class="menugauche">
	<li><a href="">Menu 1</a></li>
	<li><a href="">Menu 2</a></li>
	<li><a href="">Menu 3</a></li>
	<li><a href="">Menu 4</a></li>
  </ul>
  <div id="centre">partie centrale qui "pousse" les colonnes vers le bas.<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
  </div>
</div>
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Faisons des suppositions, puisque tu ne sembles pas voiloir donner de précisions
Si si... bien sûr!
En fait, tu vas sur le lien que je t'ai donné plus haut, tu enregistres la pages sur ton disque et tu supprimes toutes les lignes du corps de page (partie centrale). Tu testes et tu regardes le menu...
C'est pas compliqué ? :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Cordialement.
Guilhem.
HP
Tyrannosaurus Rex
Messages : 2196
Inscription : 21 oct. 2004, 10:25

Message par HP »

guilhem_mdg a écrit :En fait, tu vas sur le lien que je t'ai donné plus haut, tu enregistres la pages sur ton disque et tu supprimes toutes les lignes du corps de page (partie centrale). Tu testes et tu regardes le menu...
C'est pas compliqué ? :wink:
et ce serait pas plus simple que tu mettes en ligne une page avec peu de contenu ?
parce que avec Firefox on peut éditer le CSS en ligne, c'est bien plus simple que la manip que tu proposes ...

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

guilhem_mdg a écrit :En fait, tu vas sur le lien que je t'ai donné plus haut, tu enregistres la pages sur ton disque et tu supprimes toutes les lignes du corps de page (partie centrale). Tu testes et tu regardes le menu...
C'est pas compliqué ? :wink:
:shock: Ben non, c'est pas compliqué, c'est bien ce que j'ai fait d'ailleurs. J'ai très bien compris le souci que tu décris, là n'est pas le problème ! Ce qui me manquait, c'était des infos sur ce que tu voulais faire...

Bref, dans mes solutions 1, 2 et 3 y'en a pas une qui te convient ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Asumbaa, Merci de ta patience...
Je suis en train de tester tes solutions mais la difficulté vient du fait que mon menu est dynamique et sa hauteur n'est pas fixe.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Cordialement.
Guilhem.
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Asumba, je viens de tester:
Le problème est que mon menu doit absolument etre en absolute car j'ai dans la partie droite une liste d'images les uns à la suite des autres grâce à des float:left. Chaque retour à la ligne de ces images se fait par un clear:both.
Je ne peux donc pas mettre de menu: float:left car sinon ma 2ème ligne d'images va se mettre tout en dessous du menu...
Bref, je ne vois pas de solution...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Cordialement.
Guilhem.
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

guilhem_mdg a écrit :Asumba, je viens de tester:
Le problème est que mon menu doit absolument etre en absolute car j'ai dans la partie droite une liste d'images les uns à la suite des autres grâce à des float:left. Chaque retour à la ligne de ces images se fait par un clear:both.
Je ne peux donc pas mettre de menu: float:left car sinon ma 2ème ligne d'images va se mettre tout en dessous du menu...
Bref, je ne vois pas de solution...
D'accord, ça c'est sûr ça te limite le truc.
Tu peux faire flotter tes images à droite et faire un clear:right pour tes lignes (mais je crois bien que les navigateurs ont beaucoup de mal avec ça).

Ou bien tu utilises ma solution 3 :roll:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Ok bon en fait, j'ai résolu le truc. Enfin... Disons que j'ai supprimé le nombre d'images par ligne et donc les clear:both. Ce qui fait que j'ai pu mettrre sur le menu un float:left et juste après le corps de droite j'ai mis un clear:both...
C'est pas résolu mais j'ai trouvé une solution alternative.
Merci à tous! 8-)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Cordialement.
Guilhem.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités