Avis de spécialistes CSS HTML

Résolu

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention -
pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention - 9 mars 2011 à 07:19

Bonjour,

J'ai "bricolé", à partir de codes existants et en avançant à tâtons, le code qui suit. Bien entendu, je ne vous livre ici qu'une partie épurée du css et du html. Néanmoins, la partie placée ici vous permettra de vous rendre compte.
Ma question : Qu'en pensez vous? Est ce conforme aux standards WC3? Est ce lisible partout? Avantages et inconvénients de ce "design"?
Merci d'avance de vos réponses.
Le code :

<html>
<head>
<style type="text/css">

body {
	margin : 0px;
	background: #000000;
	font: 13px Verdana, Georgia, Garamond, Arial, sans-serif;
	color: #969696;
 	height: 100%;
	}
.haut {
 	position: absolute;
  	top: 0px;
	left:10%;
	height: 20%;
	width: 80%;
	}
#gauche {
	position: absolute;
  	top: 20%; 
 	left:10%;
  	width: 20%; 
  	height: 66%; 
	}

#droite {
	position: absolute;
	top: 20%; 
  	left: 30%; 
  	width: 60%;
	text-align:justify;
  	height: 75%; 
  	overflow: auto;
 	scrollbar-3dlight-color: #000;
 	scrollbar-arrow-color: #FC7F3C;
 	scrollbar-darkshadow-color: #6B854B;
 	scrollbar-face-color: #000;
 	scrollbar-highlight-color: #000;
 	scrollbar-shadow-color: #000;
 	scrollbar-track-color: #000;
 	scrollbar-base-color: #000;
 	}
#menu12 {
	width: 160px;
	font: 18px Cambria, Georgia, Garamond, Verdana, Arial, sans-serif;
	text-align: left;
	margin: 10px;
	}

#menu12 ul {
	list-style : none;
	margin: 0;
	padding: 0;
	}

#menu12 li a {
	height: 32px;
	text-decoration: none;
	} 

#menu12 li a:link, #menu12 li a:visited {
	color: #CCC;
	display: block;
	padding: 5px 0 0 0;
	}

#menu12 li a:hover {
	font: 22px Cambria, Georgia, Garamond, Verdana, Arial, sans-serif;
	font-style : italic;
	color: #FC7F3C;
	background-image:url(menu1.jpg);
	}
</style>
</head>

<BODY>



<img class="haut" src="banniere1.jpg">
	<div class="haut"></div>
	<div id="gauche">
		<div id="menu12">
			<ul>
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Pas accueil</a></li>
				<li><a href="#">Glop</a></li>
				<li><a href="#">Pas Glop</a></li>
				<li><a href="#">Ici rien</a></li>
				<li><a href="#">Pas plus</a></li>
				<li><a href="#">Vous y croyez?</a></li>
				<li><a href="#">Contact</a></li> 
			</ul>
		</div>
	</div>
	
	<div id="droite">
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
<p>ici du texte, ou bien autre chose...</p>
	</div>
</body>
</html>

Les pseudos images :
La bannière!!!
L'image menu...

Merci de vos avis multiples et éclairés.

Afficher la suite

A voir également:

Avis de spécialistes CSS HTML
Editeur html - Télécharger - HTML
Espace html ✓ - Forum HTML
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
Série spéciale just livebox fibre avis - Accueil - Box & Connexion Internet
Html download - Télécharger - HTML

5 réponses

Réponse 1 / 5

Apatik Messages postés 5304 Date d'inscription Statut Contributeur Dernière intervention 782

Bonjour,

Sans vraiment regarder, voici quelques généralités basiques:
-pour savoir si une page est valide W3C, tu dois la faire valider par le site: http://validator.w3.org/
-pour savoir si une page est compatible avec tout, tu dois la tester avec tout.

Désolé de ne pas tout lire de ton code, mais mes bases soint lointaines...

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention 2 761

