Aller au contenu

sopo

Actif
 Afficher le profil  Parcourir son contenu

  • Compteur de contenus

    20

  • Inscrit(e) le

  • Dernière visite

 Type de contenu 

Messages postés par sopo

    positionnement vertical

    dans (X)HTML et CSS

    Posté

    je crois que ce n'est pas clair.

    En xhtml / CSS, il est assez délicat de gérer les hauteurs.

    Il y a la soution des tableaux, mais tu n'es plus dans la norme ni les recommandations W3C.

    pourquoi ne fais tu pas 2 tableaux, un pour la gauche et un pour la droite ?

    Heu ... pas d'accord. Il est déconseillé d'utiliser les tableaux pour la mise en page quand on peut s'en passer. Cependant, l'utilisation d'un tableau de mise en page ne rendra pas le site invalide (si on les a utilisés correctement, évidemment) et ne l'empêche pas de respecter les spécifications HTML et CSS du W3C !

    Il existe des cas où les tableaux sont la solution la plus adéquate, car plus simples et plus robustes qu'un bidouillage CSS, notamment lorsqu'on veut obtenir plusieurs colonnes de même hauteur ...

    Sinon, Gakman, est-ce que tu nous parles de la mise en page générale du site, ou d'une partie de celui-ci ?

    Nouveau site scolaire

    dans (X)HTML et CSS

    Posté

    Salut Patricia,

    Apparemment c'est un problème de positionnement. À quoi ressemble le code que tu insères dans le pied de page, et le code CSS associé ?

    Si tu englobles le div, n'oublie pas qu'il s'agit d'un élément de type block, qui se placera logiquement sous ta liste de liens.

    Problème height à 100%

    dans (X)HTML et CSS

    Posté

    Salut,

    dans ton <body> ajoutes la propriété text-align:center

    Ca permet de centrer les sites sous ie. Ce n'est pas très propre car ensuite il faut définir partout tes text-align. Mais au moins ca fonctionne.

    Argh ! Ce n'est utile que pour IE5, si on travaille en mode de conformité avec les standards (comme on devrait toujours le faire) et non en mode quirks !

    Ce n'est pas de l'intégrisme ou du fanatisme, c'est simplement une question d'espérance de vie de la page. Un jour, peut-être, les navigateurs abandonneront leurs modes de rendu adaptés aux sites préhistoriques, et ce jour-là toutes les pages sur lesquelles vous aurez fait ce genre de compromis risquent de voler en éclat. Ce n'est qu'une possibilité, mais pourquoi prendre ce risque alors qu'on peut s'en passer ? ;)

    album photos

    dans (X)HTML et CSS

    Posté

    Salut,

    tu as testé avec quelle version de Netscape ? En principe, il ne devrait pas y avoir de problème, les dernières versions de Netscape utilisent le même moteur de rendu que Firefox :blink:

    album photos

    dans (X)HTML et CSS

    Posté

    Re,

    au temps pour moi pour le lien, faute de frappe. C'est une simple recherche Google sur "three pixel jog" ;)

    Effectivement, c'est pas très beau à voir sous Opéra :(

    Personnellement, voici comment je positionnerais les blocs (je ne mets que ce qu'il y a à modifier) : 

    div.contenu {
       overflow: hidden;
       /* pas de "display: table-cell", ni "height: 100%" */
    }
    div.centre {
       overflow: hidden;
       padding-left:  10px;
       border: 1px solid #cdcdcd;
       /* pas de "display: table-cell", ni "height: 100%" */
    }
    #showcase {
       /* Rien du tout -> il y a un div inutile */
    }

    Les déclarations "overflow: hidden" créent des contextes de formatage sur les blocs auquels on les applique, ce qui peut changer leur rendu de plusieurs façons. Ici :

    1/ Sur .contenu, le contexte de formatage va obliger le div à compter la colonne flottante dans la hauteur totale du bloc, ce qui permet de se passer d'un "clear: both"

    2/ Sur .centre, on lui interdit de se placer en dessous de la colonne flottante si celle-ci est plus courte, sans avoir besoin d'imposer une marge ou de faire flotter les 2 colonnes

    Évidemment, ça ne fonctionne pas tel quel sous IE6. On peut obtenir le même comportement en donnant le layout aux éléments qui en ont besoin, ici .contenu & .centre. Il faut donc ajouter une feuille de style uniquement pour ie 6, par exemple "style-ie.css", que l'on appelle à l'aide des commentaires conditionnels dans la section head : 

    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/chemin/vers/le/fichier/style-ie.css" media="screen" /><![endif]-->

    Dans ce fichier on remets les valeurs d'overflow à visible et on attribue par exemple une hauteur de 1% à .contenu et .centre (c'est une des manières possible de les doter de layout). Le contenu de style-ie.css : 

    div.contenu {
       overflow: visible;
       height: 1%;
    }
    div.centre {
       overflow: visible;
       height: 1%;
    }

    À part ça, fais attention à l'utilisation des classes & des identifiants. Les classes ne devraient être utilisées que pour des éléments susceptibles de se répéter sur la page. Les identifiants, par contre, sont plus appropriés pour les éléments uniques sur la page, par exemple tes div ".contenu" et ".centre". Ça ne prête pas à conséquence pour le moment, mais tu pourrais t'en mordre les doigts le jour où tu tombera sur un problème de priorité en CSS, ou si tu veux insérer un peu de javascript dans les pages ;)

    La colonne de droite semble utiliser beaucoup de <div>, ils sont tous indispensables ? Les divs sont censés regrouper des balises blocs, pour du texte, des liens ou des images, on utilise plutôt <p>. Et ces abonimables attributs 'align="center"' pourraient être facilement remplacés par une classe, non ?

    Dernière remarque, il y a une erreur dans la feuille de style (un code de couleur incorrect).

    Et voilà. Ça c'est une belle tartine, c'est une :D

    Bon courage.

    album photos

    dans (X)HTML et CSS

    Posté

    Salut, Patricia.

    Je n'ai pas regardé le résultat sous IE, mais en visitant la galerie, j'ai remarqué que tu as imposé la largeur de #showcase à 640px, qui se trouve être la largeur disponible de son parent, #container (si je me souviens bien).

    * Il n'est pas nécessaire de préciser la largeur dans la feuille de style pour qu'un élément de type bloc occupe toute la largeur disponible. C'est son comportement naturel, il le fait tout seul. L'avantage à ne pas imposer de contrainte sur la largeur, c'est que le bloc pourra s'adapter à une marge oubliée ou imprévue sans casser la mise en page !

    * D'autre part, si le décalage ne se produit que pour IE6, c'est certainement un bug de celui-ci. La présence de la colonne flottante me fait pencher pour le "3 three pixel jog". A moins que la marge de la colonne flottante ne soit doublée. A corriger en adaptant les marges dans el premier cas et en appliquant 

    display: inline

    à la colonne flottante dans le second, le tout via un commentaire conditionnel pour IE6 et inférieurs ;)

    Variables & concaténation

    dans SQL

    Posté

    Salut,

    J'essaie d'écrire un fichier SQL créant quelques tables. Je voudrais qu'il soit possible de modifier le préfixe des tables facilement, et j'ai donc besoin de définir une variable (le préfixe) et de modifier le nom des tables en incluant cette variable ...

    En cherchant un peu dans la doc MySQL, je suis tombé sur SET _AT_prefix = '...' pour la variable. Mais pas moyen de la concaténer avec les noms de tables.

    D'où ma question : c'est possible directement en SQL, ou je dois me tourner vers un script PHP ?

    Merci ;)

    Liens sur MM_swapImage

    dans (X)HTML et CSS

    Posté

    Salut,

    waouw, il ne faut pas utiliser la balise <body> n'importe où ! Celle-ci doit être unique sur la page. La solution est simplement 

    <a href="duplication.html" title=""><img src="" alt="" ... /></a>

    La bordure que les navigateurs ajoutent autour des liens-images peut être supprimée facilement par une règle CSS :

    a img {
    	border: 0;
    }

    Cadre en css ?

    dans (X)HTML et CSS

    Posté

    Effectivement, tu n'as pas besoin d'un iframe pour faire ça. Il suffit d'utiliser la propriété CSS 

    position: fixed

    et ça fonctionnera, en tous cas pour IE7, Firefox, etc.

    Maintenant, si tu n'y connais rien ou pas grand chose, ce n'est peut-être pas le genre de mise en page qu'il te faut. Je ne saurais que te conseiller de commencer par le commencement, suivre quelques tutos pour apprendre les bases (ici, par exemple) et y aller tranquille. Tu pourras toujours faire évoluer ton site au fur & à mesure de ta progression ;)

    Problème height à 100%

    dans (X)HTML et CSS

    Posté · Modifié par sopo

    Salut,

    c'est pour IE6 ou IE7 que ton site n'est pas centré ?

    Si c'est IE6 qui pose problème, essaie de supprimer les commentaires & les espaces qui se trouvent avant le DOCTYPE. Ils font peut-être basculer IE6 en mode quirks, ce qui l'empêche d'appliquer les marges automatiques correctement.

    Dan > en principe, 

    global {
       margin: 0 auto;
    }

    devrait centrer le site, non ?

    Banniere en resolution dynamique

    dans (X)HTML et CSS

    Posté

    Personnellement, je centrerais l'image dans une balise de titre <h1>, avec un fond noir. Ainsi, si la résolution de l'écran est suffisament grande, la couleur de fond prolongera l'image sans que le visiteur puisse distinguer la limite entre les deux : 

    HTML : <h1><img src="..." alt="dikiz connexion" /></h1>

    CSS :
    h1 {
       text-align: center;
       background: #000;
       color: #fff;
       margin: 0;
    }

    Il faudra cependant limiter la largeur minimale du site en fonction de la taille de l'image, sans quoi le résultat risque d'être curieux dans les résolutions plus faibles. Une largeur maximale sera aussi utile pour éviter des lignes de texte interminables & illisibles ...

    Centrage en XHTML

    dans (X)HTML et CSS

    Posté

    Salut,

    Pour faire la même chose, tu dois utiliser un style : <div style="width:400px;margin-right:auto;margin-left:auto">blabla</div> Le div est alors centré au milieu de la page : il est indispensable de préciser une largeur.

    Si c'est juste pour centrer l'image, il y a 2 autres possibilités, qui ne nécessitent pas de connaitre la largeur à l'avance : utiliser la propriété text-align: center sur l'élément parent de l'image, comme indiqué plus haut, ou passer l'image en display: block et utiliser les marges automatiques sur l'image : 

    HTML :
    <div>
       <p>Bla bla bla</p>
       <img class="centrer" src="..." alt="..." />
       </p>Bla bla bla</p>
    </div>

    CSS :
    img.centrer {
       display: block;
       margin: 0 auto;
    }

    Re,

    Pour finir, je te déconseille toutefois de passer en XHTML. Tu pourras lire sur cet article que cela peut être néfaste.

    Tu peux très bien conserver une certaine rigueur de balisage, et garder un doctype HTML transitional, qui te garantira que tous les navigateurs interprèteront convenablement ton code.

    Argh, si j'ai bien lu (en diagonale, j'avoue) l'article mentionné, les aspects "néfastes" du XHTML ne sont rencontrés que par les auteurs qui ne valident pas leur code. Mais si tu écris du HTML non valide, tu auras exactement les mêmes problèmes ! Un code valide, avec un doctype approprié est le garant d'un rendu correct et durable, car il respecte les normes que les navigateurs utilisent pour élaborer le rendu.

    Utiliser XHTML 1.0, servi comme "text/html", ou du HTML 4.01, c'est exactement la même chose, il n'y a qu'un simple changement de syntaxe.

×
×
  • Créer...