Problème de cadre

A

Anonyme

Invité
pour le Doctype, j'ai une différence : content="text/html;charset=iso-8859-1"
Est ce important ?
Non c'est pas grave, c'est l'encodage des caractères, cet encodage a un petit inconvénient : il manque quelques caractères qu'il faut remplacer par des entités (codes spéciaux) alors que UTF-8 est plus universel (tu peux même taper en japonais, chinois arabe,…).

La liste des caractères utilisés en français non supportés par ton encodage :
  • le œ (cœur, sœur, mœurs, etc) a remplacé par œ et la majuscule Œ par Œ
  • le symbole € par €
  • …
Et puis les autres, obligatoires dans tous les encodages ceux-là :
  • < par &lt;
  • > par &gt;
  • & par &amp;
Voilà…
 
A

Anonyme

Invité
Non c'est pas grave, c'est l'encodage des caractères, cet encodage a un petit inconvénient : il manque quelques caractères qu'il faut remplacer par des entités (codes spéciaux) alors que UTF-8 est plus universel (tu peux même taper en japonais, chinois arabe,…).

La liste des caractères utilisés en français non supportés par ton encodage :
  • le œ (cœur, sœur, mœurs, etc) a remplacé par &oelig; et la majuscule Œ par &OElig;
  • le symbole € par &euro;
  • …
Et puis les autres, obligatoires dans tous les encodages ceux-là :
  • < par &lt;
  • > par &gt;
  • & par &amp;
Voilà…
merci, je vais changer l'encodage

Bonne soirée
Albert
 

artaud

Membre junior
16 Février 2006
55
3
55
Il servait à la présentation.
J'ai fait ça sur ma feuille de style, je sais pas si c'est othodoxe :

p
{
margin: 0px;
}


div
{
position:relative;
width:100%;
height:1000px;
}

p#un
{
float:left;
width: 20%;
height:100px;
}

p#deux
{
float:left;
width: 50%;
height:100px;
}

p#trois
{
float:left;
width:30%;
height:100px;
}

p#quatre
{
float:left;
width:20%;
height:100px;
}

etc..

Albert
Et pourquoi ne pas alléger ?

Bloc de code:
div {
position:relative;
    width:100%;
    height:1000px;
}
p {
margin: 0 ;
}
p#un, p#deux, p#trois, p#quatre {
float : left ;
height: 100px ;
}
p#1 {
width: 20% ;
}
p#2 {
width: 30% ;
}
p#3 {
width: 50% ;
}
p#4 {
width: 20%
}
 
A

Anonyme

Invité
Et pourquoi ne pas all&#233;ger ?
Bien vu. ;)

On pourrait m&#234;me utiliser les class :

Bloc de code:
div {
position:relative;
    width:100&#37;;
    height:1000px;
}
p {
margin: 0 ;
}
p.colonne1, p.colonne2, p.colonne3 {
float : left ;
height: 100px ;
}
p.colonne1 {
width: 20% ;
}
p.colonne2 {
width: 30% ;
}
p.colonne3 {
width: 50% ;
}
.stop {
clear: left;
}
Bloc de code:
<p class="colonne1">blabla</p>
<p class="colonne2">blabla</p>
<p class="colonne3">blabla</p>
<p class="colonne1 stop">blabla</p>
<p class="colonne2">blabla</p>
<p class="colonne3">blabla</p>
<p class="colonne1 stop">blabla</p>
<p class="colonne2">blabla</p>
<p class="colonne3">blabla</p>
J'ai pas test&#233; hein&#8230; ;) J'ai un doute sur le stop&#8230;
 
A

Anonyme

Invité
Bien vu. ;)

On pourrait même utiliser les class :