salut,
merci déjà d'avoir répondu.
1- ton lien ne fonctionne pas, j'ai peut être merdé...
2- Pour vérifier si une page est valide, ne doit elle pas être déjà en ligne?
3- Le code du menu n'est pas important, je l'ai juste placé pour "faire beau"... Si j'ai placé ce code dans sa "totalité", c'est aussi pour que vous puissiez l'essayer chez vous en copiant/collant ce code dans un wordpad, juste pour tester...
Merci encore.

Apatik Messages postés 5304 Date d'inscription Statut Contributeur Dernière intervention 782

J'ai bettement pris le lien de cette astuce: https://www.commentcamarche.net/faq/1073-creer-un-site-beau-dynamique-et-respectueux-des-standards
S'il ne fonctionne pas, un tour sur google avec "validation w3c", et tu trouveras des validateurs. Je ne sais plus si l'officiel te permet de coller du code, ou si tu as besoin de mettre ton site en ligne.

Si vraiment tu en as besoin, je t'expliquerai comment le faire depuis chez toi.

(Pour tout ce qui est test, je suis au boulot, et on a que IE6, avec un internet ultra bridé... :s )

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention 2 761

J'ai essayé validator.org depuis google, le lien ne fonctionne pas non plus. Peut être bloqué par mon taf également...
Mon gros souci tiens dans le fait que les gens pour qui j'ai réalisé ce site souhaitent une mise en ligne ce soir. Je n'avais pas fini les tests préliminaires et donc je demandais ici l'avis de spécialistes.
Wait and See.
Merci à toi.

Réponse 2 / 5

RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention 1 360

Salut voila ta page valide XHTML Transitional !!

<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
/*<![CDATA[*/

    body {
    margin : 0px;
    background: #000000;
    font: 13px Verdana, Georgia, Garamond, Arial, sans-serif;
    color: #969696;
    height: 100%;
    }
    .haut {
    position: absolute;
    top: 0px;
    left:10%;
    height: 20%;
    width: 80%;
    }
    #gauche {
    position: absolute;
    top: 20%;
    left:10%;
    width: 20%;
    height: 66%;
    }

    #droite {
    position: absolute;
    top: 20%;
    left: 30%;
    width: 60%;
    text-align:justify;
    height: 75%;
    overflow: auto;
    scrollbar-3dlight-color: #000;
    scrollbar-arrow-color: #FC7F3C;
    scrollbar-darkshadow-color: #6B854B;
    scrollbar-face-color: #000;
    scrollbar-highlight-color: #000;
    scrollbar-shadow-color: #000;
    scrollbar-track-color: #000;
    scrollbar-base-color: #000;
    }
    #menu12 {
    width: 160px;
    font: 18px Cambria, Georgia, Garamond, Verdana, Arial, sans-serif;
    text-align: left;
    margin: 10px;
    }

    #menu12 ul {
    list-style : none;
    margin: 0;
    padding: 0;
    }

    #menu12 li a {
    height: 32px;
    text-decoration: none;
    }

    #menu12 li a:link, #menu12 li a:visited {
    color: #CCC;
    display: block;
    padding: 5px 0 0 0;
    }

    #menu12 li a:hover {
    font: 22px Cambria, Georgia, Garamond, Verdana, Arial, sans-serif;
    font-style : italic;
    color: #FC7F3C;
    background-image:url(menu1.jpg);
    }
    /*]]>*/
    </style>
    <title></title>
  </head>
  <body>
    <img class="haut" src="banniere1.jpg" alt="img" />
    <div class="haut"></div>
    <div id="gauche">
      <div id="menu12">
        <ul>
          <li>
            <a href="#">Accueil</a>
          </li>
          <li>
            <a href="#">Pas accueil</a>
          </li>
          <li>
            <a href="#">Glop</a>
          </li>
          <li>
            <a href="#">Pas Glop</a>
          </li>
          <li>
            <a href="#">Ici rien</a>
          </li>
          <li>
            <a href="#">Pas plus</a>
          </li>
          <li>
            <a href="#">Vous y croyez?</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
    <div id="droite">
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
      <p>
        ici du texte, ou bien autre chose...
      </p>
    </div>
  </body>
</html>

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention 2 761

