Problème de positionnement HTML

rollordie Messages postés 101 Statut Membre -  
rollordie Messages postés 101 Statut Membre -
Bonjour, Voila c'est surement très simple mais je ne sais pas comment faire ^^

Voici mon site : http://dragonballcook.free.fr( Url test )

Vous voyez que dans le corps il y a une pub, et en dessous du texte, et bien j'aimerais tout simplement que ce texte s'aligne en haut et non en dessous à cause de la pub.

Voila merci !

4 réponses

  1. Utilisateur anonyme
     
    Bonjour, mets sur le CSS de ton texte :

    #texte {
    width: la largeur entre le bord gauche et le début de l'image en px;
    float: left;
    }
    0
  2. rollordie Messages postés 101 Statut Membre
     
    J'ai essayer et sa me donne ça...

    regarde mon code : 

    /*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="https://openclassrooms.com/fr/">http://www.siteduzero.com</lien>
*/

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-color: #bbbbbb;
}

/* L'en-tête */

#en_tete
{
   width: 760px;
   height: 150px;
   background-image: url("header.png");
   background-repeat: no-repeat;
   margin-bottom: 0px;
}


/* Le menu */


.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url("topMenuImages.png") repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("topMenuImages.png") 0px -30px no-repeat; outline:none;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("../images/topMenuImages.png") 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("topMenuImages.png") 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url("topMenuImages.png") 100% -90px no-repeat;}


/* Le corps de la page */

#corps
{
   margin-left: 0px;
   margin-bottom: 20px;
   padding: 5px;
   
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 1px solid black;
}

#texte{
   
   
width: 430px;
float: left; 
   
}

#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

   background-image: url("images/titre.png");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

#droite{
   
   padding-left: 450px;
}



/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   clear: both;

   text-align: center;

   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}


    Et HTML 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Sortie-Jeux | Calendrier des prochains jeux video.</title>
       <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
 
   <body>
 
       <!-- L'en-tête -->
 
       <div id="en_tete">
           
       </div>
 
       <!-- Les menus -->
 
       <ul class="menu">
  <li><a href="https://www.google.fr/?gws_rd=ssl" class="active"><span>Home</span></a></li>
  <li><a href="https://www.google.fr/?gws_rd=ssl"><span>Services</span></a></li>
  <li><a href="/about"><span>About</span></a></li>
  <li><a href="/contact"><span>Contact</span></a></li>
</ul>
 
       <!-- Le corps -->
 
       <div id="corps">
        
        <div id="droite">
           <script type="text/javascript"><!--
google_ad_client = "pub-6764225286581748";
/* 300x250 */
google_ad_slot = "8248547874";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
           </div>
        
        
           <div id="texte"
       
           <p>
               Bienvenue sur mon super site !<br />
               Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
           </p>
       
           <h2>A qui s'adresse ce site ?</h2>    
           <p>
               A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
               Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
           </p>
           
           
       </div>
       </div>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
       </div>
 
   </body>
</html>
    0
  3. epitale Messages postés 4115 Date d'inscription   Statut Membre Dernière intervention   920
     
    bonjour rollordie
    tu veux le text avant la pub ?
    <div id="corps"> ton txt </div>
    <div id="droite"> ta pub </div>
    //<div class="clear"></div>

    tu veux le text à gauche de la pub ?
    en css
    #corps{float:left;}
    #droite{float:left;}
    .clear{clear:both;} et décommenter la div clear
    0
  4. rollordie Messages postés 101 Statut Membre
     
    Super ;)
    0

Discussions similaires

Xiaomi/Redmi - problème de réseau et SMS de positionnement
Bashiok -
Bashiok -

1 réponse
tests du greta
yass -
yassir -

9 réponses
Apache2 accès à autre que /var/www/html/index.html
merithes -
mamiemando -

3 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
Helif -

15 réponses
test greta
nyla123 -
nyla123 -

2 réponses