Problème avec le widget twitter

Question

marj0jo

8 Jul 2011 à 16:37

Bonjour,

je suis en train de réaliser un site pour mon "plaisir" avec deus acteurs que j'aime beaucoup. bref... là n'est pas la question. J'ai en faite un problème avec le widget de [/sites/details/twitter.com twitter], j'aimerais qu'il soit sur l'image "twitter" (le sidebars) mais il se trouve malheureusement toujours en dessous malgrés mes changements de valeurs en "margin-top"

voici mon site : [http://austin-sophia.voila.net]

et le code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]"> 
<html xmlns="[http://www.w3.org/1999/xhtml]" xml:lang="fr" > 
   <head> 
       <title>Austin Nichols & Sophia Bush</title> 
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.[/contents/css/cssclass.php3 css]" /> 
   </head> 
   <body> 
   
  <div id="en_tete"><!--HEADER--> 
   <div class="box1"> 
  <a id="box-link" href="images/header.png"></a> 
  <p></p> 
  </div> 
    </ div> 


  
</div> 
   <div id="menu"><!--MENU--> 
  <div class="twitter"> 
  <p class="widget"><script src="[http://widgets.twimg.com/j/2/widget.js]"></script> 
<script src="[http://widgets.twimg.com/j/2/widget.js]"></script> 
<script> 
new TWTR.Widget({ 
  version: 2, 
  type: 'profile', 
  rpp: 3, 
  interval: 6000, 
  width: 100, 
  height: 50, 
  theme: { 
    shell: { 
      background: '#fad978', 
      color: '#ffffff' 
    }, 
    tweets: { 
      background: '#ffe0ea', 
      color: '#000000', 
      links: '#f213a4' 
    } 
  }, 
  features: { 
    scrollbar: true, 
    loop: false, 
    live: false, 
    hashtags: true, 
    timestamp: true, 
    avatars: false, 
    behavior: 'all' 
  } 
}).render().setUser('aus10nichols').start(); 
</script></p> 

  </div> 
   <div class="elite"> 
   </div> 
   <div class="partenaires"> 
   </div> 
   <div class="statistiques"> 
   </div> 
   <div class="disclamer"> 
   </div> 
   </div> 
    
    
    
       
    
   <div id="corps"><!--CORPS--> 
 <p class="news">bla bla bla bla bla bla 
   </p> 
    <p class="news2"> 
   </p> 
   <p class="news3"> 
   </p> 
   <p class="news4"> 
   </p> 
   <p class="news5"> 
   </p> 
   <p class="news6"> 
   </p> 
      
    
   </div>  
    
   
        
   </body> 
</html>

et le css :

/*LE FOND*/ 

body 
{ 
   width: 1000px; 
   margin: auto;  
   margin-top: 10px; 
   margin-bottom: 10px;     
   background-color: #F9CD9E; 
   background-image: url("images/background.jpg"); 
   background-repeat: no-repeat; 
   border-style: none; 
} 

/*MENU*/ 

#menu 
{ 
   float: left;  
   width: 350px;  
   height: 500px; 
   margin: 0 auto; 
   margin-top: 50px; 
   background-image: url("images/projets.png"); 
   background-repeat: no-repeat; 
} 

.twitter 
{ 
   float: left;  
   width: 350px;  
   height: 500px; 
   margin: 0 auto; 
   margin-top: 550px; 
   background-image: url("images/twitter.png"); 
   background-repeat: no-repeat; 
} 

.elite 
{ 
   float: left;  
   width: 350px;  
   height: 500px; 
   margin: 0 auto; 
   margin-top: 50px; 
   background-image: url("images/elite.png"); 
   background-repeat: no-repeat; 
} 

  
.widget 
{ 
   margin: 0 auto; 
   margin-top: 20px; 
   margin-left: 10px; 
} 

