Besoin (depuis le début) d'une pour style CSS

Bonjour,
Je suis concepteur d'un site qui jusqu'à maintenant a assez bien fonctionné. Désirant apprendre plus, je me suis mis à le modifier pour éliminer toutes les <table>, <tr> et autres <td> pour les convertir directement en <div> ou autres. C'est à dire des pages pleinement prises en charge par le CSS.
Ma surprise déjà c'est l'énorme différence d'interprétation entre les navigateurs. Tout de même, j'ai pris mon courage à deux mains, mes pieds aussi, j'ai commencé.
Je bute sur un problème que je n'arrive pas à résoudre.
Je mets une image de l'apparence que je désire.

Donc, une photo entièrement à gauche, puis le nom de la rubrique qui suit à droite en haut (tout en restant à gauche de ce qui suit). Puis un surtitre, un titre, une date et un auteur, suivis d'un texte d'annonce. Pour l'instant, j'ai réussi tel que vous voyez sur l'exemple à avoir ce que je désire mais avec de la triche.
Pour la photo c'est OK.
Pour le nom de la rubrique, il est contenu dans un <div> ou <span> mais je le fait suivre d'un <br>.
De même pour le surtitre, le titre (ces deux là possèdent des liens href), la date et le nom de l'auteur, je les fait suivre par des <br>.
Ce que je voulais et d'après les exemples que j'ai pu voir un peu partout, il est possible de les mettre chacun dans un <div>, <p> ou <span> de telle sorte qu'il y ait un retour à la ligne après sans ajouter les <br>.
Pour une première requête, je sais que j'en demande un peu trop surtout qu'il a fallu lire tout ce qui précède. Désolé, mais si c'est possible de m'orienter. Je n'ai pas mis de source parce que, malgré qu'il est valide, je sais qu'il est lamentable.

Merci.

kabeda a écrit :
Je suis concepteur d'un site qui jusqu'à maintenant a assez bien fonctionné. Désirant apprendre plus, je me suis mis à le modifier pour éliminer toutes les <table>, <tr> et autres <td> pour les convertir directement en <div> ou autres. C'est à dire des pages pleinement prises en charge par le CSS.

Je dis ça dans l'absolu sans avoir vu le code du site que tu es en train de faire, mais la démarche "je remplace les <table> par des <div>" n'est pas la bonne. L'intérêt des standard est de rendre le contenu sémantique, en utilisant chaque balise appropriée pour le contenu auquel elles correspondent (<hn> pour les titres, <ul> pour les liste d'éléments non ordonnées, etc.) Le but n'est pas de remplir son code de <div>, qui doivent être utilisées avec parcimonie pour délimiter les différents blocs d'éléments au niveau du contenu. Bien sûr certains sites un peu plus complexes peuvent nécessiter d'avoir une structure un peu plus lourde en raison d'une présence de nombreux éléments qu'il est bon d'identifier dans des blocs, mais ce n'est en rien une "obligation".

kabeda a écrit :

Ce que je voulais et d'après les exemples que j'ai pu voir un peu partout, il est possible de les mettre chacun dans un <div>, <p> ou <span> de telle sorte qu'il y ait un retour à la ligne après sans ajouter les <br>.

Alors petite précision, une balise <span>n'aura pas naturellement de retour à la ligne, car il s'agit d'un élément de type "en ligne" et non de type "block", du coup le passage ne se fait pas, à moins que tu détermine que ton <span> s'affiche comme un élément de type "block". Le <div> est naturellement un élément de type "block", mais il y a souvent une balise plus sémantique. S'il s'agit d'un paragraphe de texte, comme cela semble être le cas, autant utiliser la balise appropriée <p> initialement de type "block".

kabeda a écrit :
Pour une première requête, je sais que j'en demande un peu trop surtout qu'il a fallu lire tout ce qui précède. Désolé, mais si c'est possible de m'orienter. Je n'ai pas mis de source parce que, malgré qu'il est valide, je sais qu'il est lamentable.

Il sera difficile de t'aider à améliorer le code si tu ne nous le montre pas, c'est en faisant des erreurs qu'on apprend, car on pourra plus facilement t'aiguiller à les corriger. Présentement, on ne peut que pleurer pour toi !

N'hésite pas à parcourir les tutoriels et la FAQ qui devraient déjà te fournir une belle base pour apprendre et améliorer tout çà.

Quoi qu'il en soit, bon courage à toi.

Bonjour,

a écrit :
la démarche "je remplace les <table> par des <div>" n'est pas la bonne.

C'est juste une façon de dire.

Je joint donc mon code. et l'image qui y est incluse.

