5568 sujets

Sémantique web et HTML

Votre opinion sur mon test, svp

Pages :
(reprise du message précédent)

Jason a écrit :
Le choix de la police n'est pas un souci... (Enfin ça dépend, j'espère que tu n'es pas flic... Smiley lol )
Mais que fais la police ! http://www.comicsanscriminal.com/

a écrit :
Même si je déplace le LI en question, chez moi, rien ne change.

Question :
A quoi se base le script pour déterminer la page actuelle (current) ?

Merci

Il faut simplement changer de place class="current"
a écrit :
Il faut simplement changer de place class="current"

Mais on m'a indiqué plus haut que dans ce script, on n'utilisait plus les class=""

Merci

Edit :
Par contre, je garde de coté le lien de ton site utilisé ci-dessus :
http://jsfiddle.net/
Épatant pour tester un script...

Edit2 :
a écrit :
Mais que fais la police ! http://www.comicsanscriminal.com/

Comme tout est en anglais, c'est pas pour moi... Smiley lol Smiley lol Smiley biggol
Modifié par Jason (07 May 2013 - 20:09)
Jason a écrit :
Il faut simplement changer de place class="current"
Mais on m'a indiqué plus haut que dans ce script, on n'utilisait plus les class=""

C'était pour simplifier ton code et pour que tu comprenne le C "cascade" qu'il y a dans ccs. Donc utilise cette class comme préconisé plus haut, c'est ce qu'il y a de plus simple.
Modifié par benj (07 May 2013 - 20:17)
OK, merci bien pour ces infos supplémentaires.

Je fais des essais, et je repasse...

@+


Edit 1 :
Bon évidemment, avec class="current", ça fonctionne, mais c'est normal...

Comme ça m'a été indiqué plus haut, il y aurait encore des modifications à faire pour alléger le CSS...
Plus en détail, ça peut donner quoi ?

De plus, je viens de remarquer que mon menu en DIV UL LI est moins haut (sur le total) que le même menu en TABLE. J'ai pourtant utilisé les mêmes hauteurs en px...
Ça peut être dû à quoi ?

Edit2 :
Pour centrer un DIV sur la page, que vaut-il mieux :

	margin: 0 auto;

ou

	margin: 0px;
	margin-left: auto;
	margin-right: auto;


Ah oui, après tout ce que j'ai pu lire et ce que j'ai entendu, je suis tombé la-dessus par hasard et j'ai été plutôt surpris... En clair, tout n'est finalement qu'appréciation de chacun Smiley lol
http://www.alsacreations.com/actu/lire/369-arretons-de-remplacer-systematiquement-les-tableaux-par-des-div.html

Merci
Modifié par Jason (08 May 2013 - 11:00)
Jason a écrit :
De plus, je viens de remarquer que mon menu en DIV UL LI est moins haut (sur le total) que le même menu en TABLE. J'ai pourtant utilisé les mêmes hauteurs en px...
Ça peut être dû à quoi ?
Pour ça faudrait voir ton code au complet.

Jason a écrit :
Comme ça m'a été indiqué plus haut, il y aurait encore des modifications à faire pour alléger le CSS...
Plus en détail, ça peut donner quoi ?

exemple ton code actuel:
/* Classe DIV Central Menu et Texte */
.Div_central {
	border-style: none;
	border-color: #000000;
	border-width: 0px;
	background-color: none;
	width: 900px;
	height: 100%;
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
 	display: block;
}

version allégé:
/* Classe DIV Central Menu et Texte */
.Div_central {
	border: none;
	background: none;
	width: 900px;
	height: 100%;
	margin: 0px auto;
	padding: 0px;
 	display: block;
}

J'ai pas regardé ton code en profondeur, mais je pense même que les propriété border et background sont inutile ici.

Jason a écrit :
Pour centrer un DIV sur la page, que vaut-il mieux :
	margin: 0 auto;

ou

	margin: 0px;
	margin-left: auto;
	margin-right: auto;

	margin: 0 auto;
;)


Jason a écrit :
Ah oui, après tout ce que j'ai pu lire et ce que j'ai entendu, je suis tombé la-dessus par hasard et j'ai été plutôt surpris... En clair, tout n'est finalement qu'appréciation de chacun Smiley lol
http://www.alsacreations.com/actu/lire/369-arretons-de-remplacer-systematiquement-les-tableaux-par-des-div.html

Ouais, ben en fais ce que ça dit c'est d'utiliser les div et les tableaux à bon escient. Donc il n'y a pas de mal à utiliser un tableau pour des donné tabulaire, c'est même prévue pour ça. Mais faire un site avec une mise en page fait avec des tableaux est à éviter. Utiliser les div à la place. Et maintenant avec l'arriver de HTML5, utiliser les balise prévu pour ça (header, nav, footer, main, section, etc.)
Bonjour,

