28172 sujets

CSS et mise en forme, CSS3

Structurer une page html avec des div et des id

je souhaiterais structurer ma page html, en faisant un truc de ce genre :


<div id="col1">
...
</div>
<div="col2">
...
</div>
<div="col3">
...
</div>
<table><tr> <td><script>document.getElementById("col1");</script></td>
 <td><script>document.getElementById("col2");</script></td>
 <td><script>document.getElementById("col3");</script></td>
</tr></table>


Même si ce code n'est pas correct, j'espère qu'il explique bien mon besoin...donc comment faire ?
Bonjour.

Même si ce code n'est pas correct, j'espère qu'il explique bien mon besoin

Non. A quoi doivent servir tes colonnes ? A quoi doivent servir tes scripts ?

Si tu veux mettre du texte sur plusieurs colonnes, il y a des propriétés CSS pour ça (column-width, column-count, column-gap, etc., éventuellement avec préfixe propriétaire), et un seul conteneur suffit.

Si tes colonnes doivent contenir des contenus différents, il y a en HTML5 des éléments plus spécifiques que div, comme article, aside, nav, etc.
Bonsoir, mon but est de séparer le contenu et sa mise en page (et en écrivant ça, je réalise que c'est le but du CSS (sauf que je n'y connais pas grand-chose)). Donc en gros chacun de mes div contient une liste (structurée) de titres avec des liens, cette liste décrivant le contenu d'un onglet. Et les scripts, c'est juste l'affichage de ce contenu, et je pensais (peut-être à tord) que ça passait par javascript.
Comme les contenus sont des listes (structurées), j'imagine de les faire avec des ul/li ; qu'en pensez-vous ?
laurents a écrit :
Comme les contenus sont des listes (structurées), j'imagine de les faire avec des ul/li ; qu'en pensez-vous ?


Bien sur, car avec des <div> neutre, tu balises sans structurer. <ul> est un element block, il est inutile de le doubler d'un <div>, tu peut le styler tout comme un <div>.

En regroupant tes 3 <ul> dans un <div> (ou <nav> si pertinent) en display:table, et en les formatant en display:table-cell, tu obtiens le rendu d'un tableau. La le <div> a une fonction de mise en forme , le <nav> a une fonction mieux définie dans ton document.