.partenaires 
{ 
   float: left;  
   width: 350px;  
   height: 500px; 
   margin: 0 auto; 
   margin-top: 60px; 
   background-image: url("images/partenaires.png"); 
   background-repeat: no-repeat; 
} 

.statistiques 
{ 
   float: left;  
   width: 350px;  
   height: 500px; 
   margin: 0 auto; 
   margin-top: 50px; 
   background-image: url("images/statistiques.png"); 
   background-repeat: no-repeat; 
} 

.disclamer 
{ 
   float: left;  
   width: 350px;  
   height: 500px; 
   margin: 0 auto; 
   margin-top: 50px; 
   background-image: url("images/disclamer.png"); 
   background-repeat: no-repeat; 
} 



/*CORPS*/ 


#corps 
{ 
   width: 550px; 
   height: 550px; 
   margin-auto: 0px; 
   margin-left: 400px;  
   margin-top: 40px;  
   padding: 20px;  
   color: black; 
   background-image: url("images/corps.png"); 
   background-repeat: no-repeat; 
} 

#corps .news2 
{ 
   width: 550px; 
   height: 550px; 
   margin-top: 500px;  
   margin-left: -10px; 
   color: black; 
   background-image: url("images/corps.png"); 
   background-repeat: no-repeat; 
} 

#corps .news3 
{ 
   width: 550px; 
   height: 550px; 
   margin-top: -10px;  
   margin-left: -10px; 
   color: black; 
   background-image: url("images/corps.png"); 
   background-repeat: no-repeat; 
} 

#corps .news4 
{ 
   width: 550px; 
   height: 550px; 
   margin-top: -10px;  
   margin-left: -10px; 
   color: black; 
   background-image: url("images/corps.png"); 
   background-repeat: no-repeat; 
} 

#corps .news5 
{ 
   width: 550px; 
   height: 550px; 
   margin-top: -10px;  
   margin-left: -10px; 
   color: black; 
   background-image: url("images/corps.png"); 
   background-repeat: no-repeat; 
} 

#corps .news6 
{ 
   width: 550px; 
   height: 550px; 
   margin-top: -10px;  
   margin-left: -10px; 
   color: black; 
   background-image: url("images/corps.png"); 
   background-repeat: no-repeat; 
} 


.box1  
{  
  position: relative;  
  width: 1000px;  
  height: 550px;  
  background-image: url("images/header.png");  
  background-repeat: no-repeat;  
} 
   
#box-link  
{  
  position: absolute;  
  top: 8px;  
  left: 20px;  
  width: 1000px;  
  height: 550px;  
  background-color: transparent;  
}

<config>Mac OS X / Safari 533.19.4</config>
Modifié par marj0jo (08 Jul 2011 - 16:39)

gabrielwebmaster

8 Jul 2011 à 17:26

Si j'ai bien compris ta question ...
Tu devrais mettre ton widget à l'intérieur de ta box1 et dans le css supprimer le float:left , ainsi que le width:350px. Puis t'ajustes, ton widget avec des padding.

Mais de façon plus global , t'es mal barrée.
Tu ne respectes pas le flux de la page et le découpage du design n'est pas conçu pour une bonne intégration. Je te conseillerais de repartir à zéro et d'y aller progressivement.

Si t'as besoin de conseille, n'hésites pas.

Tchao

marj0jo

8 Jul 2011 à 18:01

j'avoue je débute mais j'entamme (si je trouve une entreprise) une formation d'integrateur/webdesigner au octobre.

par contre la box 1 c'est pour un essaie (pourrie j'avoue) pour mon image map.
c'est donc ça qui bloquerait ? si je supprime ça marchera mieux ?

gabrielwebmaster

8 Jul 2011 à 18:19

Non , en fait j'ai mal compris ta question:
il suffit de remplacer le css de ta div twtr-widget-1 par:

.twtr-widget {
font-family: "lucida grande",lucida,tahoma,helvetica,arial,sans-serif !important;
font-size: 12px !important;
margin: auto;
width: 150px;
}

