28172 sujets

CSS et mise en forme, CSS3

Mise en forme page web avec CSS

Bonjour, je suis "nouveau" dans la mise en page avec CSS...
J'ai cherché sur ce site si ma question n'avait pas déjà été abordée, mais c'est compliqué de trouver avec le moteur de recherche (quels mots clés utiliser ?)...

Bref, voici ma question... Je veux faire une mise en page qui ressemble en gros à ça :
upload/17091-essai.gif

Voici le code que j'ai fait :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Page de démonstration</title>
    <meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
	body   { margin: 0px 0 ; padding: 0 ; text-align: center ; background:  url(background.gif) repeat-x ; }
	div#content { width:800px; height:600px; margin: auto; border: 0; }
	div#top { height: 23px;  }
        div#navig { height: 101%; width: 740px ; background-image: url(fsc.gif); overflow: auto; margin: 0;}
	div#menu { height: 133px; }
	div#bottom { height: 70px; }
	.ecrit { font-family: georgia; font-size: 16px; font-weight: bold; }
    -->
    </style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="content">
<div id="top"><div align="center"><img src="top.gif" width="800" height="23" border="0"></div></div>
  
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
     <td width="30"><img src="left.gif" width="30" height="374" border="0"></td>
    <td width="740" height="374">
<div id="navig">
          <div align="center"> 
            <font class="ecrit"> <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              Essai</font><br>

            </div>
        </div>
      </td>
      <td width="30"><img src="right.gif" width="30" height="374" border="0"></td>
  </tr>
</table>

<div id="menu"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
	width="800" height="133" id="movie">
        <param name="movie" value="menu.swf">
        <embed src="menu.swf" quality="high"
	  width="800" height="133"
	  type="application/x-shockwave-flash"
	  pluginspage="http://www.macromedia.com/go/getflashplayer">
        </embed> 
      </object></div>
<div id="bottom"><img src="back.gif" width="800" height="70" border="0"></div>
</div>

</body>
</html>


Le problème est que les éléments ne s'affichent pas 100% raccords (ligne bizarre entre la zone "navig" et la zone de navigation en flash avec Mozilla Firefox, et avec IE, encore plus de problèmes)...

Quelqu'un voit-il où est le problème ? Je sèche vraiment à mort...

Merci de votre aide,
Cordialement,
Kriss37
Modifié par Kriss37 (23 Jun 2008 - 02:14)
Hello Kriss37 et bienvenue parmi nous Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile
Heyoan, j'avais lu le post sur les règles, surement pas assez concentré (j'avoue, j'étais pressé de poster moi-même, mais je tenais évidement à prendre connaissance des règles du forum).
J'ai édité mon post, merci de m'avoir prévenu, et j'espère ne pas avoir commis d'autres bévues...
Coridalement,
Kriss37
Kriss37 a écrit :
J'ai édité mon post
Merci Smiley cligne !

Alors quelques remarques :
- pour que ton document soit correctement déclaré en XHTML strict, il manque au minimum l'attribut xmlns à la balise <html> et pour bien faire les attributs xml:lang et lang. Pour voir un exemple, tu pourrais jeter un oeil au Squelettor.
- avec ce DOCTYPE, certains de tes attributs sont invalides (comme bgcolor et text dans <body>, align dans <div>, border dans <img>, width et height dans <td>) ainsi que les balises <font> et <embed> Smiley murf !
- tu utilises une balise <table> pour faire de la mise en forme alors que les CSS sont faites pour cela.

Le plus simple serait peut-être de reprendre les choses du début. Un petit tour sur cet article : comment débuter et trouver l'information ?, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.

A+ Smiley smile
Pfiooou, okay... merci pour ces infos... Moi, j'en étais encore au HTML et la mise en page par tableau, là, j'ai du pain sur la planche pour me mettre à jour, et niveau CSS aussi (j'utilisais juste des trucs de bases pour les liens hypertextes, mais là, c'est plus compliqué). J'ai donc tes liens, merci beaucoup. J'ai commencé à regarder, il va me falloir un peu de temps, argh !