Bloc de code:
div {
position:relative;
    width:100%;
    height:1000px;
}
p {
margin: 0 ;
}
p.colonne1, p.colonne2, p.colonne3 {
float : left ;
height: 100px ;
}
p.colonne1 {
width: 20% ;
}
p.colonne2 {
width: 30% ;
}
p.colonne3 {
width: 50% ;
}
.stop {
clear: left;
}
Bloc de code:
<p class="colonne1">blabla</p>
<p class="colonne2">blabla</p>
<p class="colonne3">blabla</p>
<p class="colonne1 stop">blabla</p>
<p class="colonne2">blabla</p>
<p class="colonne3">blabla</p>
<p class="colonne1 stop">blabla</p>
<p class="colonne2">blabla</p>
<p class="colonne3">blabla</p>
J'ai pas testé hein… ;) J'ai un doute sur le stop…
c'est ce que j'ai fait : j'ai mis 3 class car chaque colonne aura des attributs différents (couleur,...)

Mais toujours des problèmes avec IE
Albert
 
A

Anonyme

Invité
c'est ce que j'ai fait : j'ai mis 3 class car chaque colonne aura des attributs différents (couleur,...)

Mais toujours des problèmes avec IE
Albert
Tu as bien la classe stop? Le code que j'ai donné fonctionne chez moi mais je n'ai pas IE windows. Tu n'as pas la page en ligne que l'on puisse voir exacement? Voici le code complet :

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>untitled</title>
    <style type="text/css" media="screen">
    div {
        position:relative;
        width:100%;
        height:1000px;
    }
    p {
        margin: 0 ;
    }
    p.colonne1, p.colonne2, p.colonne3 {
        float : left ;
        height: 100px ;
    }
    p.colonne1 {
        width: 20% ;
    }
    p.colonne2 {
        width: 30% ;
    }
    p.colonne3 {
        width: 50% ;
    }
    .stop {
        clear: left;
    }    
    </style>
    
</head>

<body>
    <div id="name">
        <p class="colonne1">blabla</p>
        <p class="colonne2">blabla</p>
        <p class="colonne3">blabla</p>
        <p class="colonne1 stop">blabla</p>
        <p class="colonne2">blabla</p>
        <p class="colonne3">blabla</p>
        <p class="colonne1 stop">blabla</p>
        <p class="colonne2">blabla</p>
        <p class="colonne3">blabla</p>
    </div>

</body>
</html>
 
A

Anonyme

Invité
merci, je vais changer l'encodage

Bonne soirée
Albert
Attention si tu travailles avec MySQL, il faut convertir la base en UTF8. Et avec PHP, il y a des fonctions spéciales pour travailler avec les chaînes de caractères car un caractère peut prendre un ou plusieurs octets. :zen:
 
A

Anonyme

Invité
Bon, j'ai test&#233; la page dans IE6 et &#231;a marche, il y a juste que les paragraphes ont l'air d'avoir un largeur minimale par d&#233;faut et passe &#224; la ligne quand on r&#233;tr&#233;cit trop la fen&#234;tre mais il faut vraiment y aller fort sur la r&#233;duction. N'oublie pas que si tu rajoutes un paragraphe suppl&#233;mentaire apr&#232;s ce faux tableau, il faut lui donner un clear:left (ou la classe stop). ;)

Adchao.
 
A

Anonyme

Invité
Bon, j'ai testé la page dans IE6 et ça marche, il y a juste que les paragraphes ont l'air d'avoir un largeur minimale par défaut et passe à la ligne quand on rétrécit trop la fenêtre mais il faut vraiment y aller fort sur la réduction. N'oublie pas que si tu rajoutes un paragraphe supplémentaire après ce faux tableau, il faut lui donner un clear:left (ou la classe stop). ;)

Adchao.
as tu agrandi la fenêtre lentement ? de temps en temps le troisième bloc passe à la ligne puis se remet en place. (sous IE)

Albert
 
A

Anonyme

Invité
as tu agrandi la fenêtre lentement ? de temps en temps le troisième bloc passe à la ligne puis se remet en place. (sous IE)

Albert
Oui c'est un petit défaut d'affichage, peut-être dû au manque de contenu des «cellules», je ne sais pas. AMHA, je ne crois pas qu'il faille se prendre la tête avec ça... ;)
 
A

Anonyme

Invité
Oui c'est un petit défaut d'affichage, peut-être dû au manque de contenu des «cellules», je ne sais pas. AMHA, je ne crois pas qu'il faille se prendre la tête avec ça... ;)
je suis affolé par le nombre de problèmes dus à IE. Je suis en train de lire des articles sur les alignements horizontaux et verticaux dans un bloc, c'est vraiment pénible. Il faut écrire des choses tordues pour être lisible par IE.