Merci juliesunset pour ce complément d'info...

Ceci dit, j'étais assez content de cette première étape du menu, mais...

...pour le reste j'accumule les problèmes, alors que je m'attendais justement à ce que ça soit plus simple. Smiley bawling

J'ai des DIV qui se trouvent là ou il ne faut pas et des background-color qui chevochent les autres DIV si j'utilise des height:100%...
D'habitude, mes DIV se plaçaient toujours dans l'ordre, les unes après les autres (sauf en Absolute, évidemment).
Pour avoir lu pas mal de sujets, c'est forcément un problème de CSS, mais là je sature.
Je pensais pouvoir terminer la base aujourd'hui, ça ne sera pas le cas...

Je repasse dès que j'ai le temps de m'y remettre.

Merci à tout le monde

@+
Modifié par Jason (08 May 2013 - 16:19)
Salut!
Pour t'aider il ma falloir l'intégralité de ton code, html et CSS.

a écrit :
J'ai des DIV qui se trouvent là ou il ne faut pas et des background-color qui chevochent les autres DIV si j'utilise des height:100%...
Normalement tu ne devrait pas avoir à utilisé de height: 100%. Je pense que tu as encore du mal avec la notion de cascade, ça pourrait expliquer les conflit au niveau du css.
Bonsoir,

Je repasse en coup de vent...

a écrit :
Normalement tu ne devrait pas avoir à utilisé de height: 100%.

Dans ce cas, il faut indiquer une hauteur en pixel...

Mais j'aurais voulu que la hauteur s'adapte automatiquement au texte quelle que soit la page, sans avoir à calculer une hauteur en pixel.

a écrit :
Pour t'aider il ma falloir l'intégralité de ton code, html et CSS.

Je n'ai pas eu le temps de m'y remettre cet après-midi...
Ceci dit, j'ai découvert un « clear: both; » qui m'a remis un peu d'ordre dans les DIV, mais ça ne corrige pas la hauteur...

A bientôt pour la suite...

Merci

@+
Jason a écrit :
Dans ce cas, il faut indiquer une hauteur en pixel...

Mais j'aurais voulu que la hauteur s'adapte automatiquement au texte quelle que soit la page, sans avoir à calculer une hauteur en pixel.
Pourquoi vouloir mettre une hauteur ? Par défaut height est à auto. C'est à dire qu'il s'adapte au contenu.
Bonjour,

a écrit :
Pourquoi vouloir mettre une hauteur ? Par défaut height est à auto. C'est à dire qu'il s'adapte au contenu.

Oui, mais j'explique brièvement :

J'ai un DIV principal qui contient 2 DIV gauche (menu) et droit (texte) en Float.
Celui du texte à droite ne pose pas de problème, mais je veux que celui de gauche fasse la même longueur (couleur de fond oblige).
J'ai passé en revue plein de pages de forum avec ce même souci sans succès...
Je pense que je vais être obligé de me résoudre à faire un tableau central de 2 colonnes...

Merci

@+

Edit :
Une capture de la page actuelle (les bordures ne sont là que pour bien visualiser les div)
Je veux faire descendre le DIV vert à gauche à la même auteur que le côté droit sans avoir à calculer une hauteur en px)

http://nsa33.casimages.com/img/2013/05/09/mini_130509092158832384.jpg
Bonjour,

Oui, je l'avais vu...

...Mais « display:table-cell » ne répond pas à mes besoins car incompatible avec certains navigateurs.

Donc, si tu as une autre solution que j'aurais pu zapper sur la multitude de page que j'ai lu...

Il existe des solutions, mais avec un code si long que ça en devient débile.

Merci

@+
Oui, j'ai bien regardé...
...incompatible IE avant IE8 !

