28172 sujets

CSS et mise en forme, CSS3

Sacré problème de div [résolu]

Bonjour,

pour etre tres bref, voila la page souhaitée (voir l'image) upload/17977-site.jpg

je souhaite avoir le CSS qui permet de faire cette disposition de div.

Nota: la div content-wrapper est celle en gris.

voila mon code HTML

<body>
    <div id="header">...</div>
    <div id="main_menu">...</div>
    <div id="content-wrapper">
        <div id="content">...</div>
        <div id="news>...</div>
        <div id="category">...</div>
    </div>
    <div id="footer">...</div>
</body>


J'ai travaillé avec clear et float en essayant toutes les conbinaisons possibles mais en vain. HELP ME Smiley sweatdrop !

Nota : il faut que le code HTML reste inchangé, avec un minimum de div, pour etre tranquil ensuite avec php.

Merci d'avance.
Modifié par M3hdi (22 Sep 2008 - 00:08)
Hello,

Le code le plus probable pour ta disposition serait plutot du genre :


<body>
    <div id="header">...</div>
    <div id="main_menu">...</div>
    <div id="content-wrapper">
       <div id ="inner-content-wrapper">
             <div id="content">...</div>
             <div id="news>...</div>
        </div>
        <div id="category">...</div>
   </div>
   <div id="footer">...</div>
</body>


En mettant donc on autre wrapper autour de content et news, ça sera bien bien plus pratique pour styler tout ça correctement.
Modifié par Tymlis (21 Sep 2008 - 01:47)
Tymlis a écrit :

En mettant donc on autre wrapper autour de content et news, ça sera bien bien plus pratique pour styler tout ça correctement.


j'ai essayé cette methode, la div categories reste tjrs en bas, voici une capture d'ecran : upload/17977-Capturer.JPG

voila la partie concerné du code :


#content-inner-wrapper {
    border: 1px solid red;
    width: 400px;
}

#categories {
    float: left;
    border: 1px solid yellow;
}


Et pourtant elles sont independantes les deux div !! pourquoi categories ne monte pas ?? et ce que je fais me semble logique !
Modifié par M3hdi (21 Sep 2008 - 03:35)
Holla back,

j'ai mis la div categories en position abolue et puis j'ai regler à l'aide de top et left le positionnement. mais je n'aprecie pas cette solution, elle peut causer des degats.

qui me propose une autre solution ?
Modifié par M3hdi (21 Sep 2008 - 03:50)
M3hdi a écrit :
qui me propose une autre solution ?

Déjà, commence par utiliser un conteneur global si tu souhaites un site en largeur fixe (ou fluide en pourcentages) centré ou aligné d'une manière ou d'une autre dans la page. Ici, tes différents conteneurs sont enfants direct de l'élément BODY, ce qui n'est pas très pratique en général.

Ensuite, le seul point délicat de ta mise en page est la structure en deux colonnes au centre. Là, c'est assez simple, et n'importe quel tutoriel sur les bases du positionnement CSS donne la réponse, ou presque. Smiley cligne
Donc en gros:
- «colonne» de gauche flottante et de largeur fixe (ou fluide en pourcentages, éventuellement);
- «colonne» de droite non flottante, avec une marge à gauche correspondant à la largeur de la colonne de gauche, plus un retrait si souhaité.

Tu n'as pas forcément besoin d'un conteneur pour tes deux colonnes.
Modérateur
Salut,

Pour ton petit souchis je ferai comme ceci (code fait de tête) :

html

<body>
<div id="global">
<div id="header">...</div>
  <div id="main_menu">...</div>
<div id="content-wrapper">
  <div id="category">...</div>
  <div id="inner_content_wrapper">
    <div id="content">...</div>
    <div id="news">...</div>
  </div>
</div>
  <div id="footer">...</div>
</div>
</body>


css

body{
 margin:0px;
 text-align:center;
 color:#666;/*Définition de la couleur de la police en général*/
 font-family:arial,helvetica, verdana, sans-serif ; 
}
#global{
 text-align:left;
 width:800px;/*largeur à définir*/
 margin:0 auto 0 auto;/*élément centré*/ 
}
#category{
 float:left;
 width:200px;/*définition de la largeur du div catégory*/
}
#inner_content_wrapper{
 margin-left:210px; /*marge en fonction de la largeur du div category*/
}
#news{
 margin-top:15px;/*définition de la marge haute par rapport à #content*/
}
#footer{
 clear:both;
}

Je pense que cela doit être à peu près cela. Je n'ai pas essayé mon code, mais je pense que cela fonctionne.

Espèrant t'avoir aidé,
++
Le code HTML de Nolem, mais corrigé:
<body>

