Boite des news qui ne veut pas se placer au milieu

Question

johon03

23 Aug 2007 à 15:28

Bonjour à tous !
j'ai un gros problème en ce moment, c'est au sujet de ma boite de news :

Lien IMAGE

Elle reste en dessous du menu de gauche alors qu'elle devrait etre au dessus à droite, à coté des sortes de lianes

Mon code xHTML :

			<!-- BlocM (middle => contenu de la page) -->
<div id="blocM">

				<!-- Edito -->
		<div id="edito">
				<!-- CONTENU DE L'EDITO (présentation du Groupe en bref.......) -->
		</div>

				<!-- News -->
		<div class="news">
			<div class="news_deb"></div>
    		<div class="news_mid">
    		<!--CONTENU DE LA NEWS (titre, date, auteur, texte, image.....) -->
    		</div>
    		<div class="news_fin"></div>
		</div>
		
</div>

Mon code CSS :

			/* BlocM (middle => contenu de la page) */
#blocM {
width:523px;
height:auto;
/*border:#3366FF 2px solid;*/
z-index:200;
}

			/* Boite News */

.news {
width:523px;
height:auto;
/*border:#330033 2px solid;*/
}

.news_deb {
width:523px;
height:38px;
background-image:url(images/news_INDEX/boite_news_deb.gif);
}

.news_mid {
width:523px;
height:auto;
background-repeat:repeat-y;
background-image:url(images/news_INDEX/boite_news_mid.gif);
}

.news_fin {
width:523px;
height:40px;
background-image:url(images/news_INDEX/boite_news_fin.gif);
}

gcyrillus

Modérateur

23 Aug 2007 à 15:37

bonjour,

ton code html est imcomplet , il ne permet pas de voir ce qu'il y a devant dans le flux de ton div #blocM , donc ce qui pourrait le repousser plus bas .

Peut-etre ferme tu trop tot un conteneur principal ... ou ?

GC

johon03

23 Aug 2007 à 20:27

oui, excuse moi, je te met toute ma page index.php dans ce cas ! je n'avais pas pensé à tout mettre Smiley confus

:

Code HTML (index.php):

<body>
					<!-- PARTIE 1 : STRUCTURE DE LA BANNIERE ET DU BLOCG (HEADER) -->

			<!-- Bannière -->
<div id="bann_">
	<a href="index.php"><img src="css/images/og2m_banniere.gif" alt="One.Girl.Two.Men" /></a>
</div>

			<!-- Barre Menu Horizontal -->
<div id="up">
	<div id="menu_deb"></div>
    <div id="menu_onglets">			<!-- Partie du menu contenant tous les Liens -->
<a href="index.php"><img src="css/images/onglets_COMMON/ACCUEIL_og2m_normal.gif" alt="Accueil" width="80" height="150" onmouseover="change(this,'over')" onmouseout="change(this)"/></a>
<a href="#"><img src="css/images/onglets_COMMON/GROUPE_og2m_normal.gif" alt="Le Groupe" width="80" height="150" onmouseover="change(this,'over')" onmouseout="change(this)"/></a>
<a href="#"><img src="css/images/onglets_COMMON/MEDIAS_og2m_normal.gif" alt="Médias" width="80" height="150" onmouseover="change(this,'over')" onmouseout="change(this)"/></a>
<a href="#"><img src="css/images/onglets_COMMON/FORUM_og2m_normal.gif" alt="Forum" width="80" height="150" onmouseover="change(this,'over')" onmouseout="change(this)"/></a>
<a href="#"><img src="css/images/onglets_COMMON/LIVRE-OR_og2m_normal.gif" alt="Livre D'Or" width="80" height="150" onmouseover="change(this,'over')" onmouseout="change(this)"/></a>
<a href="#"><img src="css/images/onglets_COMMON/CONTACT_og2m_normal.gif" alt="Contactez-Nous" width="80" height="150" onmouseover="change(this,'over')" onmouseout="change(this)"/></a>
<a href="#"><img src="css/images/onglets_COMMON/LIENS_og2m_normal.gif" alt="Liens" width="80" height="150" onmouseover="change(this,'over')" onmouseout="change(this)"/></a>    </div>
    <div id="menu_fin"></div>
</div>

			<!-- Lianes reliant la barre-menu au Blocg -->
<div id="lianes"></div>

			<!-- Bloc Gauche => Blocg (divers liens, un calendrier** ....) -->
<div id="blocg">
	<div id="blocg_deb"></div>
    <div id="blocg_mid"></div>
    		<!-- CONTENU DU BLOCG -->
    <div id="blocg_fin"></div>
</div>

					<!-- PARTIE 2 : STRUCTURE DU CONTENU (CORPS) -->

			<!-- BlocM (middle => contenu de la page) -->
