Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1366 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement de blocs div

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Positionnement de blocs div

n°1331952
nero27
Posté le 24-03-2006 à 19:49:30  profilanswer
 

Bonsoir,
 
Je débute avec les div et le CSS.
 
Mon est que je ne sais pas comment aligner 3 div sur une même ligne.
 
J'ai pas mal cherché mais je ne trouve rien de clair, rien qui pourrait m'expliquer clairement (parce qu'apprendre à tâtons, ça va 5min :/).
 
Voici ce que ça donne pour l'instant :
http://www.hiboox.com/vignettes/1206/k5nintj.png
 
Les 2 menus et le contenu de la page sont l'un au dessous des autres.
 
Ce que je voudrais, c'est qu'ils soient alignés sur la même ligne comme ceci :
http://www.hiboox.com/vignettes/1206/g32zafl.png
 
Voici le code de mes div :

Code :
  1. <div id="container">
  3.  <div id="entete">
  4.   <a href="index.php"><img src="images/titre2.jpg" border="0" alt="MonCobaye, Simulation d'élevage de cochons d'Inde !" /></a>
  5.  </div>
  6.  <div id="barre">
  7.   <form>
  8.   Pseudo: <input type="text" name="pseudo" size="11" class="text">&nbsp;&nbsp;Mot de Passe: <input type="password" name="pass" size="11" class="text">
  9.   </form>
  10.  </div>
  12.  <br />
  14.  <!-- Menu de gauche -->
  15.  <div id="menu_gauche">
  16.   <div id="titre">
  17.    &nbsp;.:: Menu du jeu ::.
  18.   </div>
  19.   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  20.  </div>
  22.  <!-- contenu de la page -->
  23.  <div id="main">
  24.   <div id="titre">
  25.    &nbsp;.:: Caractéristiques générales ::.
  26.   </div>
  27.   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  28.  </div>
  30.  <!-- Menu de droite -->
  31.  <div id="menu_droite">
  32.   <div id="titre">
  33.    &nbsp;.:: Menu principal ::.
  34.   </div>
  35.   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  36.  </div>
  38. </div>


 
et le CSS correspondant :
http://www.mon-cobaye.net/nouveau% [...] s/form.css
 
Merci d'avance pour vos réponses :jap:
 
PS: si vous avez des liens pour apprendre à bien maitriser tout ça, je suis preneur :)

mood
Publicité
Posté le 24-03-2006 à 19:49:30  profilanswer
 

n°1331963
nargy
Posté le 24-03-2006 à 20:22:07  profilanswer
 

doc technique sur css1:
http://www.w3.org/TR/CSS1
 
liste des tags html:
http://www.w3.org/TR/html4/index/elements.html
 
dans ton cas, utilise plutot un tableau html (tag TABLE):

n°1331974
nero27
Posté le 24-03-2006 à 20:49:37  profilanswer
 

j'avais un tableau à la base, mais on m'a conseillé de tout passer en div :/

n°1331988
nargy
Posté le 24-03-2006 à 21:11:11  profilanswer
 

alors voit du côté de css: float et clear
 

Code :
  1. <html>
  2. <body>
  4.     <div id="container">
  5.        
  6.             <div id="entete" style="background:#ffbfbf">
  7.                 <a href="index.php"><img src="images/titre2.jpg" border="0" alt="MonCobaye, Simulation d'élevage de cochons d'Inde !" /></a>
  8.             </div>
  9.             <div id="barre" style="background:#ffffbf">
  10.                 <form>
  11.                 Pseudo: <input type="text" name="pseudo" size="11" class="text">&nbsp;&nbsp;Mot de Passe: <input type="password" name="pass" size="11" class="text">
  12.                 </form>
  13.             </div>
  14.            
  15.             <br />
  16.            
  17.             <!-- Menu de gauche -->
  18.             <div id="menu_gauche" style="background:#ffbfbf;width:10%;float:left;">
  19.                 <div id="titre">
  20.                     &nbsp;.:: Menu du jeu ::.
  21.                 </div>
  22.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  23.             </div>
  24.            
  25.             <!-- contenu de la page -->
  26.             <div id="main" style="background:#ffbfff;width:80%;float:left;">
  27.                 <div id="titre">
  28.                     &nbsp;.:: Caractéristiques générales ::.
  29.                 </div>
  30.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  31.             </div>
  32.            
  33.             <!-- Menu de droite -->
  34.             <div id="menu_droite" style="background:#bfffbf;width:10%;float:left;">
  35.                 <div id="titre">
  36.                     &nbsp;.:: Menu principal ::.
  37.                 </div>
  38.                 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  39.             </div>
  40.    
  41.         </div>
  43. </body>
  44. </html>


 

