1 question

ZepX3 · 28 Février 2008

Salut

Voici une capture d'écran de mon site en cour de construction.

J'aimerais mettre la partie des news (le texte en gris) du côté droit du site et faire monter la partie Nouveautés à même égalité mais à gauche.

Comment faire? J'ai essayé mais en vain.

Mon code PHP :

CODE

   <body>
       <div id="header">
       </div>
	   <div id="menubar">
  <a href="/forums">Forums</a>
  <a href="/fiches.php">Fiches de jeux</a>
  <a href="aide.php">Aide</a>
  </div>
       <div id="contenu">
           <div id="titre">Titre de la new</div>
       
           <p>
               Blablablabla</p>
       </div>
	       <div id="nouveautes">
           <div id="titrenouv">Nouveautés</div>
       
           <p>
               Ici les nouveautés<br />
           </p>
		 </div>
       </div>
	   <div id="footer">
       </div>
   </body>

Et mon code CSS

CODE

body
{
   width: 900px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-color: #DBDBDB;
}
#header
{
   width: 900px;
   height: 220px;
   background-image: url("/design/images/header.jpg");
   background-repeat: no-repeat;
}
#menubar
{
   width: 898px;
   height: 25px;
   background-image: url("/design/images/menubarback.jpg");
   border: 1px solid #A8A6A7;
   text-align: right;
   color: #7A7A7A;
}
#menubar a
{
   text-align: right;
   background-image: url("/design/images/menubarback.jpg");
   padding-left: 3px;
   padding-right: 3px;
   text-decoration: none;
   margin-left: 10px;
   color: #5F5F5F;
   height: 25px;
}
#menubar a:hover
{
   text-align: right;
   background-image: url("/design/images/menubarback-on.jpg");
   padding-left: 3px;
   padding-right: 3px;
   text-decoration: none;
   color: #5F5F5F;
   height: 25px;
}
#contenu
{
   padding: 5px;
   color: #838383;
   background-image: url("/design/images/topcontent.jpg");
   background-repeat: no-repeat;
   background-color: #FFFFFF;
   width: 888px;
   border-left: 1px solid #A8A6A7;
   border-right: 1px solid #A8A6A7;
}
#titre
{
   background-image: url("/design/images/titleback.jpg");
   padding: 5px;
   font-size: 16px;
   color: #000000;
}
#nouveautes
{
   float: left;
   width: 120px;
}
#nouveautes titrenouv
{
   float: left;
   width: 120px;
}
#footer
{
   width: 900px;
   height: 50px;
   background-image: url("/design/images/footer.jpg");
   background-repeat: no-repeat;
}

Merci

Modifié 28 Février 2008 par ZepX3

**Wolf18** · 29 Février 2008

En gros il faut que tu fasses deux blocks distincts un peu comme ci-dessous et que tu y places respectivement leur contenu (ca sera plus simple et moins répétitif) :

index.php

<div id="nouveautes">les nouveautés ici</div>
<div id="contenu">le texte de ta page là</div>
<div class="clear"></div>

style.css

#nouveautes {
   float:left;
   width:120px;
}
#contenu {
   float:right;
}
.clear {
   clear:both;
}

Ca devrait fonctionner si j'ai encore toute ma tête à l'heure qu'il est.

ZepX3 · 29 Février 2008

Salut en fait ce n'est pas mauvais, mais je l'avais mal fait... Je viens de trouver la solution! Je devais mettre le bloc news et À la une dans un même bloc principal, alors une fois ceci fait j'ai mis float:left à "À la une" et float:right aux news et le tour est joué.

Merci

baulet · 29 Février 2008

vérifie bien l'affichage dans firefox et IE, car les "float" peuvent parfois réserver des surprises

Connexion

1 question

Sujets conseillés

ZepX3

Wolf18

ZepX3

baulet

Veuillez vous connecter pour commenter

Parcourir

Activité