Salut Rad,
Décidement tu es sur tous les fronts...
merci encore.
Ta réponse engendre encore plus d'interrogations de ma part...
1- Que signifie /*<![CDATA[*/ et /*]]>*/ ? Et pourquoi est ce indispensable?
2- Tu dis que ce code est valide XHTML transitionnal, pourtant tu débutes par :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Excuses moi ces questions de débutants...

Dernière question : que penses tu du rendu "pseudos frame" réalisé ici avec des div en position: absolute? Est ce que tout le monde (ou en tout cas le plus possible) va obtenir le même rendu?

Réponse 3 / 5

RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention 1 360

OUI EFFECTIVEMENT ;-)) c est moi qui est l habitude de faire du strict !

remplace

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

par

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

CDATA (pour "Character Data", données de caractère)

sert en fait en XML

en resume et pour simplifier, cela indique au navigateur de ne pas interpreter ces balises et de les rendre tel quel !

et comme le xhtml est du html et du xml il est preferable de l utiliser avec le CSS et les javascript embarque !

si tu faisais du html simple elle ne seraient pas presente , mais en xhtml si !

a+

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention 2 761

OK. Merci beaucoup.
A+ j'aurais surement encore besoin de tes services...

Réponse 4 / 5

bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention 2 409

salut !
si ça fonctionne:
http://validator.w3.org/#validate_by_uri+with_options
ou
http://validator.w3.org/#validate_by_upload+with_options
ou
http://validator.w3.org/#validate_by_input+with_options
mais bien au début ... ensuite faut pas trop s'acharner :)
il te suffit, pas exemple de mettre un code comme 'xiti' pour ne plus être "valid", par contre aucune différence pour les moteurs, heureusement
le mieux serait que tu mettes une page de test en ligne, pour voir à la fois la validation, et surtout les résultats sous différents navigateurs ...
tu mets ça dans une réponse ci-dessous et quand c'est ok tu reviens l'enlever pour éviter les liens morts ... (en mettant également dedans une balise noindex, nofollow pour les moteurs le temps du test ...)
@+

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention 2 761

Salut bg62,
Tu va bien?
Bon tu sais quoi? Pour ne pas me prendre la tête avec ça, je vais mettre le site en ligne ce soir et procèderais aux tests demain. M'étonnerais tout de même que ce site (dont tu connais un peu la teneur pour avoir vu l'ancien) atteigne le million de connexions cette nuit!!! Ou alors, si tel est le cas, revenez ici demain, je sabre le champ's pour tous!!!
Merci à toi.
sinon, juste au niveau du rendu pseudo iframe en div, tu en penses quoi?

bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention 2 409

???
mais si c'est le même genre que RAD m'avait aidé à mettre en place pour le mien, ça passe sans problème dans l'analyse des moteurs ...
@+

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention 2 409

ça y est ... en ligne ... pas mal le look , mais reste un sacré boulot :)
les images :

img/E et O_544 light.jpg

pas bon faut donner un nom aux images machin-truc.jpg pour less retrouver ensuite dans google images par exemple
les vidéos :
intègres au moins la plus récente qui est en 16/9ème avec le code de youtube
la bannière:
essaie de la rendre cliquable, que l'on puisse avoir aussi ce moyen pour revenir à l'index
... un p'tit favicon ce serait sympa :)
contact :
l'adresse mail va être spamée, fais un autre formulaire
page photos:
agrandies elles sont "rognées" ...
ensuite:
fait varier ton 'title' pour chaque page
mais une balise "description" à chacune aussi
mets du texte pour les moteurs (ou je sais ... mais y faut !!!)

prévois un pied de page au départ avec 1 ou 2 liens (retour haut de page, copyright 2011 .... ) pour y ajouter ensuite des échanges de liens
prévois aussi une page pour les 'partenaires ....

beau boulot ... et bon courage ....

@+

pijaku Messages postés 12263 Date d'inscription Statut Modérateur Dernière intervention 2 761

Salut,
Waou!! tout ça!!!
Bon je le savais pour une partie.
Merci déjà des commentaires. Je reviendrais vers toi pour de plus amples explications plus tard. Aujourd'hui, un serveur au boulot planté!!!!
Bonne journée
a+

Discussions similaires

Votre réponse

Discussions similaires