Discussion :

[Syzla]

Bien le bonjour!

Je suis habituellement autodidacte mais après avoir tourné pas mal d'heures en rond, je deviens frustré et j'ai donc besoin de votre aide de pro

Je suis débutant en CSS mais pour le nouveau design de mon blog, je voulais quelque chose de design

Voila comment j'ai procédé:

Header.php

1er <div> : dss
2ème <div> : dsssound
3ème <div> : dssimg
4ème <div> : vynil
5ème <div> : vynilp

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
      <div id="dss">
       <img src="http://syzla.webou.net/wp-content/themes/mystique/images/dss2.png" />
      </div>
 
      <div id="dsssound">
       <table width="430" border="0" cellspacing="3">
        <tr>
         <td><div align="right"><strong><span style="color:#72c1ff">Huoratron</span></strong> <strong><span style="color:#f99b0c">-</span></strong> <strong><span style="color:#c2dc15">Corporate Occult</span></strong></div>
         </td>
        </tr>
        <tr>
         <td><object height="81" width="100%"> <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fsyzla%2Fhuoratron-corporate-occult"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fsyzla%2Fhuoratron-corporate-occult" type="application/x-shockwave-flash" width="100%"></embed> </object></span> 
        </td>
       </tr>
      </table>
      </div>
 
      <div id="dssimg">
       <a href="http://soundcloud.com/syzla/huoratron-corporate-occult" target="_blank"><img src="http://syzla.webou.net/wp-content/uploads/2009/12/corporate_occult.png" /></a>
      </div>
 
      <div id="vinyl">
       <img src="http://syzla.webou.net/wp-content/themes/mystique/images/vinylp.png" />
      </div>
 
      <div id="vinylp">
      <table width="480" border="0" cellspacing="2">
       <tr>
        <td><strong><span style="color:#72c1ff">More</span> <span style="color:#f99b0c">vinyls</span> <span style="color:#72c1ff">on</span> <a href="http://www.decks.de" target="_blank">Decks</a></strong></td>
       </tr>
       <tr>
        <td><a href="http://www.decks.de/t/proxy-who_are_you-8000/bu9-ze" target="_blank"> <img class="alignnone size-full wp-image-525" src="http://syzla.webou.net/wp-content/uploads/2009/12/bu9-ze2.jpg" alt="" width="81" height="81" /></a> <a href="http://www.decks.de/t/huoratron-corporate_occult/buh-mj" target="_blank"> <img class="alignnone size-full wp-image-525" src="http://syzla.webou.net/wp-content/uploads/2009/12/corporate_occult.jpg" alt="" width="81" height="81" /></a> <a href="http://www.decks.de/t/strip_steve-delta_disco/bug-v6" target="_blank"> <img class="alignnone size-full wp-image-525" src="http://syzla.webou.net/wp-content/uploads/2009/12/bug-v62.jpg" alt="" width="81" height="81" /></a> <a href="http://www.decks.de/t/sound_of_stereo-zipper_ep/buj-5e" target="_blank"><img class="alignnone size-full wp-image-73" src="http://syzla.webou.net/wp-content/uploads/2009/12/buj-5e2.jpg" alt="bt2-m02" width="81" height="81" /></a> <a href="http://www.decks.de/t/boys_noize-starter/bte-6y" target="_blank"><img class="alignnone size-full wp-image-68" src="http://syzla.webou.net/wp-content/uploads/2009/10/bte-6y3.jpg" alt="" width="81" height="81" /></a></td>
       </tr>
      </table>
      </div>

Style.CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
/* Syzla's Widgets */
 
#dss{padding:.10px 0 0 114px;margin:auto;position:absolute;display:block;}
#dsssound{padding:20px 0 0 140px;margin:auto;position:absolute;display:block;}
#dssimg{padding:43px 0 0 545px;margin:auto;position:absolute;display:block;}
#vinyl{padding:0 0 0 1000px;margin:auto;position:absolute;display:block;}
#vinylp{padding:20px 0 0 702px;margin:auto;position:absolute;display:block;}

Tout me semblait bien sur mon 19' mais quand j'ai acheté dernièrement un 24', voila ce que ça donne:



N'ayant pas cherché plus loin que le bout de mon nez, je n'avais pas pensé que les fonctions <margin> et <padding> s'adapte à la résolution de l'utilisateur si,
évidemment, elles ne sont pas bien configurées (ce qui est le cas ici je pense ).

En bref, le plus simple serait de partir du centre avec les 2 blocks et de modifier selon ma volonté? En même temps, je m'avance sans savoir..

Je sollicite votre savoir-faire pour éclairer ma lanterne
L'URL de mon blog pourrait peut-être vous être utile: http://www.syzla.net