(Ils sont dépassés, c'est sûr, mais hélas toujours en activité)
Modifié par Jason (09 May 2013 - 14:55)
Jason a écrit :
Oui, j'ai bien regardé...
...incompatible IE avant IE8 !

(Ils sont dépassés, c'est sûr, mais hélas toujours en activité)

En fait il faut plus tenir compte de tes stat de visite, plutôt que juste en faire le support "par habitude". Si le taux de visite provenant des ces 2 navigateur son minime, exemple moins de 5%, ben je pense que tu peux laisser tombé leur support. Personnellement, sur mon site, je ne tien plus le support de iE6 depuis plus d'un an, et je viens de laisser tombé celui de iE7.

Si tu tiens à faire le support de iE7, tu peux utiliser la technique qu'on appel la dégradation gracieuse en ciblent uniquement ce navigateur via les commentaires conditionnels.
Il y a aussi cette technique que j'utilise.
Modifié par juliesunset (09 May 2013 - 17:39)
Bonsoir juliesunset

J'ai déjà entendu parler des classes conditionnelles, mais rarement utilisés...

En fait, en utilisant ce principe, il faut passer par 2 (voire plus) CSS, et rajouter pas mal de lignes de script dans la page HTML.
Ça prend du temps, ça alourdi l'ensemble, là ou en 5 minutes, on rajoute un simple tableau qui lui, sera compatible partout.
Alors, ça a été très intéressant de me pencher sur cette tentative d'une page 100% DIV, mais... Des fois, il faut savoir faire simple Smiley lol
J'ai complété mes connaissances (il m'en reste encore à voir), le menu entièrement en DIV et LI est fonctionnel, c'est déjà une bonne chose...
Ceci dit, j'ai quand même 40 pages sur le site, et je ne pourrais remplacer tout ça que lorsque je serai sur.

Malgré les défauts de mélange de TABLE et DIV en tout genre, j'avais réussi à faire un site fonctionnel et vérifié (presque validé). Juste 3 erreurs sur le code du bloc AddThis Facebook que l'on ne peux pas modifier.

Merci

@+
Est-tu aller voir le dernier lien que je t'ais donné? Avec cette technique on évite d'avoir à utilisé 2-3 feuilles de style. Tu n'as qu'à ajouté un div avec une id dans un commentaire conditionnel au tout début du site. Cette div se trouve à englobé tout ton site et donc tu n'as qu'à l'appelé dans sa feuille de style pour cible IE uniquement.

ça donne une truc du genre, mois je le mets juste après <body>:
<!--[if IE 6]><div id="IE6"><![endif]-->
<!--[if lte IE 7]><div id="IE7"><![endif]-->
...
<!--[if IE]><div id="IE"><![endif]-->  <!-- Pour toutes les versions d'Internet Explorer -->

et avant </body>
<!--[if IE]></div><![endif]-->


ensuite dans ton CSS
#Div_principal{
margin: 10px auto;
display: table;
}
#IE7 #Div_principal{
display: block;
}


Pas tant de ligne de code que ça.
Bonjour,

Merci pour le complément d'info...

J'avais quelques jours de libre, mais là, il me faut reprendre le train-train quotidien.
Je m'y remettrais dès que j'aurais à nouveau du temps...

Merci à tout le monde

A bientôt (car je reviendrais...)

@+
Jason a écrit :
Bonjour,

Oui, je l'avais vu...

...Mais « display:table-cell » ne répond pas à mes besoins car incompatible avec certains navigateurs.

Donc, si tu as une autre solution que j'aurais pu zapper sur la multitude de page que j'ai lu...

Il existe des solutions, mais avec un code si long que ça en devient débile.

Merci

@+


Ce template correspond exactement à tes besoins :
http://www.alsacreations.com/static/gabarits/modele07.html
Et c'est compatible avec tous les navigateurs. Smiley smile
Bonjour à tout le monde,

Bon, je n'ai pas eu le temps de m'y remettre, mais je passe de temps en temps me documenter... Smiley cligne

Merci Raphi pour le lien, j'aurais une base de plus, même si ma mise en page est plus complexe que celle présentée dans ton lien...
Ma "colonne" centrale n'a pas une seule couleur d'arrière-plan...
Voir par exemple cette page du site :
http://fetes-isledenoe.franceserv.fr/Site/Fetes_de_la_st_pierre.html

Les articles ou images peuvent être séparés par des bandes transparentes laissant apparaitre le background général... Ce qui complique un peu la situation. Smiley lol

Merci encore

@+
Modifié par Jason (16 May 2013 - 15:10)
Pas forcement, il suffit que ta div de contenu n'ai pas de background et qu'à l'intérieur tu y insères plusieurs divs séparées par des margin et possédant chacune un background.
Ce qui donnerait ceci en html :

<div id="global">
	<div id="entete">...</div>
	<div id="centre">
		<div id="navigation">...</div>
		<div id="contenu">
                        <div id="contenu1">...</div>
                        <div id="contenu2">...</div>
                        <div id="contenu3">...</div>
                        <div id="contenu4">...</div>
                </div>
	</div>
</div>


Jason a écrit :
Les articles ou images peuvent être séparés par des bandes transparentes laissant apparaitre le background général... Ce qui complique un peu la situation. Smiley lol

Là tu raisonnes en mise en page tableau, attention. Smiley langue

Contrairement à ce que tu penses, ta mise en page n'est pas plus compliqué avec les divs.
Si tu passes de la mise en page tableau à la mise en page en div, tu va diviser tes lignes de code html par 2 ou par 3.
Pages :
Sujet clos
Aller à