Foire Au CSS - Version imprimable

Foire Au CSS - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Foire Au CSS (/showthread.php?tid=5104)

Pages : 1 2 3

RE: Foire Au CSS - Thib4s - 23-08-2010

(23-08-2010, 10:23 AM)oxman a écrit : Si tu fais ça keke il faut une ancre pour aller directement au menu qui est tout en haut du corps, sinon ton site n'est pas accessible selon les critères d'accessibilité.

Où alors tu dois laisser le menu avant le corps.

+1
Avant de coincer sur des options plus "techniques" je te conseille de fortement penser à comment créer un menu. Selon moi c'est une des étapes les plus dures lors de la création d'interface. Menu vertical, horizontal, déroulant, allongé... tous dépend de ton type de jeu et de la place que tu as.

Pour ta question :

Citation :Ce que je souhaiterais, c'est le même affichage, mais en plaçant au niveau du code html, mon menu après le corps. (pour la petite histoire, le menu peut parfois être dépendant de ce qui se passe dans le corps. Une solution MVC pourrait être une autre alternative que je n'ai pas retenue).

Voila qui pourra t'aider :

Code PHP :
<?php 

HTML.

<div id="wrapper">

  <div id="corps">

    Je suis a gauche

  </div>

  <div id="menu">

    Je suis à droite

  </div>

  <div class="clear"></div>

</div>

CSS.

#wrapper {

  width: 800px;

  margin: 20px auto;

}

#corps {

  float: left;

  width: 600px;

}

#menu {

  float:right;

  width: 180px;

  margin-left: 20px; /*Optionnel ici*/

}

.clear { /* RESET UNIVERSEL */

  clear: both;

  content: ".";

  display: block;

  height: 0;

  visibility: hidden;

}

/* Pour distinguer les block */

#corps, #menu { background: #DDD; color: #888; }

Normalement sa devrait aller Big Grin

RE: Foire Au CSS - keke - 23-08-2010

(23-08-2010, 10:23 AM)oxman a écrit : Si tu fais ça keke il faut une ancre pour aller directement au menu qui est tout en haut du corps, sinon ton site n'est pas accessible selon les critères d'accessibilité.

Où alors tu dois laisser le menu avant le corps.

Pas de soucis pour ça. L'ancrage se fait a posteriori dans un autre menu.

Sephi> je retesterais, mais je n'avais pas réussi la dernière fois.

thib4s > je vais voir si ça cole ^^

RE: Foire Au CSS - Sephi-Chan - 23-08-2010

(23-08-2010, 04:06 PM)keke a écrit : Sephi> je retesterais, mais je n'avais pas réussi la dernière fois.

Quel était ton résultat ?

Sephi-Chan

RE: Foire Au CSS - php_addict - 07-09-2010

salut

je ne sais pas si ce topic est toujours d'actualité...

comment résolvez vous le problème des padding-left qui agrandissent la div ? (en transitional))

--> http://www.zonecss.fr/style_css/feuille_css_padding_left.html

RE: Foire Au CSS - Sephi-Chan - 07-09-2010

Le padding agrandit toujours le bloc. Donc soit tu compenses en réduisant la taille du bloc, sois tu ajoute un bloc intermediaire (un wrapper) auquel tu mets un margin.

Sephi-Chan

RE: Foire Au CSS - gameprog2 - 08-09-2010

Citation :Le padding agrandit toujours le bloc.

Justement, je me demande bien pourquoi, car un padding normalement c'est des marges intérieures, donc cela ne devrait avoir aucunes influences sur la dimension extérieure.
Moi je prend ça pour le moment pour une bêtise du CSS parce que je ne vois pas la logique :/

RE: Foire Au CSS - Sephi-Chan - 08-09-2010

Pourtant, ce mécanisme — appelé box model — est défini dans la spécification de CSS. D'ailleurs, mieux vaut travailler avec un Doctype strict pour éviter que IE ne passe en quirks mode et fasse n'importe quoi avec ce box model.

D'ailleurs, les outils de développement des navigateurs intègrent un outil de visualisation qui permet de connaître le détail de ce modèle, comme le montre la capture d'écran jointe qui présente l'outil de Webkit pour ça (dans Chrome 6, en l'occurrence).

Sephi-Chan

RE: Foire Au CSS - Ter Rowan - 08-09-2010

(08-09-2010, 01:21 PM)gameprog2 a écrit : je me demande bien pourquoi, car un padding normalement c'est des marges intérieures, donc cela ne devrait avoir aucunes influences sur la dimension extérieure.
Moi je prend ça pour le moment pour une bêtise du CSS parce que je ne vois pas la logique :/

j'aurais pensé la même chose si ce n'est que, en cherchant un peu pourquoi ils ont fait cela .... il faut voir la notion de "border"

donc le border c'est le trait (d'une épaisseur variable) qui entoure ton élément

supposons qu'on ait deux éléments avec un bord
grâce au "marging" on va pouvoir définir la distance entre les deux traits du bord

maintenant, comment je définis la distance entre le bord et son contenu ?
==> grâce au "padding" qui va me dire si le bord doit être à 1, 2 , ou 30 px de mon contenu

du coup je comprends mieux les trois notions (bon ça date de maintenant)

margin = distance entre le bord "plein" de mon élément et les autres éléments
padding = distance entre le bord "plein" de mon élément et le contenu de mon élément

RE: Foire Au CSS - php_addict - 09-09-2010

dans ma lutte contre les bug de IE, j'en ai un qui date depuis 10 ans mais que je n'arrive pas à resoudre,il parait que c'est le hashlayout de IE 5 6 qui merdois...des div qui s'aggrandissent lors d'un float...



div.bug

{

height: 5px;

width: 5px;

float: left;

margin-right:1px;

margin-bottom:1px;

border:1px solid black;

}



<html>

<head>

<link rel="stylesheet" type="text/css" href="test.css" />

</head>



<body>



<div class="bug"></div>

<div class="bug"></div>

<div class="bug"></div>

<div class="bug"></div>



</body>

</html>

et donc ca m'affiche avec IE 5 et IE 6 ceci:
[Image: ie5lz.jpg]

au lieu de ceci:
[Image: ie8rc.jpg]

j'arrive meme pas à resoudre ce bug d'IE qui date de plus de 10 ans, la honte...j'ai lu des dixaine de hack css sans trouver mon bonheur...vais m'coucher...pfff.....

PS: testé avec IEtester: http://www.my-debugbar.com/wiki/IETester/HomePage

avez vous testé votre projet sous IE5 ? vous voulez avoir un peu peur ?

RE: Foire Au CSS - gameprog2 - 09-09-2010

Citation :margin = distance entre le bord "plein" de mon élément et les autres éléments
padding = distance entre le bord "plein" de mon élément et le contenu de mon élément

Oui c'est pour ça que je trouve bizarre le fait que la marge intérieure change la taille extérieur du cadre.

Pour le problème de IE, quand on pense que les utilisateurs de IE6 sont nombreux...

Ah ça vient pas du fait que IE n'a pas le même DOCtype par défaut que les autres navigateurs ?
Peut-etre qu'en indiquant un doctype strict ça marcherait ?

EDIT :
Je me reprend Wink

j'ai trouvé un truc intéressant :
http://msdn.microsoft.com/fr-fr/library/cc288325%28VS.85%29.aspx