A bientôt et merci d'avance!

[Erwan31]

Bonjour Syzla,
Normal, tu dois imbriquer tous ces div dans une div ayant la class .page-content
qui est un block de 980px centré grâce à des marges latérales auto, au passage le width:100%; est inutile.

J'ai du mal a croire que Wordpress générère un DTD XHTML1.1, remplace le par une DTD XHTML1.0. Le 1.1 ne ne sert à rien.
Pourquoi utiliser des frame?

Juste un conseil, évite auatnt que possible d'utiliser le positionnement absolue, c'est plus facile certes mais en même temps plus problématique...
Place tes éléments en priorité à l'aide des marges, ensuite via le positionnement relatif (si les marges ne suffisent pas) tous ça couplé éventuellement au comportement flottant (propriété float) et enfin via le positionnement absolue quand il n'y a pas d'autres solutions.
Tu peux te former par des tuto (ici par exemple).

Tu n'as pas besoin de coupler le positionnement absolue (ou un élément flottant) à un display:block puisque ceux-là génèrent une boite de block de manière transparente.
Une div (division) est un élément de niveau block (déjà doté d'un display:block par les style par défaut du navigateur) donc tu n'as pas besoin de lui ajouter cette déclaration

Bon courage!

[Syzla]

Salut Erwan,

J'aurais dû y penser avant.. Inclure tout ça dans un <div> qui est aligné, le .page-content!

J'essaie ça dès que j'ai un peu de temps et je vais lire tes conseils pas à pas
Tu m'es d'une aide précieuse, un grand merci

(je n'oublierai pas de mettre résolu pour le post si c'est le cas)

[Syzla]

Normal, tu dois imbriquer tous ces div dans une div ayant la class .page-content

C'est fait et ça marche à la perfection!

au passage le width:100%; est inutile.

C'est noté

Juste un conseil, évite auatnt que possible d'utiliser le positionnement absolue, c'est plus facile certes mais en même temps plus problématique...
Place tes éléments en priorité à l'aide des marges, ensuite via le positionnement relatif (si les marges ne suffisent pas) tous ça couplé éventuellement au comportement flottant (propriété float) et enfin via le positionnement absolue quand il n'y a pas d'autres solutions.

La fonction absolue est quand même bien pratique car si je ne me trompe pas, le <div> génère un retour automatique à la ligne.
Tout à fait en accord avec toi, positionner un élément grâce aux marges est beaucoup plus propre et précis.
Je ne suis pas fan du float, pratique pour des block de bannière ou autres mais je trouve la fonction relativement hasardeuse.

Tu n'as pas besoin de coupler le positionnement absolue (ou un élément flottant) à un display:block puisque ceux-là génèrent une boite de block de manière transparente.
Une div (division) est un élément de niveau block (déjà doté d'un display:block par les style par défaut du navigateur) donc tu n'as pas besoin de lui ajouter cette déclaration

On en apprend tous les jours, j'essaierai de m'en souvenir à l'avenir

En tout cas, grand merci à toi Erwan, tout est rentré dans l'ordre.
Parfois, il vaut mieux demander aux connaisseurs que de se casser la tête tout seul dans son coin et ne jamais avoir de résultat cohérant

A bientôt et bonne continuation!

[Erwan31]

La fonction absolue est quand même bien pratique car si je ne me trompe pas, le <div> génère un retour automatique à la ligne.

Le positionnement absolu aussi Sauf sur IE7 et versions antérieures (le moteur de rendu d'IE8 ayant été revu dans son intégralité).

Je ne suis pas fan du float, pratique pour des block de bannière ou autres mais je trouve la fonction relativement hasardeuse.[/B]

Éviter le texte vert fluo sur fond clair, c'est pas très lisible
Le comportement flottant (même s'il est plus difficile à manier au départ)
est préférable dans la plupart des cas au positionnement absolu pour des raisons liés à l'accessibilité des contenus :

> la non linéarisation des contenus et donc inaccessibilité visuelle en cas de diminution du viewport ou de visualisation sur petites écrans
> les risques de chevauchement de contenus et de non dégagement des blocs se trouvant en dessous des blocs positionnés de manière absolue en cas de zoom texte.
> Possibilité de perturber l'ordre naturel de tabulation au cas ou l'ordre d'affichage des bloc est différents de l'ordre des blocs dans le code.

Il y a des chances que tu ne comprennes pas tout mais j'ai du mal à trouver des termes plus accessibles et n'ai pas le temps de préciser d'avantage, désolé.
Si toutefois tu souhaites mieux comprendre, tu peux me mp