Petite question, il vaut mieux que je reste avec du XHTML 1.0 strict et que je change les attributs invalides ?

Merci pour ton aide... (moi qui croyais que ce serait simple comme bonjour, bah, je me suis trompé)...

Cordialement,
Kriss37
Kriss37 a écrit :
Pfiooou, okay... merci pour ces infos... Moi, j'en étais encore au HTML et la mise en page par tableau, là, j'ai du pain sur la planche pour me mettre à jour, et niveau CSS aussi (j'utilisais juste des trucs de bases pour les liens hypertextes, mais là, c'est plus compliqué). J'ai donc tes liens, merci beaucoup. J'ai commencé à regarder, il va me falloir un peu de temps, argh !
Oui, un peu ! Mais après avoir lu les tutos Bases et indispensables, tu devrais assez vite te faire plaisir Smiley ravi !

Kriss37 a écrit :
Petite question, il vaut mieux que je reste avec du XHTML 1.0 strict et que je change les attributs invalides ?
Je dirais oui car, pour citer la conclusion de l'article sur les doctypes
a écrit :
...XHTML1.0 n'est pas plus difficile à apprendre qu'HTML4.01, au contraire : la syntaxe rigoureuse limite les risques d'erreurs ;
Bien sûr, dans certains cas il faudra en choisir un autre (par exemple pour pouvoir utiliser une balise iframe il faudra choisir du XHTML1.0 transitional, etc...)
Bon, bon, bon... j'ai passé le plus clair de la nuit et de la matiné à lire des tutos, des tonnes d'infos, tout ça... Ca me parait le plus souvent clair et j'ai l'impression d'avoir compris, mais bon, j'ai refais mon script, et pourtant ça "fonctionne" toujours pas...

Bon, alors voici ce que j'ai refais... est-ce mieux ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Page de démonstration</title>
    <meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
	body { margin: 0; padding: 0; border: 0;text-align: center; background: url(background.gif) repeat-x ; }
	div#content { width: 800px; height: 600px; margin: auto; border: 0; padding: 0;}
        div#navig { height: 374px; width: 740px ; background-image: url(fsc.gif); overflow: auto; margin: 0; padding: 0; }
	.top { width: 800px; height: 23px; margin: 0; padding: 0; border: 0;}
	.left { float: left; width:30; height: 374; }
	.right { float: right; width:30; height: 374; }
	.menu { width: 800px; height: 133px; margin: 0; padding: 0; border: 0; }
	.bottom { height: 70px; width: 800; height: 70; margin: 0; padding: 0; border: 0;}
	.ecrit { font-family: georgia; font-size: 16px; font-weight: bold; }
    -->
    </style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="content">
<img src="top.gif" class="top">
<img src="left.gif" class="left">
<img src="right.gif" class="right">
	
  <div id="navig"> 
    <p><font class="ecrit"> <br>
  texte</font></p>
  </div>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
	width="800" height="133" id="movie" class="menu">
        <param name="movie" value="menu.swf">
        <embed src="menu.swf" quality="high"
	  width="800" height="133"
	  type="application/x-shockwave-flash"
	  pluginspage="http://www.macromedia.com/go/getflashplayer">
        </embed> 
      </object>
<img src="back.gif" class="bottom"></div>


</body>
</html>


Le résultat fait que :
1) avec Mozilla, il y a un "trait" parasite entre l'image "top" et le bloc "navig", et le même "trait" paraiste entre l'animation flash "navig" et l'image "back"

2) avec IE, il y a juste le "trait" parasite du haut...

Vous voyez où je merde ?

Cordialement,
Kriss37
Modifié par Kriss37 (23 Jun 2008 - 12:38)
Sujet clos
Aller à