[Résolu] [Html] Doctype : meilleur affichage sans !

Doctype : meilleur affichage sans ! [Résolu] [Html] - HTML/CSS - Programmation

Marsh Posté le 04-03-2005 à 02:30:15    

Hello,
 
J'ai construit mon site sans doctype en le testant sur plusieurs navigateurs. L'affichage à toujours été satisfaisant, jusqu'à ce que... je rajoute un doctype !
 
index.html (bouton Accueil) et communication.html n'ont pas de doctype et j'ai la mise en page que je souhaite sous les dernières versions de Netscape, IE et Firefox. Les autres pages (en test : publication.html et prestations.html) ont un doctype et j'ai une mise en page vraiment différente entre IE et les autres navigateurs (trop d'espace dans mon texte).
 
Qu'est-ce que je fais, je supprime mes doctypes de toutes mes pages (qu'est-ce que je risque ?), ou il en existe un qui me donnera le même affichage quelque soit le navigateur ?
Thanx
 
Mon site est là
Tester avec un autre explorateur qu'IE bien sûr.


Message édité par ultratoonz le 04-03-2005 à 22:50:19
Reply

Marsh Posté le 04-03-2005 à 02:30:15   

Reply

Marsh Posté le 04-03-2005 à 07:44:58    

Le doctype dit a ton navigateur comment il doit se comporter fasse a la page. Si tu as mal developpé ton site, il se peut effectivement que l'environnement "minimaliste" dans lequel entrent les navig quand il y a pas de doctype remarque moins les erreur qu'avec un doctype..
 
Cela dit c'est pas la faute du doctype ou du browser, c'est la tienne :p


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 04-03-2005 à 17:56:30    

Pas de solution ?

Reply

Marsh Posté le 04-03-2005 à 18:02:56    

si, corrige ton code


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 04-03-2005 à 18:19:53    

Ben je n'arrive pas à obtenir le même affichage que sans doctype en "reprenant" mon code ! Toujours trop d'espace entre mes pseudos paragraphes / j'ai utilisé la mise en page de mon texte pour avoir moins d'interligne qu'avec le saut de ligne des changements de paragraphes (les vrais).
 
Comment faire ?

Reply

Marsh Posté le 04-03-2005 à 18:23:06    

1- arrêter d'utiliser des tableaux pour la mise en page, leur préférer une mise en page en CSS
2- arrêter d'utiliser du flash ou du Javascript là ou ils n'ont pas à être utilisés, ici encore préférer l'utilisation des CSS
3- user et abuser du validateur HTML/XHTML du W3C ainsi que des docs de références des normes
 
Erreurs repérées:
<embed> n'existe pas
boutons en flash
rollovers en javascript (aucun intérêt)
son (figure dans les pires trucs trouvables sur un site web)
tagging HTML mal foutu (utilisation de classes là où il faudrait utiliser des ids, tags <span> ou <div> nestés inutiles, ...)
 
En fait, commencer par arrêter de développer le site sous Dreamweaver


Message édité par masklinn le 04-03-2005 à 18:27:42

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2005 à 18:23:45    

quel intérêt de mettre ton texte dans un tableau ? tu perds complètement la sémantique, tes titres ne signifient plus rien sans style.
 
pourquoi tu ne mets pas tes titres dans des blaises de titre et tes paragraphes dans des p et ensuite tu styles le tout ?


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 04-03-2005 à 18:25:44    

ultratoonz a écrit :

Ben je n'arrive pas à obtenir le même affichage que sans doctype en "reprenant" mon code ! Toujours trop d'espace entre mes pseudos paragraphes / j'ai utilisé la mise en page de mon texte pour avoir moins d'interligne qu'avec le saut de ligne des changements de paragraphes (les vrais).
 
Comment faire ?


règle les marges de tes paragraphes...
 
Enfin ceci dit, il y a beaucoup trop de tableaux dans cette page.
 
C'est tellement plus simple d'avoir une succession de :
 
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<p>...</p>
 
[:benou_grilled]


Message édité par gm_superstar le 04-03-2005 à 18:26:21

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 04-03-2005 à 18:26:13    

Je les utilise essentiellement pour avoir plus de souplesse dans la mise en page de mon texte. Pas pour la mise en page des autres blocs, qui eux sont en div.
 