<div id="blocM">

				<!-- Edito -->
		<div id="edito">
				<!-- CONTENU DE L'EDITO (présentation du Groupe en bref.......) -->
		</div>

				<!-- News -->
		<div class="news">
			<div class="news_deb"></div>
    		<div class="news_mid">
    		<!--CONTENU DE LA NEWS (titre, date, auteur, texte, image.....) -->
    		</div>
    		<div class="news_fin"></div>
		</div>
		
</div>

					<!-- PARTIE 3 : STRUCTURE DU FOOTER -->

<div id="down">
	<!--CONTENU DU FOOTER (design à faire** + &copy;right + liens vers administration**)-->
</div>


</body>

Je pense donc que je devrais te mettre le CSS qui va avec :

Code CSS (common.css):

									/* fichier Commun CSS à toutes les pages */

					/* BODY (à part) */

body {
background-image:url(images/filigran.jpg);
background-repeat:repeat;
}


					/*-- PARTIE 1 : STRUCTURE DE LA BANNIERE ET DU BLOCG (HEADER) */
					
			/* Bannière */					
#bann_ {
width:417px;
padding-top:1px;
margin-left:auto;
margin-right:auto;
}

#bann_ img {
border:0;
}

			/* Barre Menu Horizontal */
#up {
/*border:#333300 1px solid;*/
width:874px;
height:150px;
margin:auto;
}

#up #menu_deb {
background-image:url(images/decor_COMMON/barre_deb.gif);
width:174px;
height:150px;
float:left;
}

#up #menu_onglets {
width:auto;
height:150px;
list-style:none;
margin:0;
padding:0;
float:left;
/*border:1px double #CC2200;*/
}

#up #menu_onglets li {
display:inline;
float:none !important;
float:left;
}

#up #menu_onglets a {
float:left;
}

#up #menu_onglets img{
border:0;
}

#up #menu_fin {
background-image:url(images/decor_COMMON/barre_fin.gif);
width:140px;
height:153px !important;
height:150px;
margin:0 0 0 734px !important;
margin:0;
float:none !important;
float:left;
}

			/* Lianes reliant la barre-menu au Blocg */
#lianes {
background-image:url(images/decor_COMMON/lianes.gif);
width:174px;
height:105px;
margin:0 0 0 191px !important;
margin:0 0 0 182px;
/*border:#333300 1px solid;*/
}

			/* Bloc Gauche => Blocg (divers liens, un calendrier** ....) */
#blocg {
width:174px;
height:auto;
margin:0 0 0 191px !important;
margin:0 0 0 182px;
padding:0;
/*border:#333300 1px solid;*/
}

#blocg_deb {
background-image:url(images/decor_COMMON/blocg_deb.gif);
height:78px;
width:174px;
}

#blocg_mid {
background-image:url(images/decor_COMMON/blocg_rep.gif);
height:auto;
background-repeat:repeat-y;
width:174px;
}

#blocg_fin {
background-image:url(images/decor_COMMON/blocg_fin.gif);
height:82px;
width:174px;
}


					/* PARTIE 2 : STRUCTURE DU CONTENU (CORPS) */
					
			/* BlocM (middle => contenu de la page) */
#blocM {
width:523px;
height:auto;
/*border:#3366FF 2px solid;*/
z-index:200;
}

					/* PARTIE 3 : STRUCTURE DU FOOTER */
					
#down {
}

CODE CSS (index_php.css) :

#edito {
}

			/* Boite News */

.news {
width:523px;
height:auto;
/*border:#330033 2px solid;*/
}

.news_deb {
width:523px;
height:38px;
background-image:url(images/news_INDEX/boite_news_deb.gif);
}

.news_mid {
width:523px;
height:auto;
background-repeat:repeat-y;
background-image:url(images/news_INDEX/boite_news_mid.gif);
}

.news_fin {
width:523px;
height:40px;
background-image:url(images/news_INDEX/boite_news_fin.gif);
}

Je suis FRANCHEMENT désolé que ce soit si long, mais bon, je pense avoir commenté assez pour que vous puissiez vous y repérer.
Si vous arrivez à faire avec ça et arrivez à me donner une solution, en plus si elle est bonne Smiley cligne

Eh bien je vous remercie GRANDEMENT !

Bonne soirée à vous tous !

johon03

24 Aug 2007 à 19:14

up

kiki57

25 Aug 2007 à 03:58

bonjour Johon03,

Si tu fixais ta position de ton bloc de news ? Parce que tu le declare dans ton code html après le conteneur, donc c'est déja pour cela que le bloc de news est la en bas je pense ...

Dans ton css pour la class .news, tu défini juste la longueur mais pas de position, alors essaie de mettre la position en absolute et de fixer la position du bloc de news en fonction de la marge qu'il va y avoir entre la gauche et le haut de l'ecran


.news {
position:absolute;
top:Ypx;
left:Xpx;
.....
}

Sujet clos

CSS et mise en forme, CSS3

Boite des news qui ne veut pas se placer au milieu