Création xhtml

j'aimerais créer un cadre en xhtml de ce type....



je l'ai ecris comme cela:

<div class="press_archive">
    <div class="press_date"> October 2006 </div>
    <h2 class="press_archive_titre"><a href="#"> titre </a></h2>
    <p> bla bla..... </p>
</div>

mais j'hésite sur la structure , pouvez vous me donner dire comment faire au mieux et si vous avez de la doc pour créer de bonnes structures...

ensuite vient le probleme de le creer la css de mise en forme...
Modifié par gaylover (21 Nov 2006 - 14:49)

Bonjour à toi aussi gaylover

Pourrais-tu éditer et corriger ton message comme expliqué dans la FAQ (balisage du code)... Merci.

gaylover a écrit :
mais j'hésite sur la structure , pouvez vous me donner dire comment faire au mieux

La structure et le sens des balises dépendent du contenu et de sa fonction.

Comment veux-tu qu'on devine une structure HTML à choisir à partir d'une illustration visuelle ?

On va essayer :

Si ton illustration correspond à un calendrier, des stats, des données tabulaires, la meilleure structure est le tableau

Si ton illustration correspond à une liste (liste de choix, de liens, etc), alors la structure à adopter est une liste.

Si cela ne correspond à rien de fonctionnel, il reste la balise <div>.

Etc.

Tu le vois, on ne peux pas en savoir plus.

a écrit :
et si vous avez de la doc pour créer de bonnes structures...

Là encore, impossible de répondre : on choisit les balises selon leur fonction et besoin.
J'ai l'impression que tu confonds avec la mise en forme et les CSS
Modifié par Raphael (17 Nov 2006 - 15:11)

Je pars de ce que tu à donner et je tente de faire quelque chose de ressemblant

html :

<div class="press_archive">
    <div class="press_date"> October 2006 </div>
    <h2 class="press_archive_titre"><a href="#"> titre </a></h2>
    <p> bla bla..... </p>
</div>

CSS :

.press_archive {
    border: 1px solid #aaa;
    width: 90%;
    background-color: white;
    font-size: 11pt;
    padding: 0px;
}
.press_archive > p {
    margin-left: 120px;
}
.press_date {
    float: left;
    margin: 0px;
    padding: 0px;
    background-color: #E0EAFF;
    color: black;
    background-image: url(images/coin-arrondi.png);
    background-position: top left;
    background-repeat: no-repeat;
    position: relative;
    top: -1px;
    left: -1px;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    height: 20px;
    line-height: 20px;
    width: 120px;
    text-align: center;
}
.press_archive_titre {
    font-size: 13pt;
    display: inline;
    margin-left: 20%;
    color: #555;
}

l'image "coin-arrondi.png" :




PS: j'ai fait ça à la va vite, ça doit pouvoir être fait de manière plus propre
Modifié par p4bl0 (18 Nov 2006 - 21:29)

merci.... c'est exactement ce que je voulais...
le float left avec top et left à moins 1 ... pour cacher le bout du cadre ...
encore merci p4bl0

gaylover a écrit :
merci.... c'est exactement ce que je voulais...

Yeah ...
Ton problème est [Résolu] alors !

Peux-tu l'éditer en tant que tel ?
Merci

désolé mais je n'ai pas trouvé comment faire pour que IE6 interprete correctement cette css... dans IE7 et firefox cela marche correctement par contre le bloc press_date ressort du div press_archive dans iE6...

je sais cet exploreur est mauvais mais tjs utilisé en majorité...