Je ne connais pas de solution pour personnaliser l'interligne, donc en attendant... (j'avais déjà poster pour ça et j'ai jamais eu de réponse) ---> tableaux

Reply

Marsh Posté le 04-03-2005 à 18:28:32    

padding et margin pour l'espacement dans et hors des paragraphes/titres
line-height pour l'interligne


Message édité par Mjules le 04-03-2005 à 18:29:00

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 04-03-2005 à 18:28:32   

Reply

Marsh Posté le 04-03-2005 à 18:28:33    

qu'appelles tu l'interligne?
l'espace entre deux paragraphes?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2005 à 18:37:56    

Oui, saut de ligne en général : l'espace entre deux lignes.

Reply

Marsh Posté le 04-03-2005 à 18:39:34    

ultratoonz a écrit :

Oui, saut de ligne en général : l'espace entre deux lignes.


 [:fing fang fung]  
Ok, ça aide beaucoup...
Enfin bon, mjules a répondu de toute façon


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2005 à 18:39:58    

Vais essayer line-height, ça a l'air de pouvoir résoudre mon problème.
 
Quel doctype me conseillez-vous ?

Reply

Marsh Posté le 04-03-2005 à 18:40:19    

Avant que je teste ! ;-)

Reply

Marsh Posté le 04-03-2005 à 18:42:35    

Reply

Marsh Posté le 04-03-2005 à 18:47:59    

HTML 4.01 strict ou XHTML 1.0 strict.
 
Habituellement j'utilise XHTML 1.0 strict mais il est un poil plus difficile à mettre en oeuvre que HTML 4.01 sans apporter grand chose, donc un doctype HTML est largement suffisant pour commencer.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2005 à 20:42:03    

Je bosse dessus. Pouvez-vous me dire s'il est possible d'avoir deux interlignes (espaces) différents pour un paragraphe.
 
Je m'explique : je voudrai que mon titre ai un espace de 12 pts avec le paragraphe qui le suit, et un espace plus important (genre 14 pts) avec celui qui le précède. Possible ?

Reply

Marsh Posté le 04-03-2005 à 20:54:36    

joue avec la marge de ton h (margin-top et margin-bottom) et/ou avec les marges hautes et basses des paragraphes


Message édité par Mjules le 04-03-2005 à 20:55:59

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 04-03-2005 à 20:56:26    

Ben le padding c'est pas pour l'espace horizontal par rapport à la bordure du bloc ?

Reply

Marsh Posté le 04-03-2005 à 20:56:40    

gm_superstar a écrit :

règle les marges de tes paragraphes...
 
Enfin ceci dit, il y a beaucoup trop de tableaux dans cette page.
 
C'est tellement plus simple d'avoir une succession de :
 
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<p>...</p>
 
[:benou_grilled]



