Apprendre nouveau design CSS

Je viens de faire tout ça, c'est formidable, un grand grand merci. En plus c'est super bien expliqué. PAr contre je me suis permis de mettre le css dans un fichier css à part et non dans le même fichier que le code html (je préfère :p!!).J'ai tout de même 2 questions:
-Je n'ai pas tout compris sur le "id="separator", qu'est ce que c'est exactement?
-J'ai cru comprendre qu'un "filet était un trait tès fin, est ce bien ça?

Merci bcp.
 
Le id "separator", c'est un truc que j'utilise pour stopper le flottement, je met un <hr> avec la propriété clear sinon le footer se met à côté de #menu. ;) Il y a peut-être une meilleure solution mais bon&#8230;

Puis moi aussi je préfère les fichiers externes, c'est d'ailleurs expliqué à la page précédente&#8230; :p
 
Note : même si c'est pour aider Pooki, je n'ai pas fait ce tuto pour quelqu'un en particulier mais plutôt destiné à tous&#8230; J'espère que ça va donner envie à certains de s'y mettre&#8230; :zen:
 
Ok, merci beaucoup pour ton aide en tout cas. Excuse moi, j'avais pas vu que tu parlais des fichiers externes, je n'avais pas rafraichi ma page. En tout cas ce petit post va dans mes favoris. :)
 
  • J’aime
Réactions: p4bl0
Je viens de vérifier dans IE6 : le menu est en bas du contenu, mais là je crois qu'en réduisant un peu la largeur du #content ça devrait marcher. Par contre, la #navbar n'apparaît tout simplement pas. :D Saloperie... :D

En tout cas, ça confirme bien que la meilleure méthode de travail est de contrôler l'aspect de son site avec les navigateurs modernes et puis faire les ajustements pour IE6. :p

Demain je regarderai pour corriger ça, éventuellement avec l'aide des commentaires conditionnels, le tuto n'est pas terminé. ;)
 
Voilà, c'est corrigé : IE demandait d'avoir une hauteur fixe pour le #header et de faire flotter le <h1> à gauche. J'ai corrigé aussi le problème de centrage du #wrapper. Il faut donc insérer cette feuille de style corrective dans le head et qu'elle ne soit lu que par IE. Heureusement, ce navigateur possède un mécanisme de commentaires conditionnels qui va nous permettre de régler ce problème :

Bloc de code:
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil &#8212; Mon site à moi</title>
    <style type="text/css" media="screen">
        @import url(screen.css);
    </style>
    <style type="text/css" media="print">
        @import url(print.css);
    </style>
    <!--[if lte IE 7]>
    <style type="text/css" media="screen">
        @import url(ie-only.css);
    </style>
    <![endif]-->

</head>
Et voici le contenu de ce ie-only.css :

Bloc de code:
body {
    text-align: center;
}
#wrapper {
    text-align: left;    
}
#header {
    height: 5em;
}
#header h1 {
    float: left;
}
/*Contenu*/
#content {
    width: 580px;
}

/*la barre de navigation*/
#navbar ul {
    margin-top: 1.5em;
}
On appelle (uniquement pour IE) la feuille de style corrective après la css normale. Maintenant, je ne sais pas ce que ça donne dans IE7. :D Si il y a un problème, il faudra réserver cette correction uniquement pour IE6 (voir le billet de Laurent Denis).

Edit : j'ai modifié la condition (si version IE plus petit ou égal à 7) pour pas avoir d'interférences éventuelles avec IE8.
 
Dans IE7, c'est bon.
 
Vous devriez donner des points disco à d'autres avant d'en offrir de nouveau à gloup gloup.
 
Dans ce tuto on a parlé des medias screen et print mais il y en a bien d'autres. Bon, les autres sont plus anecdotiques mais il y en tout de même un autre à retenir c'est handheld, le media pour les navigateurs de poches (gsm, pda). Le navigateur le plus utilisé sur les gsm et pda, c'est Opera (Mini ou Mobile) qui utilise les styles css "handheld" quand ils sont présents. On voit encore ici la puissance du système qui permet de séparer le contenu (xhtml) de la présentation (css) : avec un seul document on a une sortie optimisée pour une foule de périphériques.

Pour ce qui est de l'iphone (et de l'ipod touch), ils utilisent un mécanisme de css3 : les media queries. Mais si on ne veut pas se casser la tête on peut lier la css iphone et handheld.

Au niveau de la css print, dans le tuto c'était vraiment une css minimum, mais là aussi on peut faire pas mal de choses, il y a même des propriétés spécifiques à ce media.
 
D'abord une structure de base en xhtml strict valide avec l'indication de la langue du document sur l'élément html et un titre.

Bloc de code:
<!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" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil — Mon site à moi</title>
    
</head>

<body>


</body>
</html>

salut Gloup-Gloup,

Petite question : que signifie "xhtml strict" ? Est-ce incontournable de le préciser dans l'en-tête ?

Merci !
 
Il est important d'avoir un doctype correct pour que le navigateur sache à quel sorte de (x)html il va avoir affaire&#8230; ;) De plus, si tu n'utilise pas un doctype correct IE 6 & 7 passent en mode quirk et calculent la taille des éléments différemment et là tu peux avoir des surprises au niveau du design.

Plus d'infos
 
En fait le mieux, même si html4 n'est pas hors-jeu, c'est de travailler en xhtml, c'est plus facile à apprendre et on apprend les bonnes manières directement. Si tu as l'intention d'utiliser des iframes utilise xhtml transitionnal sinon xhtml strict… Et reste en version 1.0, la version 1.1 est trop contraignante et n'est pas vraiment reconnue correctement par IE. ;-)
 
Et reste en version 1.0, la version 1.1 est trop contraignante et n'est pas vraiment reconnue correctement par IE. ;-)
Pour être tout à fait précis, c'est le type MIME auquel il doit être associé qui n'est pas supporté par IE (type MIME qui devrait d'ailleurs être celui de tout document XHTML, mais c'est un autre débat). Bref, va pour de l'XHTML1.0 Strict. ;)
 
  • J’aime
Réactions: tumb
Pour être tout à fait précis, c'est le type MIME auquel il doit être associé qui n'est pas supporté par IE (type MIME qui devrait d'ailleurs être celui de tout document XHTML, mais c'est un autre débat). Bref, va pour de l'XHTML1.0 Strict. ;)

J'espère que IE8 va régler ce problème, et qu'il va incorporer svg… Mais là je rêve je crois… :D