Sujet Précédent Sujet Suivant

Problème de positionnementde blocs

Fermé
Aghianna Messages postés 5 Date d'inscription mardi 1 mars 2011 Statut Membre Dernière intervention 18 mars 2011 - 1 mars 2011 à 19:44
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 - 23 mars 2011 à 17:55
Bonjour,

Je rencontre un problème de positionnement de blocs. Il doit y avoir un problème de flux, j'ai essayé position absolue, clear : both ..., mais je ne trouve pas, aussi je fais appel à toutes vos connaissances.

En fait, j'ai un "bloc principal" à fond blanc sur un "conteneur" de couleur. A côté de ce bloc principal, toujours dans le conteneur , il y a un bloc "secondaire" qui correspond à des news et qui n'a pas la même hauteur de bloc, mais pour tout ça c'est bon.

Mon problème est arrivé quand j'ai vu la page, que j'ai trouvé que cela faisait trop de blanc. Alors j'ai découpé mon bloc principal en plusieurs blocs afin d'avoir un bloc fond blanc, un peu de couleur, un bloc fond blanc, etc... Si je suis le flux : le bloc secondaire se trouve complètement décalé vers le bas et en dehors de ses limites,

Comment faire en sorte qu'il soit à côté du 1er bloc principal avec les autres sous le bloc principal.

Je joins une image pour explications

Quelqu'un peut-il m'aider ???

Merci

8 réponses

Réponse 1 / 8
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
1 mars 2011 à 20:58
Bonsoir,
Si tu nous montrais ton code, sa serait un peu plus clair ;)
0
Réponse 2 / 8
Aghianna Messages postés 5 Date d'inscription mardi 1 mars 2011 Statut Membre Dernière intervention 18 mars 2011
2 mars 2011 à 09:15
Bonjour,

Oops, voilà le code 

<div id="global">
<div id="entete">
	<p><img src="" alt="IMAGE ENTETE" width="900" height="110" border="2"/></p>
	
</div>
<!-- #entete -->
 <div id="navigation">
		<ul>
			<li class="gauche">AAAAAA |</li>
			<li class="gauche"><a href="liste.html">BBBBBB</a> |</li>
			<li class="gauche"><a href="utiliser.html">HHHHHH</a> |</li>
		</ul>
</div><!-- #navigation -->

	<div id="centre">
		<div id="principal">
        <div id="block"><h2>TITRE 1</h2>
        	<p><img src="" alt="image" width="220" height="144" hspace="10" align="left" border="1" /><br />
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
          </div>
       <div id="secondaire">
		  <h3>Actualités</h3>
          <a href="">excellente année 2011!!!</a>
			<h3>Dernières nouvelles</h3>
			<a href="#">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce volutpa...</a></h3>
          <h3>Articles à lire</h3>
           <a href="#">Pellentesque habitant morbi tristique senectus et netus et 
                malesuada fames ac turpis egestas. Fusce volutpa...</a></p>
            <h3> etc....</h3>
       </div>
        <div class="clear"></div>
        <div id="block">  
        <h2>TITRE 2</h2>
       <p>Pellentesque vitae nisl dolor. </p>
        <p>amet, consectetur adipiscing elit. Suspendisse vel consectetur nunc.</p></div>
      <p>&nbsp;</p>
      <div id="block">  <h2 >BUREAU</h2>
       <p>Nunc sollicitudin tortor at lectus vulputate pharetra. Nulla ultricies 
consequat arcu ac vestibulum. </p>
		</div>
		
  <h4>Vivamus ornare, ante a scelerisque fringilla, lacus sapien suscipit lectus, quis 
volutpat magna magna ut dui.  etc.....      
        </h4>
        </div>
       </div> 
	  </div>


et maintenant le css : 
body {
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 20px;
	padding-left: 5px;
}
#global {
	width: 900px;
	margin: 0 auto; 
}

/* Bloc central */
#centre {
	width: 100%; 
	overflow: hidden;
	background: url(img/08-colonnes2.png) repeat-y; 
}
/* Contenu principal
#principal {
	float: left; 
	width: 590px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
}
/* Contenu secondaire */
#secondaire {
	margin-left: 620px;
	margin-right: 12px;
	margin-top: 20px;
	padding-top: 12px;
	padding-right: 0;
	padding-bottom: 12px;
	padding-left: 12px;
	color: #0054A6;
}
.clear {
	clear: both;
}
#block {
	width: 100%;
	background-color: #FFF;
	padding: 8px;
}


