28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je me retrouve devant un petit souci fort dérangeant Smiley biggrin . En effet je souhaite que mon menu soit aligné en bas, ce qui ne fut pas très difficile. Oui mais voilà, qd on se retrouve dans le cas où ma taille d'écran est inférieur a ma taille de menu, je n'arrive pas a voir le haut de ce dernier. Pour plus de clarté voici le code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css.css" media="screen" />
  </head>
  <body>

<div id="menu_gauche">menu gauche</div>

<div id="centre">

<div id="menu1">menu1</div>
<div id="menu1">menu1</div>
<div id="menu1">menu3</div>
</div>


  </body>
</html>



/* Cascading Style Sheet */
body{
  margin: 0;
  color: #ffffff;
  text-align: center;
  height: 500px;
}



#centre{
 background-color:#121212;
height:100px;
margin-bottom:15%;
margin-left:350px;
position:absolute;
top:32%;
width:60%
}



#menu_gauche{
  position: absolute;
  bottom: 0px;
  width: 300px;
  height: 500px;
  background-color: #124578;
  margin-left: 10px;
  margin-right: 10%;
}

#menu1{
  background-color: #326587;
  height: 100px;
  width: 30%;
  float: left;
}

#menu3{
  background-color: #326587;
  height: 100px;
  width: 200px;
  float: right;
}


ma façon de faire n'est surment pas la bonne mais je ne vois pas comme faire autrement.

Merci d'avance pour votre aide. Smiley smile
Modifié par mackean (05 May 2009 - 17:12)
Diificile de s'assurer de la position verticale d'un objet par rapport à la fenêtre quand il y a tant de formats d'écrans sur le marché. Ça marchera sur un 1600 mais plus sur un 1024, ou sur un 1440 mais plus sur un 800, etc.
Laisse faire le flux, c'est le meilleur service à rendre aux utilisateurs qui ont tout à fait l'habitude d'avoir des contenus à scroller. A l'inverse, prendre le risque de bidouiller pour obtenir un résultat à peu près identique sur toutes les tailles d'écran (genre détection JS de la hauteur du viewport), tout ça pour une charte graphique dont tous les internautes se tapent n'est pas une démarche qualitative.
D'autre part donner des tailles fixes comme tu le fais aux menus est s'exposer à voir sur certains navigateurs leurs contenus cachés en cas d'agrandissement des polices.
En conclusion, si le problème est "dérangeant" pour toi, il le sera pour une part non-négligeable du reste de l'humanité quand tu l'auras résolu.... ça vaut le coup ?
Modifié par Arsene (05 May 2009 - 17:22)
Bonjour,

je suis nouveau sur le forum, j'ai parcouru la doc pour remédier à un petit souci, sans succès.
J'allais ouvrir un sujet sur la question mais vu la réponse d'Arsène, je me dis que finalement ça n'a aucune importance... que je vais donner mon ordinateur et partir en quête spirituelle vers katmandu Smiley hippy
Salut,

En explorant la piste du min-height: 100%,
Je m'explique un conteneur global contenant ta page avec un min-height: 100% et position relative et ton menu positionné en absolute bottom.
Suis pas sûr que ça marche sur tous les navigateurs à cause du calcul du height du global qui serait en l'état "indéfini"...

Suis quand même partisan de laisser faire le flux...
Modifié par ghost (05 May 2009 - 19:17)
Modérateur
Bonsoir,

sans bidouilles , un tableau une ligne 2 cellules et sa passe partout quelques soit les resolution.
premiere cellule en vertical-align:bottom; , seconde en vertical-align:middle;


Ensuite la piste du display:inline-block; ou display:table; et l'alternative simili inline-block; pour IE7 et moins , peut aussi faire l'affaire pour ceux qui maitrise ces deux la.
Sans en connaitre les contraintes et effet secondaires , ça s'apparente vite a de la bidouille ...

Donc , AMHA ,un tableau de deux cells bien solide et on economise sur le café sans frustrer le graph outre mesure Smiley smile .

++
gcyrillus a écrit :
Bonsoir,

sans bidouilles , un tableau une ligne 2 cellules et sa passe partout quelques soit les resolution.
premiere cellule en vertical-align:bottom; , seconde en vertical-align:middle;


