18041 sujets

Questions générales et questions de débutants

Balise span

Bonjour,

Je progresse, je progresse. Mais de temps en temps je rencontre encore des points de détails sur lesquels je bute.
Sur une même ligne, je veux un Mot, un couple image/mot, un couple image/mot. Ma question porte sur l'espacement entre ces 3 parties. J'ai procédé comme cela :

<span class="fond">
<span> Mot1 </span>
<img src="Images/Treffle.gif"/>
Contact
<span>&nbsp;</span> <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
<img src="Images/Treffle.gif"/>
Programme
/span>

J'ai comme un doute... Smiley cligne Doit y avoir moyen de faire plus simple et logique.
Padding ou margin sur des span?
Mauvaise utilisation des span?
...

Bref je seche.
Merci d'avance.
Salut,

Je ne comprend pas tous tes span;
mais moi je ferai un truc comme ça :


<ul class="block3parties">
	<li class="mot1">Mot1</li>
	<li class="contact"><img src="images/Treffle.gif" />Contact</li>
	<li class="programme">Programme<img src="Images/Treffle.gif" /></li>
</ul>

avec du css autour et voilou...
Ce que tu me proposes, est une liste. Je cherche, à partir de mots et images placés sur la même ligne à les agencer correctement, en les espaçant (d'ou mes <span>&nsb</span>) correctement.
Quand bien même; ça marche pareil avec des span

le css qui va bien

ul {
	list-style-type: none;
	margin: 0; padding: 0;
	background: Red;
	width: 300px;
	height: 60px;
	position: relative;
}

li { 
	background: Green;
}

.programme, .contact, .mot1 {
	position: absolute;
	top: 20px;
}

.mot1 { left: 10px;}
.contact { left: 100px; }
.programme { right: 10px;}

Modifié par predat (05 Mar 2008 - 17:36)
La solution proposée par predat est inadaptée dans le sens où le moindre agrandissement de polices provoquera des superpositions. De plus, sans connaître le contexte, il est bien audacieux d'opter pour une liste non ordonnée…

Simple et robuste: rester dans le flux et se baser sur l'utilisation de marges latérales.
peut-être comme ça alors :

le html :

<div class="block">
	<span class="mot1">Mot1</span>
	<span class="contact"><img src="images/Treffle.gif" alt="image1" />Contact</span>
	<span class="programme">Programme<img src="Images/Treffle.gif" alt="image2" /></span>
</div>


et le css :

.mot1 {
	padding-right: 2em;
}
.contact {
	padding-right: 2em;
	padding-left: 2em;
}
.contact img {
	padding-right: 1em;
}
.programme {
	padding-left: 2em;
}
.programme img {
	padding-left: 1em;
}
Je suis nouveau en création WEB et après avoir parcouru votre site (très intéressant de surcroît...) et ce forum, je n'ai pas trouvé réponse à mon problème.

Modération: merci d'ouvrir un nouveau sujet s'il s'agit de présenter un problème différent.
Modifié par Florent V. (02 Apr 2008 - 00:03)
Bonjour,

Chaque problème étant singulier, merci d'ouvrir un nouveau sujet.
Par ailleurs, ça rend le forum plus gérable et plus simple à suivre. Smiley cligne
Modifié par Florent V. (02 Apr 2008 - 00:03)
Sujet clos
Aller à