n°1332050
Shinuza
This is unexecpected
Posté le 25-03-2006 à 06:13:19  profilanswer
 

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5.             <h1 style="background:#ffbfbf">
  6.                 <a href="index.php"><img src="images/titre2.jpg" border="0" alt="MonCobaye, Simulation d'élevage de cochons d'Inde !" /></a>
  7.             </h1>
  8.             <div id="barre" style="background:#ffffbf">
  9.                 <form>
  10.                 Pseudo: <input type="text" name="pseudo" size="11" class="text">&nbsp;&nbsp;Mot de Passe: <input type="password" name="pass" size="11" class="text">
  11.                 </form>
  12.             </div>
  13.            
  14.             <br />
  15.            
  16.             <!-- Menu de gauche -->
  17.             <div id="menu_gauche" style="background:#ffbfbf;width:10%;float:left;clear:both;height:300px;">
  18.                 <h2>
  19.                     &nbsp;.:: Menu du jeu ::.
  20.                 </h2>
  21.                 Texte
  22.             </div>
  23.            
  24.             <!-- contenu de la page -->
  25.             <div id="main" style="background:#ffbfff;width:80%;float:left;height:300px;">
  26.                 <h2>
  27.                     &nbsp;.:: Caractéristiques générales ::.
  28.                 </h2>
  29.                 Texte
  30.             </div>
  31.            
  32.             <!-- Menu de droite -->
  33.             <div id="menu_droite" style="background:#bfffbf;width:10%;float:left;height:300px;">
  34.                 <h2>
  35.                     &nbsp;.:: Menu principal ::.
  36.                 </h2>
  37.                 Texte
  38.             </div>
  40. </body>
  41. </html>


 
Fais plûtot ça, ça t'alignera les colonnes à la même taille, définit ce que tu veux comme mise en forme pour le <h2> Au lieu de créer un id pour le titre du menu.
 
Vire les propriétés CSS de la page HTML contenues dans style de chaque div, et mets les dans le fichiers CSS
 
Note que je n'utilise pas ta balise container, tu peux passer toutes ses propriétés dans <body>, ça se définit comme pour h1, h2 ect... (pas de # ou de . dans le CSS)
 
Edit : J'ai viré l'entete, tu peux le remplacer par <h1> c'est mieux.
 
:jap:
 
@nargy : Les tableaux ne servent pas à la mise en page  :o


Message édité par Shinuza le 25-03-2006 à 06:14:22

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1332083
nero27
Posté le 25-03-2006 à 12:23:31  profilanswer
 

En fait, le container sert à faire un cadre autour du contenu de la page.
 
Sinon, le clear:both, ça sert à quoi précisément ?

n°1332111
gatsu35
Blablaté par Harko
Posté le 25-03-2006 à 14:26:03  profilanswer
 

le clear:both sert à casser le positionnement float appliqué sur le bloc précédent
 
http://wiki.media-box.net/documentation/css/clear

n°1332137
nargy
Posté le 25-03-2006 à 15:44:43  profilanswer
 

> @nargy : Les tableaux ne servent pas à la mise en page
ha bon? comment tu fait un tableau alors?
 
> @nargy : Les tableaux ne servent pas à la mise en page
C est quand même beaucoup plus simple et necessite beaucoup moins de code source.
 
> height=300px;
Beurk! height=100%;

Message cité 2 fois
n°1332164
dwogsi
Défaillance cérébrale...
Posté le 25-03-2006 à 16:32:12  profilanswer
 