J'espère que c'est suffisamment clair !

Merci
0
Réponse 3 / 8
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
2 mars 2011 à 09:20
Comment s'appelle dans ton code ton bloc secondaire ?
0
Réponse 4 / 8
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
3 mars 2011 à 18:50
Salut Aghianna je ne sais pas si j'ai vraiment compris ton problème en fait tu voudrais que ton bloc principal soit à côté de ton bloc secondaire, j'ai repris tout ton code et je n'ai pas tout compris du coup je t'en ai fait un autre si tu le veux copie le et étudie le.

La partie html 

<!DOCTYPE >
<html>
<head>
<title>Les position des blocks</title>
<link rel="stylesheet" media="screen" type="text/css"  href="design.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<!--contenu global de la page web-->
<div id="global">

<!--contenu du header-->
<div id="header">

<!--le logo-->
<div id="logo">
</div>
<!--fin du logo-->
		
</div>
<!--fin du header-->

<!-- menu principal -->     
<div id="menu_principal">
<div id="menu">
<ul>                         
    <li><a href="#">AAAAAA</a></li>
    <li><a href="#">BBBBBB</a></li>
    <li><a href="#">CCCCCC</a></li>
</ul>
</div>
</div>
<!-- fin du menu principal -->

<!--entre le header et le footer-->
<div id="page">
	
<!--contenu du centre de la page avec le coter droite ou gauche-->
<div id="centre">
		
<!--Le contenu du centre de la page sans le coter droit-->
<div id="texte">
								
<h2>Nam luctus leo</h2> 
<p>Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. </p>
				
<h2>Nam luctus leo</h2> 
<p>Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. </p>
			
</div>
<!--fin du texte du centre de la page-->
					
<!--coter a  droite ou a  gauche voir dans le dossier .css-->
<div id="coter"> 
			
<div class="element_coter">
				
<h3>Actualités</h3>
<a href="">excellente année 2011!!!</a>
					
<h3>Dernières nouvelles</h3>
<a href="#">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce volutpa...</a></h3>
					

<h3>Articles à lire</h3>
 <a href="#">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce volutpa...</a></p>
					
<h3> etc....</h3>

</div>
				
</div>
<!--fin des coter-->
				
<!--pousse le pied de page en bas-->
<div class="pousser">&nbsp;</div>
<!--fin de la div-->
				
</div>
<!--fin du centre et le coter droit ou gauche de la page-->
		
</div>
<!--fin de la page -->
	
</div>
<!--fin du contenu global de la page-->

<!--pied de page global-->
<div id="pied-global">

<!--pied-->
<div id="pied">	
<p>Copyright (c) 2011 Votre site.com.Tous droits réservés </p>
</div>
<!--fin du pied-->
	
</div>
<!--fin du pied de page global-->

</body>
</html>


Et pour le css (à modifié selon tes besoins) 

body {
	margin: 0px;
	padding: 0px;
	background: #FFFFFF;
	color: #054A60;
}
.pousser{
    clear: both;
}
#global {
	width: 900px;
	margin: 0 auto;
	padding: 0;
	
}
#header {
	width: 900px;
	height: 140px;
	margin: 0px auto;
}
#logo {
	padding: 0;
	margin: 0;
	width: 900px;
	height: 140px;
	float: left;
	background: url("inserer votre logo ici") no-repeat;
}