Albert
 
A

Anonyme

Invité
J'ai trouvé un truc pour que ça ne bouge plus... C'est un peu tordu, je vais peut-être me faire incendier par les pros du forum mais tant pis, je me lance :D :


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>untitled</title>
    <style type="text/css" media="screen">
    #contenu {
        width:100%;
    }
    #contenu div {
        border: 1px solid black;
    }
    p {
        margin: 0 ;
    }
    #colonne1 {
        width: 20% ;
    }
    #colonne2 {
        margin-left: 20%;
        width: 30%;
        top: 0px;
        margin-top: -302px;
    }
    #colonne3 {
        width: 50% ;
        margin-left: 50%;
        top: 0px;
        margin-top: -302px;
    }
    #colonne1 p, #colonne2 p, #colonne3 p {
        height: 100px ;
    }
    </style>
    
</head>

<body>
    <div id="contenu">
        <div id="colonne1">
            <p>blabla</p>
            <p>blabla</p>
            <p>blabla</p>
        </div>
        <div id="colonne2">
            <p>blabla</p>
            <p>blabla</p>
            <p>blabla</p>
        </div>
        <div id="colonne3">
            <p>blabla</p>
            <p>blabla</p>
            <p>blabla</p>
        </div>
    </div>
</body>
</html>
Heureusement que les paragraphes ont une hauteur bien définie. :D J'ai mis un filet autour des colonnes pour donner une idée. :)
 
A

Anonyme

Invité
Il doit y a voir moyen de jouer avec les positions relatives mais je n'ai pas encore bien compris comment &#231;a marche... ;)
 
A

Anonyme

Invité
Il doit y a voir moyen de jouer avec les positions relatives mais je n'ai pas encore bien compris comment &#231;a marche... ;)
Avant de d&#233;finir des 'top' et des 'left', vaut mieux dire si tu positionne ton bloc en 'absolute' (donc avec des coordon&#233;es X - Y par rapport au bloc parent) ou en relative, et l&#224; plus de 'top' et 'left' : il se placera selon son flottement ('float').

En positionnement relatif, la position du bloc d&#233;pend du bloc qui le pr&#233;c&#232;de, et non plus son bloc parent.
Par exemple, si tu mets 'float: left', le bloc se placera &#224; c&#244;t&#233; du bloc pr&#233;c&#233;dent, et non plus dessous. Pour revenir &#224; la ligne, il faut ajouter 'clear: both'

[EDIT] Il y a 2 &#233;coles &#224; ce sujet : les relatifs et les absolus... je pr&#233;f&#232;re les relatifs car on peut agrandir ou r&#233;duire la typo, la mise en page est plus souple et tout s'enchaine sans jamais se chevaucher.
 
A

Anonyme

Invité
Avant de définir des 'top' et des 'left', vaut mieux dire si tu positionne ton bloc en 'absolute' (donc avec des coordonées X - Y par rapport au bloc parent) ou en relative, et là plus de 'top' et 'left' : il se placera selon son flottement ('float').

En positionnement relatif, la position du bloc dépend du bloc qui le précède, et non plus son bloc parent.
Par exemple, si tu mets 'float: left', le bloc se placera à côté du bloc précédent, et non plus dessous. Pour revenir à la ligne, il faut ajouter 'clear: both'

[EDIT] Il y a 2 écoles à ce sujet : les relatifs et les absolus... je préfère les relatifs car on peut agrandir ou réduire la typo, la mise en page est plus souple et tout s'enchaine sans jamais se chevaucher.
Bonjour

Est-ce que tu déconseilles la position flottante ?
Albert
 
A

Anonyme

Invité
Bonjour

Est-ce que tu déconseilles la position flottante ?
Albert
Non, au contraire, je l'utilise souvent, mais comme je dis plus haut il y a vraiment 2 écoles là-dessus et d'autres préfèreront l'absolu pour que rien ne bouge, mais là vraiment c'est chacun qui voit !