<div id="global">
	<div id="header">...</div><!-- #header -->
	<div id="main_menu">...</div><!-- #main_menu -->
	<div id="content-wrapper">
		<div id="category">...</div>
		<div id="inner_content_wrapper">
			<div id="content">...</div>
			<div id="news">...</div>
		</div><!-- #inner_content_wrapper -->
	</div><!-- #content-wrapper -->
	<div id="footer">...</div><!-- #footer -->
</div><!-- #global -->

</body>

Aucun changement sur le fond. C'est juste pour souligner qu'un bon code HTML est un code HTML lisible et dont les balises </div> successives sont clairement identifiables. Rien de plus facile que d'oublier un </div> ou d'en placer un de trop lorsque, en production, on se retrouve à placer les </div> dans différents fichiers PHP ou fichiers de templates. (Bon après vous êtes pas obligés de faire comme moi. Smiley cligne )

Et en passant: "main_menu" (underscore) mais "content-wrapper" (dash)? "content-wrapper" (dash) mais "inner_content_wrapper" (underscore)?? Il faut choisir un style ("contentwrapper", "contentWrapper", "ContentWrapper", "content-wrapper", "content_wrapper"...) et s'y tenir!
Modifié par Florent V. (21 Sep 2008 - 23:04)
Modérateur
Florent V. a écrit :

Aucun changement sur le fond. C'est juste pour souligner qu'un bon code HTML est un code HTML lisible et dont les balises </div> successives sont clairement identifiables. Rien de plus facile que d'oublier un </div> ou d'en placer un de trop lorsque, en production, on se retrouve à placer les </div> dans différents fichiers PHP ou fichiers de templates. (Bon après vous êtes pas obligés de faire comme moi. Smiley cligne )

Et en passant: "main_menu" (underscore) mais "content-wrapper" (dash)? "content-wrapper" (dash) mais "inner_content_wrapper" (underscore)?? Il faut choisir un style ("contentwrapper", "contentWrapper", "ContentWrapper", "content-wrapper", "content_wrapper"...) et s'y tenir!


C'est vrai qu'un bon code html lisible aide énormément à la relecture. Il est conseiller de placer des commentaires au moment du code. Sinon 6 mois après, c'est dur dur à la relecture.

Exact, se tenir à une méthodologie de typage de balises ou de variables ou de class ou de fonctions (php). Là, j'ai fait un petit copier/coller avec corrections rapides et je n'ai pas fait attention aux autres tag. Smiley murf Désolé pour ce petit désagrément. Smiley confused

++
Modifié par Nolem (21 Sep 2008 - 23:44)
Florent V. a écrit :

- «colonne» de gauche flottante et de largeur fixe (ou fluide en pourcentages, éventuellement);
- «colonne» de droite non flottante, avec une marge à gauche correspondant à la largeur de la colonne de gauche, plus un retrait si souhaité.


Hmm, j'utilise toujours dans ces cas là deux colonnes flottantes, dans un conteneur en overflow:hidden;. Mais la méthode d'une colonne en float et l'autre positionnée grâce à sa margin revient régulièrement dans les réponses du forum.

Y a-t'il un avantage particulier à cette technique par rapport à mettre deux float, ou est-ce simplement une question de gout ?
Tymlis a écrit :
Y a-t'il un avantage particulier à cette technique par rapport à mettre deux float, ou est-ce simplement une question de gout ?

L'intérêt est de n'utiliser que le strict nécessaire. Et d'éviter d'avoir un bloc qui passe en-dessous de l'autre si on a mal géré les largeurs au pixel près.

Ah oui: et c'est plus simple d'avoir une colonne de largeur fluide si elle n'est pas flottante. Par exemple dans un conteneur global de largeur 80%, tu peux avoir une colonne de gauche de largeur 200px et une colonne de droite de largeur 100%-210px par exemple.
Modifié par Florent V. (22 Sep 2008 - 10:14)
Florent V. a écrit :
L'intérêt est de n'utiliser que le strict nécessaire. Et d'éviter d'avoir un bloc qui passe en-dessous de l'autre si on a mal géré les largeurs au pixel près.

Mais on peut avoir deux blocs qui se superposent si on a mal réglé les largeurs quand même dans ce cas, non ?

a écrit :
Ah oui: et c'est plus simple d'avoir une colonne de largeur fluide si elle n'est pas flottante. Par exemple dans un conteneur global de largeur 80%, tu peux avoir une colonne de gauche de largeur 200px et une colonne de droite de largeur 100%-210px par exemple.

Ah là, oui ok, bien vu.
Sujet clos
Aller à