#menu_principal{ 
    display: block; 
    width: 900px;  
	height: 32px; 
	margin: 0; 
	padding: 0; 
}
#menu_principal ul {
    margin: 0; 
	padding:0; 
	list-style-type:none; 
	width: 900px;
}
#menu_principal li  {
    float:left; 
	margin:0 1px 0 0; 
	padding: 0;
}
#menu_principal a {
    display: block; 
	width: 122px; 
	height: 31px; 
	margin: 0; 
	padding: 11px 0 0 0; 
	text-align:center; 
	text-decoration: none; 
	color:#000000;
}
#page {
	width: 800px;
	margin: 0 auto;
	margin-top: 19px;
	padding: 0;
	background-color: #FFFFFF;
}
#texte {
	float: left;
	width: 410px;
	padding: 30px 0px 0px 0px;
	background-color: #FFFFFF;
 
}
#texte p{
    color: black;
	font-size: 1.1em;
	line-height: 140%;
	text-align: justify;
}
#texte h1{
    text-align: center;
}
#coter {
	float: right;
	width: 350px;
	padding: 0;
	margin: 0;
	background-color: #FFFFFF;
}
.element_coter
{
   background-color: #FFFFFF;    
   margin-bottom: 25px;
   margin-top: 50px;
}
.element_coter h3
{    
   background: #FFFFFF ;
   color: #000000;
   text-align: center;
   height: 20px;
   border-bottom: 1px solid black;
}
.element_coter a
{
   color: #000000;
}
.element_coter a:hover
{
   background-color: #000000;
   color: white;
}
#pied-global {
	height: 50px;
}
#pied {
	width: 900px;
	height: 50px;
	margin: 0 auto;
    background: #FFFFFF url("inserer une image ici") repeat-x;
}
#pied p {
	margin: 0;
	padding: 15px 0 15px 0;
	text-align: center;
	color: #000000;
}


Moi c'est la structure que j'utilise sur mes sites web si tu veux plus d'explication n'hésite pas bon courage !!!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
Aghianna Messages postés 5 Date d'inscription mardi 1 mars 2011 Statut Membre Dernière intervention 18 mars 2011
14 mars 2011 à 18:49
Désolée de ne pas avoir répondu plus tôt, mais je te remercie beaucoup, c'est bien ça que je voulais. en plus en étudiant bien ta proposition, ça paraît tout clair.

Merci
0
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
14 mars 2011 à 22:23
Pas de problème, si ça répond à ta question pense à marquer ton topic en résolu !
0
Réponse 6 / 8
Aghianna Messages postés 5 Date d'inscription mardi 1 mars 2011 Statut Membre Dernière intervention 18 mars 2011
Modifié par Aghianna le 18/03/2011 à 16:10
Bonjour,

Finalement j'ai parlé trop vite car j'ai déjà le code identique à celui cité ci-dessus.

Le problème est que je veux diviser le bloc gauche en 3 parties, ce qui fait qu'entre chaque j'ai le fond du bloc centre qui sépare les différentes parties. mais dès que je fais ça, le bloc de droite est complètement décalé vers le bas.

je ne suis pas sure d'être très claire, mais je pense qu'en relisant mon code on peut voir ce que je veux dire !!!

Merci pour vos réponses
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
18 mars 2011 à 16:17
J'avoue ne pas trop comprendre ton souci, mais as tu essayé de jouer avec le position absolute et le z-index en css ?
Peux tu nous montrer un lien pour qu'on jette un oeil ?
0
Réponse 7 / 8
Aghianna Messages postés 5 Date d'inscription mardi 1 mars 2011 Statut Membre Dernière intervention 18 mars 2011
18 mars 2011 à 18:30
Voici le lien : <code>http://atnh.net/
je pense que là ce sera très clair, surtout bien descendre au bas de la page pour voir le souci !!!

Merci
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
21 mars 2011 à 09:18
peux tu nous montrer ton css liés à ton bloc Actualités, dernière nouvelles, articles à lire stoplé
0
Réponse 8 / 8
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
23 mars 2011 à 17:55
Salut, commence déjà par supprimer le margin-left: 620px; de ton bloc secondaire, ensuite tu as fermé un bloc en trop </div>

<td > </td>
</tr>
</table></div>
<h4>AVivamus ornare, ante a scelerisque ... <br />
</h4>
</div>
</div>
<h4><!-- #principal -->

</h4>
<div id="secondaire">
0

Discussions similaires

nom de metier
E=MC² -
Raymond PENTIER -

2 réponses
Séparer les notes de bas de pages du bloc texte principal.
donnemoimonvallium -
sarahmoon -

1 réponse
Nikon coolpix s500 pb bloc optique
Florina -
Laurent -

67 réponses
Brancher des BAES sans télécommande ?
Yasoda -
bendrop -

1 réponse
Minecraft : problème pour poser les blocs
racoutata -
racoutata -

11 réponses