nargy a écrit :

> @nargy : Les tableaux ne servent pas à la mise en page
C est quand même beaucoup plus simple et necessite beaucoup moins de code source.


 
Oui ça peut être plus simple et c'est justement le problème. Ce n'est pas leur fonction mais c'est très utilisé pour de la mise en page.
Conclusion : Les tableaux pour la mise en page c'est mal!

n°1332165
nero27
Posté le 25-03-2006 à 16:33:10  profilanswer
 

Les pourcentages c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions :/

mood
Publicité
Posté le 25-03-2006 à 16:33:10  profilanswer
 

n°1332171
nero27
Posté le 25-03-2006 à 16:55:41  profilanswer
 

J'aurais une autre question : comment faire pour que l'épaisseur des bords des div de menu et de contenu soient comprise dans le width du div ?

Message cité 1 fois
Message édité par nero27 le 25-03-2006 à 16:55:50
n°1332174
nargy
Posté le 25-03-2006 à 17:01:03  profilanswer
 

> Oui ça peut être plus simple et c'est justement le problème.
- ha bon... c est un problème de faire la même chose plus simplement?
 
> Les pourcentages c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions
- Les pixels c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions
 
Sur le fond je suis plutot d accord pour utiliser CSS sur la forme, maintenant CSS n est pas encore assez complet pour n utiliser que lui.

n°1332242
nero27
Posté le 25-03-2006 à 18:51:32  profilanswer
 

Citation :

> Oui ça peut être plus simple et c'est justement le problème.
- ha bon... c est un problème de faire la même chose plus simplement?


Je crois que ce qu'il voulait dire, c'est que le problème est que vu que c'est plus simple, tout le monde l'utilise alors que ce n'est pas correct [:spamafote]
 

Citation :

> Les pourcentages c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions
- Les pixels c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions


Je dirais qu'il faut savoir où et quand utiliser des pixels ou des pourcentages.
 

nero27 a écrit :

J'aurais une autre question : comment faire pour que l'épaisseur des bords des div de menu et de contenu soient comprise dans le width du div ?


Quelqu'un peut m'aider ?
 
En gros, je m'explique : je ne peux pas utiliser comme largeur 15%/70%/15% car sinon la largeur totale des 3 blocs est supérieure à celle du conteneur à cause de l'épaisseur des bordures.
De plus, les largeurs ne rendent pas pareil sous IE : est-ce normal ?


Message édité par nero27 le 25-03-2006 à 19:18:52
n°1332272
nargy
Posté le 25-03-2006 à 19:51:27  profilanswer
 

> J'aurais une autre question : comment faire pour que l'épaisseur des bords des div de menu et de contenu soient comprise dans le width du div ?
- avec des tailles en pixels...
 
> Autre question : comment puis-je faire pour que les 3 div aient la même hauteur ?
- on t a donné deux solutions: height=300px; partout ou height=100%; partout.
 
Pour height=100% il faut mettre tes divs dans un tableau, sinon FF prends la tailles de la fenêtre et IE débloque:
 

Code :
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.                <h1 style="background:#ffbfbf">
  6.                    <a href="index.php"><img src="images/titre2.jpg" border="0" alt="MonCobaye, Simulation d'élevage de cochons d'Inde !" /></a>
  7.                </h1>
  8.                <div id="barre" style="background:#ffffbf">
  9.                    <form>
  10.                    Pseudo: <input type="text" name="pseudo" size="11" class="text">&nbsp;&nbsp;Mot de Passe: <input type="password" name="pass" size="11" class="text">
  11.                    </form>
  12.                </div>
  13.              
  14.                <br />
  16. <table border=1><tr><td>
  17.                <!-- Menu de gauche -->
  18.                <div id="menu_gauche" style="background:#ffbfbf;width:20%;float:left;clear:both;height:100%;">
  19.                    <h2>
  20.                        &nbsp;.:: Menu du jeu ::.
  21.                    </h2>
  22.                    Texte<br>
  23.                  
  24.                </div>
  25.              
  26.                <!-- contenu de la page -->
  27.                <div id="main" style="background:#ffbfff;width:60%;float:left;height:100%;">
  28.                    <h2>
  29.                        &nbsp;.:: Caractéristiques générales ::.
  30.                    </h2>
  31.                    Texte
  32.                </div>
  33.              
  34.                <!-- Menu de droite -->
  35.                <div id="menu_droite" style="background:#bfffbf;width:20%;float:left;height:100%;">
  36.                    <h2>
  37.                        &nbsp;.:: Menu principal ::.
  38.                    </h2>
  39.                    Texte
  40.                </div>
  41. </td></tr></table>
  42.    
  43.     </body>
  44.     </html>


 