Ensuite la piste du display:inline-block; ou display:table; et l'alternative simili inline-block; pour IE7 et moins , peut aussi faire l'affaire pour ceux qui maitrise ces deux la.
Sans en connaitre les contraintes et effet secondaires , ça s'apparente vite a de la bidouille ...

Donc , AMHA ,un tableau de deux cells bien solide et on economise sur le café sans frustrer le graph outre mesure Smiley smile .

++


Oui mais non, un tableau ça sert pas à faire de la mise en page, mais à faire... des tableaux Smiley smile
Le flux, laisse le flux t'envahir...
Modifié par gubgub (06 May 2009 - 01:26)
gubgub a écrit :
Oui mais non, un tableau ça sert pas à faire de la mise en page

Si.

Mais c'était bien essayé.
Florent V. a écrit :

Si.

Mais c'était bien essayé.

Non.
Et je me disais que sur un site comme celui-ci, on serait plus exigeant avec la qualité et la sémantique du code.
Et je ne suis pas le seul à "bien essayer" alors : http://openweb.eu.org/articles/problemes_tableaux
Et même ici, c'est fou : http://www.alsacreations.com/tuto/lire/538-Construire-un-site-sans-tableaux.html

PS : pour le pigeon : il a les deux ailes pareilles, surtout la gauche.
Modifié par gubgub (10 May 2009 - 00:56)
Hello gubgub et bienvenue, Smiley smile

hem... je pensais que l'âge de l'intégrisme css était pourtant révolu. Smiley cligne

Alors oui il faut toujours respecter la sémantique du code... sauf que :
* les css ne permettent pas (encore) de faire tout ce que l'on aimerait faire.
* certains navigateurs très répandus (je pense notamment à IE6 et même à IE7) ne les implémentent d'ailleurs pas correctement.
* plutôt que d'écrire des lignes et des lignes de code css pour un résultat qui risque d'être instable il vaut parfois mieux utiliser une table qui sera bien interprétée dans tous les navigateurs, sera accessible et n'altérera que très faiblement la sémantique.

Un bon exemple de cela est le centrage vertical d'un bloc.
Heyoan a écrit :
Hello gubgub et bienvenue, Smiley smile

hem... je pensais que l'âge de l'intégrisme css était pourtant révolu. Smiley cligne

Alors oui il faut toujours respecter la sémantique du code... sauf que :
* les css ne permettent pas (encore) de faire tout ce que l'on aimerait faire.
* certains navigateurs très répandus (je pense notamment à IE6 et même à IE7) ne les implémentent d'ailleurs pas correctement.
* plutôt que d'écrire des lignes et des lignes de code css pour un résultat qui risque d'être instable il vaut parfois mieux utiliser une table qui sera bien interprétée dans tous les navigateurs, sera accessible et n'altérera que très faiblement la sémantique.

Un bon exemple de cela est le centrage vertical d'un bloc.


Bonjour et merci Heyoan.

Je suis d'accord, il y a le rêve idéal, et la réalité.
Simplement pour la réponse initiale au post, je maintiens qu'il n'y a pas besoin d'un tableau, et que les tableaux ne servent pas à faire des mises en pages… même si c'est bien pratique parfois pour résoudre un problème de conception (souvent lié à un graphiste qui a vendu un truc très jouli en méconnaissance des contraintes actuelles du web, ça m'est arrivé encore récemment…).

Après il y a ceux que ça gène plus que d'autres, je suis un peu idéaliste, donc de ceux-là. Ceux qui apprennent aux autres que "te fais pas chier, un tableau et c'est marre" ou ceux qui disent "si tu est obligé de faire un tableau pour ta maquette, on peut éviter de faire un code sale en repensant un tout petit peu ton problème et tu auras un code plus blanc que blanc".
(En particulier sur ce site, je pensais qu'on prêchait plus la bonne parole que sur des commentcamarche.net ou consorts. Smiley ohwell )

Après, on est d'accord, la personne qui dit qu'il n'y a qu'un seul bon moyen de faire les choses a toujours tort. Smiley smile

PS : je ne dirais pas intégrisme mais idéalisme, et je pense que ce n'est pas un âge révolu mais un devenir. Le webdev façon IE6, ça c'est de la fin de race… Smiley smile