Webmaster Hub > 1 question

Version complète: sur le forum Webmaster Hub : 1 question

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

ZepX3

jeudi 28 février 2008 à 13:58

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

Wolf18

vendredi 29 février 2008 à 01:21

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

CODE

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

style.css

CODE

#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

vendredi 29 février 2008 à 12:44

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

vendredi 29 février 2008 à 12:58

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.