Pour les histoires pixels/pourcentages, j essaye toujours d utiliser les pourcentages: en tant qu internaute il n y a rien de plus énervant que de ne pas pouvoir redimensionner la police ou la taille de la fenêtre de navigation à cause de tailles fixes. Cependant parfois elles sont necessaires, mais pas dans les cadres principaux du site (menus, entêtes, pieds de page..)
 
A moins que CSS puisse faire tout ce que fait les tableaux sans utiliser des combines différentes pour chaque navigateur, les tableaux restent l idéal pour faire des présentations dynamiques sans javascript.

n°1332275
nargy
Posté le 25-03-2006 à 19:53:37  profilanswer
 

pour les bordures, peut être que ça peut t aider de jouer avec border-top,  border-bottom,  border-left,  border-right.

n°1332313
Shinuza
This is unexecpected
Posté le 25-03-2006 à 22:16:41  profilanswer
 

nargy a écrit :

> @nargy : Les tableaux ne servent pas à la mise en page
ha bon? comment tu fait un tableau alors?
 
> @nargy : Les tableaux ne servent pas à la mise en page
C est quand même beaucoup plus simple et necessite beaucoup moins de code source.
 
> height=300px;
Beurk! height=100%;


Le tableau servent au rangement de donnés tabulaires, donc que tu puisses tenir une information en lisant une colonne et une ligne du tableau. [:sinclaire]


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1332324
nargy
Posté le 25-03-2006 à 22:39:03  profilanswer
 

> Le tableau servent au rangement de donnés tabulaires, donc que tu puisses tenir une information en lisant une colonne et une ligne du tableau.
 
ouais, toutes les pages web quoi...

n°1332353
Shinuza
This is unexecpected
Posté le 26-03-2006 à 01:24:00  profilanswer
 

:sarcastic:  
 
On t'as jamais appris à lire un tableau alors...  [:sinclaire]  
 
Tu vois excel et consors? Ca sert à faire des données tabulaires.
 
Tu devrais lire ça : http://www.cybercodeur.net/weblog/ [...] thing.html


Message édité par Shinuza le 26-03-2006 à 01:24:19

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1332369
nargy
Posté le 26-03-2006 à 03:47:00  profilanswer
 

Ils admettent que CSS ne résoud pas le cas exposé dans cette thread.
 
Très bien leur exemple entre tableau et css, par contre les marges en px plutot qu en ``em`` je les recommenderaient pas.
 
Sur un écran d ordinateur, les concepteurs de pages web ont trop tendance à se référer au pixel, alors qu en face il n y a aucun moyen simple de connaître les dimensions de la fenêtre de navigation de l internaute.
 
Pour ce qui est de l organisation du site grâce à CSS, les principes valent pour d autres méthodes, il n est à imputer à CSS que l avantage de la feuille de style mise en cache.
 
Ce qui ne me plaît pas dans leur argumentation: CSS n est pas plus développé que les tableaux dans IE&NS 2 dont ils parlent, le standard est très limité, pourtant ils le présentent comme LA solution à privilégier face aux tableaux.
 
Il y a plein de choses qui manquent à CSS au niveau des tailles dynamiques: hauteur maxi/mini, politique de redimensionnement, éléments ``expansionnables``. (note: là je ne parle pas des trucs & astuces qui marche pour certains navigateurs seulement).
 
Autant de choses qu il est plus facile à faire avec des tableaux, et qui fait que dans de nombreuses pages webs les tableaux sont necessaire, même pour faire un tableau d une seule case (notamment à cause du height=100%).
 
Avec CSS les présentations avec de nombreux tableaux imbriqués pour faire des marges est révolu car CSS est beaucoup plus précis et concis, mais pas la disposition globale des éléments dans une page qui necessite bien souvent une organisation que seul un tableau peut apporter.
 
Ma remarque:
> ouais, toutes les pages web quoi...
est ironique, et porte sur le fait qu une page web est rectangulaire, et est par conséquent un cas particulier de tableau à 1 rang et 1 colonne.
 
La solution que je présente plus haut, ne peut justement pas se faire sans tableau de 1 case. Sinon, je veut bien la connaître.
 
Bref, les gens qui disent ``utilise plutôt CSS qu un tableau`` font des généralités qui ne sont pas exactes. Dans beaucoup de cas il faut les deux, et CSS ne remplace pas les tableaux.
 
Si tu prends l exemple typique présenté dans cette thread, et en supposant que CSS ait toutes les qualités necessaires au dimensionnement dynamique, un tableau reste l élément le plus logique et explicite pour ce type de présentation.

n°1332390
Shinuza
This is unexecpected
Posté le 26-03-2006 à 10:47:18  profilanswer
 

Premièrement, il est possible d'utiliser les CSS pour un redimensionement dynamique, em ou %, qu'importe.
 
Height="100%" est utilisable en CSS également, je trouve l'intérêt limité...
Cependant, il est possible d'avoir une valeur fixe pour la hauteur tant qu'on utilise certains standard d'accessibilité.
 
CSS permet de remplacer un tableau, dans tout les cas, il faut bien comprendre que le tableau à été détourné de sa fonction première, à savoir, le rangement des données ou X par Y donne une sortie de données precise.
 
Un tableau à une case, c'est justement ce qui donne une série de tableau imbriqués (illisibile pour un navigateur pour aveugle par exemple), le problème est le même avec un tableau à une seule collone ou une seule ligne.
 
Un tableau doit faire 2 lignes sur 2 colonnes minimum, respectivement, présentation des données et données.
 
Comme tu le dis "c'est plus facile", mais c'est la tout le problème, imposer un standard est une nécessité, cela permet de laisser le choix à l'utilisateur. Ce n'est pas le site web qui doit décider, mais l'utilisateur.
 
L'exemple que j'ai donné est 100% flexible, même en hauteur, il suffit de remplacer les 300px par 100%, ils prendront 100% de la page. Et c'est sans intérêt, pour acceder aux données, on descend sur la page. On présente les données comme elles viennent, cela évite d'avoir un vide entre le maximum affichable et ce que contient le site.
 
Par contre tu devrais vraiment apprendre à te servir de ta touche 3.


Message édité par Shinuza le 26-03-2006 à 10:59:48

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
n°1332422
nargy
Posté le 26-03-2006 à 12:53:22  profilanswer
 

> L'exemple que j'ai donné est 100% flexible, même en hauteur, il suffit de remplacer les 300px par 100%
- Avec FF ça marche pas en tous cas. Ils le précisent bien sur le site dont tu as donné l url ci dessus, il n y a pas de solution CSS.
 
La présentation ci dessus, en 3 colonnes, tu appelle ça comment?
 
> Par contre tu devrais vraiment apprendre à te servir de ta touche 3.
???

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement de blocs div

 

Sujets relatifs
positionnement des lumières sous DirectX 9[Réglé]Positionnement du texte dans un DIV et Background-image
[Pas tout à fait résolu] Pb de positionnement de div en design fluide[wxwidgets]Probleme de positionnement de texte static
blocs CSS flottant, compatibilité IECSS - les blocs float:left acceptent mal les padding et margin
Alignement de blocs (div)Positionnement de div différent entre FF et IE
roblème de positionnement de news, d'images avec float[AJAX ?] Drag & Drop de blocs avec enregistrement de position
Plus de sujets relatifs à : Positionnement de blocs div

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.129 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR