[résolu] Remplacer balise <br/> avec CSS

Salut

Question de débutant, mais j'ai pas trouvé dans la FAQ.

Pour mettre un espace vertical entre 2 tableaux avant on mettait un <br/> et le tour était joué.

Avec XHTML et CSS, pour faire pareil entre 2 blocs <div>, je fait comment maintenant ?

Merci
Thierry
Modifié par profilm (30 Jul 2005 - 23:19)

Salut,

<br /> n'a jamais servi à faire des espaces verticaux.

<br /> est un saut de ligne (break line).


Pour gérer les espaces verticaux, tu dois utiliser les marges.

super je suis bien avancé merci pour votre aide concise !

je débute XHTML et CSS, donc un peu d'indulgence est la bienvenue

que la paix soit avec vous ..

profilm a écrit :
pourquoi mon règlage marging/padding est tip top nikel sous firefox, mozilla, opéra et netscape et que sous IE6 c'est décalé ?

hormi le fait que c'est une daube, y a quand meme 85 % de gonz qui vont voir mon site avec s'il ne sont que 15% à le voir nickel, c'est pas normal .. que faire (à part envoyer un skud à bilou )

@+

Alors, que faire ?
plusieurs choses

* Ne pas nous parler comme à tes copains djeunz, parcequ'on est un peu débile sur les bords et qu'on ne comprend pas (plus sérieusement, t'exprimer normalement serait chouette ! enfin tip top comme tu dis )
* Nous montrer ton code pour en savoir plus sur ce que tu as fait, eh oui nous ne sommes pas devin et il nous est difficile d'observer quoi que soit !
* Ne pas troller sur la qualité (ou non qualité) d'IE, le problème étant surtout situé du fait de son grand âge

p.s. il n'a été aucune fois question de non indulgence ou n'importe quoi de ce style dans nos interventions, elles étaient courtes certes, mais justes et non agressives
Il manquait peut être quelques smileys pour faire passer l'humeur et quelques explications plus détaillées, mais nous répondons parfois en coup de vent ! C'était le cas pour mon intervention
Modifié par Olivier (28 Jul 2005 - 00:06)

Salut Olivier

1) j'ai pas de copain "djeunz", mon fils de 20 ans surement
2) au vu du langage général des forums tels celui ci, je n'ai pas l'impression que mon language manque de respect, mais si c'est le cas 1000 excuses, ce n'est vraiment pas le propos.
3) je bosse 10 h par j, dirige 2 stés (si si ca existe encore des furieux) et je fais un nouveau site en + le soir (en partant presque de zéro) donc, quand j'ai un problème, je vais au + pressé et je cherche le résultat, plutot que les mondanités et le dialogue métaphysique ..

bon, ceci étant clarifié, il n'y a pas de problème OK ? Le code est le suivant :

<div class="bloc10">photo en CSS</div>
<div class="bloc11"><h5>SECURISEZ VOTRE IDENTITE !</h5>
<p>Ce guide, rédigé par un journaliste, contient de précieux conseils pour éviter d'être victime de ce délit. Il présente également des exemples concrets, des statistiques, ainsi qu'une liste des documents à conserver et durant combien de temps. Vous saurez donc
quoi détruire et quand !</p><div class="intro2"><div class="element_liens"><p><li><a href="page1.html">Cliquez ici pour télécharger le guide pratique en pdf</a></li></p>
</div></div></div>
<div class="bloc12">provisoire</div>
<div class="bloc13">provisoire</div>

le CSS :

.bloc10 {
background-image: url("pdf1.gif");
background-repeat: no-repeat;
height: 150px;
width: 70px;
float: left;
border-top:2px dotted silver;
border-bottom:2px dotted silver;
margin-top: 10px;
padding-bottom:20px;
padding-right:5px;
padding-left:5px;

}
.bloc11 {
background-color: white;
height: 150px;
width: 390px;
float: left;
border-top:2px dotted silver;
border-bottom:2px dotted silver;
margin-top: 10px;
padding-bottom:20px;
padding-right:10px;
padding-left:10px;
}
.bloc12 {
background-color: white;
height: 150px;
width: 10px;
float: left;
margin-left: 10px;
margin-top: 10px;
padding-bottom:20px;
padding-right:5px;
padding-left:5px;
}
.bloc13 {
background-color: white;
height: 150px;
width: 403px;
float: left;
border:1px solid black;
margin-top: 10px;
padding-bottom:10px;
padding-top:20px;
padding-right:5px;
padding-left:5px;
}

Et ca va partout sauf sur IE ...
Thierry

<modération>Message édité pour remplacer les [ quote ] (citation) par des [ code ] (balisage du code) </>
Modifié par Laurent Denis (28 Jul 2005 - 10:13)

Oups, tu as du t'emmeler avec le bouton "code" qui fonctionne d'une façon assez "désopilante"

Une petite remarque concernant ton code :

tu utilise des id pour nommer tes div, c'est bien c'est comme ça qu'il faut faire. Par contre il est recommandé de suivre quelques règles pour les nommer : ne pas utiliser "block1" "block2" comme tu le fais mais plutot utiliser des noms qui évoquent la fonction du block : "menu", "navbar" ," footer", "contenu" etc.

ça te permettra de mieux te relire maintenant et plus tard, etc. Bref c'est mieux de faire comme ça et c'est nettement mieux pour toi au passage.

<p><li><a href="page1.html">Cliquez ici pour télécharger le guide pratique en pdf</a></li></p>

Petite erreur : les <li> (élément de liste) doivent se trouver dans un bloc de liste ordonnée (ol ) ou non ordonnée (ul) ce qui est le cas ici. Cette liste complète (conteneur + élément) ne peut pas se trouver dans un paragraphe (qui ne peut contenir que des éléments inline).

http://www.openweb.eu.org/articles/xhtml_une_heure/

Au final ton truc doit faire en sorte que chacun des div se mette à droite du précédent (et aillent à la ligne quand nécessaire) c'est ça ?

Dans ce cas, tu as bien fait : tu les as tous fait flotter . ensuite tu n'as qu'à leur spécifier un padding ou margin.

<modération>

Les deux messages hors-sujets d'autres intervenants qui précédaient celui-ci ont été supprimés.

Le malentendu entre Olivier et profilm étant éclairci par leurs messages respectifs, pourrait-on se concentrer sur le problème concret de CSS et d'HTML, svp?

</>
Modifié par Laurent Denis (28 Jul 2005 - 10:01)

OK merci à tous, je vais creuser tout ca en cherchant ce qui va pas et en modifiant ce qui peut pécher dans le code (les <li>).

C'est quand meme dommage que tous les navigateurs rendent le booulot OK et que seul IE le fasse pas. J'espere que IE7 va corriger ca.

@+ tard
Thierry