---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 04-03-2005 à 20:58:09    


 
Je m'y emploie, je m'y emploie (tant mieux si j'arrive à me débarasser de la technique des tableaux)....

Reply

Marsh Posté le 04-03-2005 à 20:58:45    

ultratoonz a écrit :

Ben le padding c'est pas pour l'espace horizontal par rapport à la bordure du bloc ?


le padding c'est l'espace intérieur dans le bloc (dans toutes les directions), la marge c'est l'espace à l'extérieur du bloc.
http://openweb.eu.org/articles/dimensions_boites_css/


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 04-03-2005 à 21:02:00    

Merci Mjules, mais je n'ai pas besoin du padding pour personnaliser mes interlignages puisque le padding sert à positionner mon bloc de texte dans le div, et non à positionner mes paragraphes individuellement. Thanx anyway. J'avance...

Reply

Marsh Posté le 04-03-2005 à 21:05:00    

ultratoonz a écrit :

Merci Mjules, mais je n'ai pas besoin du padding pour personnaliser mes interlignages puisque le padding sert à positionner mon bloc de texte dans le div, et non à positionner mes paragraphes individuellement. Thanx anyway. J'avance...


 [:fing fang fung]  
 
pardon?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2005 à 21:07:02    

Je peux mettre un padding dans mes styles de paragraphes ?

Reply

Marsh Posté le 04-03-2005 à 21:07:51    

pourquoi pas?
 
tu fais ce que tu veux [:spamafote]
tu peux même mettre des bordures aux paragraphes [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2005 à 21:15:48    


j'ai fait une faute de frappe dans une de mes réponse (padding en lieu et place de margin) et il a pas du voir que j'avais édité


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 04-03-2005 à 21:17:32    

Mjules a écrit :

j'ai fait une faute de frappe dans une de mes réponse (padding en lieu et place de margin) et il a pas du voir que j'avais édité


Ce qui n'empêche pas de jouer avec le padding pour les interpositionnement des paragraphes, après ça dépend des effets visuels qu'on peut vouloir générer (par exemple des fonds qui "se touchent" sans interruption)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2005 à 21:25:22    

Mes titres de paragraphes sont le style 7 dans ma css.
Mes paragraphes sont le style 3 dans ma css.
 
Je veux que "Free Lance" (en style 7 donc) soit plus près du paragraphe qui le suit, que du paragraphe qui le précède.
 
Je fais des essais mais je n'arrive pas à utiliser padding pour le "rapprocher" du paragraphe qui le suit.
 
J'arrive quelque peu à mes fins en "trichant" : je crée un style de paragraphe différent que j'intercale en faisant un saut de ligne avant "Freelance". Mais c'est vraiment du bricolage, et je n'ai pas un résultat qui me convient parfaitement.
 
Pouvez-vous me donner un exemple d'utilisation du padding dans la css pour mon style 7, le titre "Freelance" ? Ce padding rapprocherait le titre du paragraphe suivant.

Reply

Marsh Posté le 04-03-2005 à 21:27:23    

On s'en fout du padding. Je répète, parce que visiblement ça passe pas...
 

gm_superstar a écrit :

règle les marges de tes paragraphes...
 
Enfin ceci dit, il y a beaucoup trop de tableaux dans cette page.
 
C'est tellement plus simple d'avoir une succession de :
 
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<p>...</p>
 
[:benou_grilled]



---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 04-03-2005 à 21:36:39    

Ok Super, mais comment je définis <h1> pour que le titre soit plus près du paragraphe qui le suit que de celui qui est avant ?

Reply

Marsh Posté le 04-03-2005 à 21:43:28    

Reply

Marsh Posté le 04-03-2005 à 22:49:49    

Citation :

.titre {
 color: #FFFFFF;
 font-size: 12px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 margin-bottom:15px;
 margin-top:5px;
}
.paragraphe {
 color: #FF9933;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
}


 
Ben voilà, moi qui croyait que la balise margin ne s'appliquait qu'aux calques. Ca a résolu mon problème. Merci à Masklinn, Mjules et Super pour votre aide sur mon problème d'interlignage. Merci de vous être accrochés ! lol
 
Bon ben j'ai un peu de planche sous le pain... @+

Reply

Marsh Posté le 04-03-2005 à 23:03:06    

ultratoonz a écrit :

Ben voilà, moi qui croyait que la balise margin ne s'appliquait qu'aux calques. Ca a résolu mon problème.


Ce qui prouve encore une fois que Dreamweaver est un instrument du démon et devrait être interdit [:natas]  
 
En HTML/XHTML (et donc modifiable via CSS), tout élément quel qu'il soit possède une marge, une bordure et un padding (dans les 4 directions) ainsi qu'un positionnement (normal, absolut, relatif ou fixe) et une taille.
 
Ensuite en fonction du type d'affichage (block, inline, ...) ces attributs peuvent être appliqués différement voir pas du tout, mais ils existent toujours :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2005 à 23:10:52    

Thanx pour la précision Masklinn. Néanmoins je ne partage pas tout à fait ton extrémisme. Sans Dreamweaver et son mode mixte (affichage simultané code & créa), je n'aurai jamais eu envie de mettre les mains dans le code, même si le html est un des langages les plus simples.
 
Quand on est un peu réfractaire à la prog,grâce au wysiwyg, on peut apprendre un langage parfois plus facilement. Je te concède en outre que c'est parfois plus laborieux que si l'on apprend le code de façon académique.
 
Enfin, pour moi qui suis plus designer que webmaster, Dream m'a donné envie d'apprendre le code.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed