Codage bloc en 3 parties

[Hailey]

Bonjour,

Voilà j'ai un site et je voudrais lui donner un nouveau look et j'aimerais qu'il ait ce style http://demi-daily.org/ pour le bloc de news et pour le menu. Le bloc avec le fond en image est divisé en 3 partie le haut, le bas et le centre qui s'adapte en fonction de la longueur du texte.

J'ai mon site qui est fait avec des div
/>http://paradiseproduction.free.fr/ et j'aimerais savoir s'il était possible de donner cet aspect à mon site (j'ai mon image de fond) en ne modifiant que le CSS et/ou les fichier entete footer et co. Et comment faire car je sais pas du tout par où commencer, j'ai tenté plusieurs chose mais ça ne change rien.

un truc que j'ai essayer mais ça marche pas et je ne sais pas du tout où placer le centre

.contenu_title{
font-family: Tahoma;
color: #ffffff;
background-image: url(pphaut.png);
width: 546px;
height: 20px;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-bottom: 3px;
padding-top: 5px;
padding-left: 3px;
font-weight: bold;
font-size: 13px;
float: left;
}

.contenu{
position: relative;
width: 550px;
left: 5px;
color: #a1d5f2;
border: 1px #b1d9f0 solid;
background-image: url(ppbas.png);
padding: 3px 3px 3px 3px;
font-family: Tahoma;
font-size: 12px;
margin-bottom: 3px;
margin-top: 3px;
}

voilà ce que ça donne
/>http://paradiseproduction.free.fr/test/affilates.php

EDIT: après quelques mofif je suis arrivée à là par contre je ne sais pas comment ajouter le milieu qui s'agrandit en fonction d contenu

Modifié 13 Juin 2010 par Dudu

[Dudu]

Salut

J'ai mon site qui est fait avec des div

C'est l'horreur, tout est fait avec des <div> Tu ne veux pas utiliser de vraies balises plutôt ? La balise <div> ne sert pas à encadrer du contenu, elle sert juste à diviser une ou deux grandes parties de la page grand maximum (l'en-tête et le pied-de-page par exemple).

Désolé de te dire ça, mais avant de te lancer dans une refonte de ta CSS, fais d'abord une refonte de ton code HTML.

Une bonne CSS sur un mauvais HTML donne une mauvaise CSS et un mauvais affichage.

[Hailey]

Tu ne veux pas utiliser de vraies balises plutôt ?

c'est-à-dire?

En faite j'ai utilisé des div car c'est comme ça que mon prof d'infos m'a appris (j'étais en commerce), il nous a dit d'utiliser les divs plutôt que les tables, vu que je ne suis pas une experte j'ai pas trop voulu me compliquer la tâche.

[Dudu]

Ben c'est-à-dire de vraies balises.

Pour écrire un paragraphe de texte, on utilise une balise "paragraphe" (<p></p>)

Pour écrire une liste (un menu étant l'exemple le plus fréquent) on utilise une balise "liste" (<ul><li></li></ul>)

Pour écrire des titres, sous-titres, sous-sous-titres, on utilise les balises <h1></h1> <h2></h2> etc... jusqu'à <h6></h6>

Pour inclure des animations multimédia, on utilse la balise "multimédia" (<object></object>)

Pour écrire un texte important, on utilise la balise "important" (<em></em>)

Pour écrire un texte très important, on utilise la balise "très important" (<strong></strong>)

et caetera

Et pour écrire des tableaux de données, on utilise la balise <table><tr><td></td></tr></table>

Et pour écrire des divisions de pages, on utilise la balise <div></div>

Écrire toute une page qu'avec des balises <table></table> c'est aberrant.

Écrire toute une page avec des balises <div></div> est tout aussi aberrant.

Et si RÉELLEMENT ton professeur d'informatique t'a raconté des inepties pareilles, dis-lui de passer nous voir, on va lui apprendre son métier

Pour bien comprendre le bon usage des bonnes balises: http://htmldog.com/reference/htmltags/

[Hailey]

ok je connais ces balises mais je vois pas trop la différence car pour moi c'est comme si c'était renommer et c'est plus simple pour moi comme ça je sais à quoi ça correspond

En faite je sais si c'est moi qui me suit mal exprimer mais voici un exemple d'une de mes pages. Est-ce que ça pose vraiment un problème

<?php include('entete.inc.php'); ?> 
<?php include('header.inc.php'); ?> 

<div class="contenu">
<div class="contenu_title">AFFILATES</div>

<strong>Graphiques/Design</strong>
    <br>
    <a href="http://obsession27.free.fr/" target="blank">http://</a>Obsession27 
    <br>
    <a href="http://pagesperso-orange.fr/simplygraphix/" target="blank">http://</a>Simply Graphix
    <br>
    <a href="http://graphix-illusion.fr/" target="blank">http://</a>Graphix-Illusion 
    <br>
    <a href="http://f.deneige.free.fr/" target="blank">http://</a>Fleurs des Neiges
    <br>
    <a href="http://stonelasts.tk/" target="blank">http://</a>Stolen Last<br>
    <br>

    <strong>Acteurs/Actrices</strong><br>
    <a href="http://katehudsonfan.org/" target="blank">http://</a>Kate Hudson Fan<br>
    <br>

    <strong>Chanteurs/Chanteuses</strong><br>
     <a href="http://rockyoujustin.com/" target="blank">http://</a>Rock You Justin<br>
     <a href="http://jbfrance.net/" target="blank">http://</a>Jonas Brothers France<br>
     <a href="http://just-lorie.net/" target="blank">http://</a>Just Lorie<br>
    <br>

    <strong>En attente</strong><br>

    <a href="http://www.mileyonline.fr" target="blank">http://</a>Miley Online<br>
    <a href="http://leonaweb.net/" target="blank">http://</a>Leona Web<br>
    <a href="http://wentworthearlmiller.com/" target="blank">http://</a>Wentworth Miller Hot Line Website<br>
    <a href="http://gossip-france.net/" target="blank">http://</a>Gossip France<br>   
</div>

<?php include('footer.inc.php'); ?>

[Dudu]

Oui ça pose un gros problème de sémantique.

Une balise <div></div> n'est absolument pas faite pour contenir du texte brut. Elle est faite pour avoir des balises-enfants qui, elles, vont structurer le texte.

Alors oui évidemment tu peux écrire une lettre de motivation dans un tableur Excel, oui évidemment tu peux faire ta comptabilité dans une animation Flash, oui évidemment tu peux faire l'Enduro du Touquet avec une trotinette.

Mais ce n'est pas fait pour ça !

Une balise <div></div> sert à diviser ta page en quelques grandes parties, par exemple un <div id="en-tete"></div> ensuite un <div id="partie-centrale"></div> ensuite un <div id="pied-de-page"></div>. Mais ça ne sert à rien d'autre.

Un article éloquent sur ce problème a été écrit par Raphaël sur Alsacréations: Arrêtons de remplacer systématiquement les tableaux par des div !

Dans ton code, ça

<div class="contenu_title">AFFILATES</div>

pourrait être avantageusement remplacé par ceci

<h2>AFFILATES</h2>

Ainsi que ça

<strong>Graphiques/Design</strong>
    <br>
    <a href="http://obsession27.free.fr/" target="blank">http://</a>Obsession27 
    <br>
    <a href="http://pagesperso-orange.fr/simplygraphix/" target="blank">http://</a>Simply Graphix
    <br>
    <a href="http://graphix-illusion.fr/" target="blank">http://</a>Graphix-Illusion 
    <br>
    <a href="http://f.deneige.free.fr/" target="blank">http://</a>Fleurs des Neiges
    <br>
    <a href="http://stonelasts.tk/" target="blank">http://</a>Stolen Last<br>
    <br>

    <strong>Acteurs/Actrices</strong><br>
    <a href="http://katehudsonfan.org/" target="blank">http://</a>Kate Hudson Fan<br>
    <br>

    <strong>Chanteurs/Chanteuses</strong><br>
     <a href="http://rockyoujustin.com/" target="blank">http://</a>Rock You Justin<br>
     <a href="http://jbfrance.net/" target="blank">http://</a>Jonas Brothers France<br>
     <a href="http://just-lorie.net/" target="blank">http://</a>Just Lorie<br>
    <br>

    <strong>En attente</strong><br>

    <a href="http://www.mileyonline.fr" target="blank">http://</a>Miley Online<br>
    <a href="http://leonaweb.net/" target="blank">http://</a>Leona Web<br>
    <a href="http://wentworthearlmiller.com/" target="blank">http://</a>Wentworth Miller Hot Line Website<br>
    <a href="http://gossip-france.net/" target="blank">http://</a>Gossip France<br>

qui serait 1000 fois plus simple écrit ainsi

<h3>Graphiques/Design</h3>
    <ul>
    <li><a href="http://obsession27.free.fr/" target="blank">http://</a>Obsession27</li>
    <li><a href="http://pagesperso-orange.fr/simplygraphix/" target="blank">http://</a>Simply Graphix</li>
    <li><a href="http://graphix-illusion.fr/" target="blank">http://</a>Graphix-Illusion</li>
    <li><a href="http://f.deneige.free.fr/" target="blank">http://</a>Fleurs des Neiges</li>
    <li><a href="http://stonelasts.tk/" target="blank">http://</a>Stolen Last</li>
    </ul>

    <h3>Acteurs/Actrices</h3>
    <ul>
    <li><a href="http://katehudsonfan.org/" target="blank">http://</a>Kate Hudson Fan</li>
    </ul>

    <h3>Chanteurs/Chanteuses</h3>
     <ul>
     <li><a href="http://rockyoujustin.com/" target="blank">http://</a>Rock You Justin</li>
     <li><a href="http://jbfrance.net/" target="blank">http://</a>Jonas Brothers France</li>
     <li><a href="http://just-lorie.net/" target="blank">http://</a>Just Lorie</li>
     </ul>

    <h3>En attente</h3>
    <ul>
    <li><a href="http://www.mileyonline.fr" target="blank">http://</a>Miley Online</li>
    <li><a href="http://leonaweb.net/" target="blank">http://</a>Leona Web</li>
    <li><a href="http://wentworthearlmiller.com/" target="blank">http://</a>Wentworth Miller Hot Line Website</li>
    <li><a href="http://gossip-france.net/" target="blank">http://</a>Gossip France</li>
    </ul>

c'est plus simple pour moi comme ça je sais à quoi ça correspond

Alors dans ce cas, bonne continuation et bon courage.

À bientôt !

[paolodelmare]

tu peux faire ta comptabilité dans une animation Flash

Là y'a challenge !