voilou, si ça te conforte dans ton idée,
++
Ca me fait surtout prendre conscience de mon peu de connaissance en CSS ; pourrais-tu me conseiller un tuto pour en apprendre un peu plus pour savoir faire un tableau avec une ul (ta réponse me donne certaines indications, mais elle ne me suffit pas pour les appliquer) et pour le choix entre div et nav (html5 si je ne m'abuse ?)
Rebonsoir,

je viens de récupérer un code qui semble répondre ; qu'en pensez-vous ?


<!DOCTYPE html>

<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>

  <style> ul.listMenu {
  display:table;
  padding:0;
  margin:0;
  border-collapse:collapse;
  font-size:.9em;
 }

 ul.listMenu li {
  display:table-cell;
  list-style-type: none;
  margin:0;
  padding:0;	
  border:1px solid #B8CF9E;
  background-color:#E3F5EB;
  width:113px;
  text-align:center;
 }</style>
  </head>

  <body>
<ul class="listMenu">
  <li class="first" ><span class="menu">Votre avis</span></li>
  <li><a href="#" class="menu">Accueil</a></li>
  <li><a href="item.html" class="menu">Item un peu long pour voir</a></li>
 </ul>
  </body>
</html>


J'aime pas la mise en page de ce forum car celle que je saisie n'est pas conservée... Smiley decu
Bonsoir,

j'ai un peu avancé et je n'obtiens pas ce je souhaite. Ce que je souhaite serait :

liste1---------------liste2----------------liste3


item1-1--------------item2-1---------------item3-1


item1-2--------------item2-2---------------item3-2

et ce que j'obtiens, c'est 

liste1-------item1-1--------------item1-2--------liste2--------item2-1--------------item2-2--------liste3-------item3-1--------------item3-2
avec 
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
  </head>
  <style>
  ul.listMenu {
  display:table;

  }
  ul.Menu1 li {
  display:table-cell;
  list-style-type: none;
}
  ul.listMenu {
  display:table;
  padding:0;
  margin:0;
  border-collapse:collapse;
  font-size:.9em;
 }

 ul.listMenu li {
  display:table-cell;
  list-style-type: none;
  margin:0;
  padding:0;	
  border:1px solid #B8CF9E;
  background-color:#E3F5EB;
  width:113px;
  text-align:center;
 }</style>
  <body>
<ul class="Menu1">
  <li>
  <ul class="listMenu">
    <li><span class="menu">liste1</span></li>
  <li><span class="menu">item1-1</span></li>
  <li><span class="menu">item1-2</span></li>
	  </ul>
  </li>
  <li>
   <ul class="listMenu">
    <li><span class="menu">liste2</span></li>
  <li><span class="menu">item2-1</span></li>
  <li><span class="menu">item2-2</span></li>
	  </ul> 
  </li>
   <ul class="listMenu">
    <li><span class="menu">liste3</span></li>
  <li><span class="menu">item3-1</span></li>
  <li><span class="menu">item3-2</span></li>
	  </ul> 
 </ul>
  </body>
</html>

Mise en page nulle ; désolé, je découvre...Que faut-il changer dans mon code (et dans la mise en page) ?
Je ne saisi pas bien ce que tu souhaites,
mais si tu veut faire un menu avec un sous-menu, il te faut 2 niveau d'imbrication de tes listes, autrement, si tu ne veut qu'un niveau, il faudrait alors te servir de 
<dl>
  <dt>1</dt>
  <dd> 1.1</dd>

ect et qui n'est pas pertinent.

bidouille avec ton code et ce que j'imagine.
http://codepen.io/anon/pen/Ftuim
++.
Merci pour ta réponse ; ce qui se rapproche le plus de mon besoin est ton 3e essai (le "hum") ; j'ai un peu modifié le codepen pour que ça ressemble plus : les item1-1/item1-2/etc à la vertical et pas à l'horizontal. Par contre, comme je suis quasi nul en CSS (et pas toi visiblement), j'arrive pas à centrer ceux-ci ; ils restent désespérément collés à gauche...
Sinon, l'idée est bonne : un menu en permanence déroulé (pas de rollover)
Bonjour,

et bien si tu as vraiment beaucoup de lacunes, le mieux est de lire et suivre quelques tutoriels pour acquérir l'essentiel.

la syntaxe html et le doctype
la structure HTML
les attributs
les feuille de style (comment les liées au document)
les selecteurs CSS.
La notion d’héritage
les styles par defauts des balises.

Tu as sur ce site quelques tutoriels et astuces, sinon , ton moteur de recherche préféré. Si tu comprend l'anglais, il y a alors énormément de ressources ... a trier bien sur Smiley smile
++
Même si je ne connais pas tout (ni personne d'ailleurs), j'ai quand même des notions dans les différents sujets que tu évoques. Permets-moi quand même 2 questions :

- c'est quoi pour toi la "structure" html ?

- les styles par défaut des balises, que veux-tu dire ?

Si tu peux donner des exemples de ce que tu as en tête, c'est ce qui me parle le plus.
La structure html ,
c'est par exemple l'imbrication ou pas de tes listes selon ton contenu.
La structure donne de la cohérence à ton contenu , un item 1.1 et un sous contenu de item 1 . que se soit a l'aide de liste ordonnée (ou pas) a plusieurs niveau ou du titrage d'un texte.

Les valeurs par défaut des balises sont l'affichage quelles ont sans feuille de styles , elles ont une valeur sémantique et permettent de consulter un document avec une cohérence visuel qui ne dépend pas d'une feuille de style.

Pour les styles par defaut, voici les recommandation sur le W3C http://www.w3.org/TR/CSS21/sample.html ou http://doc-css.com/defaut.html (ça tourne beaucoup autour de display et font-size ).
et un outil ici , qui te donne celle qu'applique ton navigateur : http://www.alsacreations.com/static/rendu/
Sujet clos
Aller à