Comme j'ai précisé auparavant, je tatonne dans les css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ma page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#page {}
#milieu {width: 780px;background-color:#FFFFFF;}
#centre {float:left; width:478px; margin: 4px;}	
.art_un {width: 100%;vertical-align: top;margin: 0px;padding: 0px;}
.containe {width: 100%;}
.lim {float: left;margin-right: 5px;}
.scsurtitleBLK {color: #333399;font-family: Arial, Helvetica, sans-serif;font-size: 10px;background-color : #E6F7F5;margin: 0px;padding-right: 4px;padding-left: 4px;padding-top: 0px;padding-bottom: 0px;display: block;}
.scsurtitle2 {color: #000000;font-family: Arial, Helvetica, sans-serif;font-size: 16px;	background-color : transparent;text-decoration : none;line-height: 18px;}
.scsurtitle2:hover {text-decoration : underline;}
.sctitle2 {color: #333399;font-family: Georgia, "Times New Roman", Times, serif;font-size: 20px;background-color : transparent;font-weight: bold;text-decoration : none;line-height: 23px;}
.sctitle2:hover {text-decoration : underline;}
.mydate {color: #000000;font-family: Arial, Helvetica, sans-serif;font-size: 11px;background-color : transparent;line-height: 14px;margin-top: 2px;margin-bottom: 2px;	display: inline;}
.scabstract2 {color: #000000;font-family: Arial, Helvetica, sans-serif;font-size: 16px;	text-align: justify;text-decoration : none;line-height: 20px;}
.scabstract2:hover {text-decoration : underline;}
-->
</style>
</head>
<body>
<div id="page">
<div id="milieu">
  <div id="centre">
    <div class="art_un">
      <div class="containe">
	  <a href="http://www.newloc.loc/article/2/2008-06-10/58512.html">
	  <img class="lim" src="P080610-02.jpg" alt="Tripoli est bien partie pour consacrer la division du monde arabe" align="left" border="0"></a>
        <div class="scsurtitleBLK">Actualité</div>
        <br>
        <a href="http://www.newloc.loc/article/2/2008-06-10/58512.html" class="scsurtitle2">LES CHEFS D’ETAT ARABES SE RÉUNISSENT AUJOURD’HUI À TRIPOLI</a> <a href="http://www.newloc.loc/article/2/2008-06-10/58512.html" class="sctitle2"><br>
        Faut-il participer au Sommet de Paris?</a> <br>
        <p class="mydate">10 Juin 2008 - Smail ROUHA</p>
        <br>
        <a href="http://www.newloc.loc/article/2/2008-06-10/58512.html" class="scabstract2">Les
        difficultés auxquelles fait face la France pour réunir tous les pays de
        la rive Sud de la Méditerranée autour d’une même table, montrent le
        manque d’attractivité du projet.<br>
        </a> 
		</div> <!-- containe -->
    </div> <!-- art_un -->

  </div> <!-- centre -->
</div> <!-- milieu -->
</div> <!-- page -->
</body>
</html>

Je précise que la page est beaucoup plus complexe mais pour l'instant je cale sur cet exemple.

Merci de m'écouter (me lire).

<div class="scsurtitleBLK">Actualité</div>
<br>

Ce <br> est inutile, comme indiqué précedemment, la balise <div> a un comportement block par défaut, cela signfie qu'elle occupe toute la place disponible en largeur. Le retour à la ligne suivante est donc implicitement obligatoire.
En enlevant le <br>, tu devrais toujours avoir ton lien sur la ligne suivante.

<a href="http://www.newloc.loc/article/2/2008-06-10/58512.html" class="scsurtitle2">LES CHEFS D’ETAT ARABES SE RÉUNISSENT AUJOURD’HUI À TRIPOLI</a> 
<a href="http://www.newloc.loc/article/2/2008-06-10/58512.html" class="sctitle2">
<br>Faut-il participer au Sommet de Paris?</a> 
<br>

Les <a> sont par contre par défaut en inline, signifiant qu'ils se mettent cote à coté sur la même ligne.
Si tu souhaites avoir chaque lien sur sa propre ligne, il te suffit de rajouter une déclaration display:block; dans la définition CSS de tes liens, ils se placeront alors comme expliqué avec l'exemple du <div> ci dessus.
Tu peux donc supprimer gaiement les <br> de cette partie du code.
Si tu souhaite gérer l'espacement entre chacun de tes éléments, regarde plutot du coté de margin-top: et margin-bottom plutot que de le gérer avec des <br>, d'ailleurs.

<p class="mydate">10 Juin 2008 - Smail ROUHA</p>
<br>
<a href="http://www.newloc.loc/article/2/2008-06-10/58512.html" class="scabstract2">
Les difficultés auxquelles fait face la France pour réunir tous les pays de la rive Sud de la Méditerranée autour d’une même table, montrent le manque d’attractivité du projet.<br></a> 

<p> est par défaut en block lui aussi donc le <br> suivant est inutile, et de même qu'au dessus, si tu veux ton lien sur une seul ligne, mets lui un display:block. Cela dit, ce n'est pas ce que tu veux à en juger par ton image, tu souhaites que le texte continue sous l'image, il te faut donc laisser ce lien en inline (les éléments de type block prenant forcément toute la largeur disponible, il va se mettre complétement sous ton image).

En espérant t'avoir un peu éclairé.

Bonjour,
Effectivement, en ajoutant :

.containe a {display: block;}

dans les styles, ça m'a réglé mon problème de <br>.
Merci.

Il reste que pour Actualité je l'ai changé de <div> en <p> en changé son style en mettant le display en inline. Avec FF ça fonctionne extra, mais avec IE, j'ai un petit espace au-dessus. Je fouille encore.
Modifié par kabeda (13 Jun 2008 - 12:02)

Bonjour,
J'ai réglé mon problème d'espace. La clef se trouvait dans les éléments parents (je pense).