gabrielwebmaster

8 Jul 2011 à 18:23

Sinon, utilises des tableaux pour la mise en page de ton site! Ça te faciliteras la vie et quand tu seras plus habituée, tu pourras à utiliser le css pour placer tes divs.

marj0jo

8 Jul 2011 à 18:25

je n'ai pas compris.
je n'ai pas de div: ".twtr-widget"

~~supprimé~~

8 Jul 2011 à 18:30

gabrielwebmaster a écrit :
Sinon, utilises des tableaux pour la mise en page de ton site! Ça te faciliteras la vie et quand tu seras plus habituée, tu pourras à utiliser le css pour placer tes divs.

C'est une blague ?

gabrielwebmaster

8 Jul 2011 à 18:31

Si tu copies-colles ça dans ta feuille css , ça devrait le faire ...

.twtr-widget {
margin: auto;
width: 150px;
}

gabrielwebmaster

8 Jul 2011 à 18:34

jb_gfx a écrit :

C'est une blague ?

heu .. non ?!

~~supprimé~~

8 Jul 2011 à 18:38

Ah, tu trouves normal sur un site dédié aux standards, aux bonnes pratiques et à l'accessibilité de suggérer à un débutant de remplacer sa mise en page en CSS par des tableaux ? Et y'a rien qui te choque ?

marj0jo

8 Jul 2011 à 18:44

nikel ça marche merci !

jb_gfx,
lol ne t'inquiète pas je comtpe pas faire des tableau, tout simplement parce que le css/html doit rentrer dans mon crâne un peu plus pour être au top pour ma formation et pour cela je doit m'entraîner.

gabrielwebmaster

8 Jul 2011 à 18:46

jb_gfx a écrit :
Ah, tu trouves normal sur un site dédié aux standards, aux bonnes pratiques et à l'accessibilité de suggérer à un débutant de remplacer sa mise en page en CSS par des tableaux ? Et y'a rien qui te choque ?

Je n'ai pas envie de rentrer dans ce débat ... Tu peux si tu le souhaites lui donner des conseilles pour qu'elle améliore son site...

marj0jo

8 Jul 2011 à 19:01

par contre je veut mettre un deuxième widget (pour le deuxième acteur), comment je fait ?
car du coup le deuxième se place pas bien vu qu'il y à déjà un premier widget du même nom.

Arialia

8 Jul 2011 à 22:08

mets-le dans un autre conteneur ( une div par widget)

Pour ma part je les avais mis en fixed sur mon (ancien) blog (http://arialia.dev-fr.org/ ) qui ne me permettait pas de les mettre où je voulais vraiment

Oh le widget liste pourrait être sympa avec les tweets des deux acteurs mélangés ?

marj0jo

8 Jul 2011 à 22:14

Arialia a écrit :
mets-le dans un autre conteneur ( une div par widget)

Pour ma part je les avais mis en fixed sur mon (ancien) blog (http://arialia.dev-fr.org/ ) qui ne me permettait pas de les mettre où je voulais vraiment

Oh le widget liste pourrait être sympa avec les tweets des deux acteurs mélangés ?

ah oui ça pourrait etre sympa, comment on fait ça ?

Arialia

8 Jul 2011 à 23:00

sur ton compte twitter tu crée une liste où tu mets tes deux acteurs, après dans les widgets tu choisi le widget liste, tu pourra alors choisir ta liste , le reste c'est pareil que le normal.

marj0jo

8 Jul 2011 à 23:11

Arialia a écrit :
sur ton compte twitter tu crée une liste où tu mets tes deux acteurs, après dans les widgets tu choisi le widget liste, tu pourra alors choisir ta liste , le reste c'est pareil que le normal.

oui je viens tout juste de trouver ! merci en tout cas c'est plus jolie ainsi !

Sujet clos

CSS et mise en forme, CSS3

Problème avec le widget twitter