18067 sujets

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

Probleme taille du conteneur

Rebonjour
Dans un précèdent post je me demandais comment placer du texte entre deux image de façon centrée problème résolu grâce a vous comme ceci avec span.

Mon nouveau problème est que l'image de droite se cale à l'extrême droite de mon conteneur sidebarBox or je voudrais moi que cette image vienne juste après le mot indépendamment de la taille du conteneur

Comment faire ?


<div class="sidebarBox">
 		<h3>
			
				<span>$Title</span>
			
  		</h3>



#sidebarBox { 
 	width: 200px; 
	float: left;  
	padding: 0;
}
#Sidebar h3  { 
		clear: both; 
		text-transform: lowercase;
		color: #000;
		font-weight: 700; 
		font-size: 1.4em; 
		margin: 0 0 0px 0;
		text-align:center;
		background: white url(../images/side_menu_black_rectangle.gif) no-repeat left center;
			
	}


		#Sidebar h3 span { 
    display:block;
	background: transparent url(../images/side_menu_black_rectangle.gif) no-repeat right center;
			
	}



merci pour d'avance pour votre aide
Salut,

Dans ce cas-là ne met pas un display:block sur le span, mais un padding-right, d'environ la largeur de ton image + quelques pixels.
Merci pour ta reponse, ce que je ne comprend pas c'est que lorsque je fais cela le mot passe en dessous des deux images ou n'est pas centrer mais plus vers la droite.

Merci
Oups pardon un peu trop pressé Smiley cligne

En fait mon problème est que lorsque j'utilise padding-right pour l'image, cela la met a une certaine distance de l'autre mais pas du mot.

De plus le mot en question va changer de manière dynamique.

Je cherche donc un moyen pour centrer le mot entre les deux images qqsoit sa taille.

J'espère avoir été plus clair

Merci
C'est bien pour ça que le padding-right sur le span ainsi que la suppression du display:block de ce span devrait répondre à ton problème.

Dans le cas contraire, le mieux serait que tu nous montres un exemple en ligne de ce que tu obtiens (pas un screenshot ...), on pourra se rendre compte par nous même et te donner des réponses plus précises.
Salut,

Comme te l'as suggéré Agylus, pourrais tu faire un effort autant pour exprimer tes idées que pour t'exprimer en français. Ce forum se veut être accessible, et je suis très sceptique sur l'interprétation de "qqsoit" par un lecteur d'écran...

Quand à ton problème, aurais tu idéalement une page en ligne, ou sinon un schéma de ce que tu souhaite faire, histoire qu'on puisse comprendre par l'image ce qu'il est difficile de comprendre par tes explications ? Smiley cligne
Merci pour votre aide a tous,

Je pense que votre attitude n'est pas très constructive et très orienté "donnage de leçon"

Que vous pensiez être le sel des terres numériques vous regarde, quand à moi j'irais voir ailleurs car j'ai besoin d'aide...

Merci quand même pour celle (l'aide) donnée jusqu'ici.

Cordialement
Salut,

Concernant le "sel des terres numériques", on est comme tout le monde, on ne sais pas allumer la lumière si on ne sais pas ou est l'interrupteur...

Le dialogue constructif passe par le dialogue, ce que nous cherchions à faire, et si nous te demandions des explications plus claires, une page en ligne, ou un schéma, c'est pour pouvoir t'aider et répondre au mieux à ta question. Maintenant si tu n'as ni la patience de nous expliquer, ni la volonté de le faire, on ne pourra rien faire pour toi.

Bonne continuation.
Il ne s'agit pas de patiente ou de volonté, j'ai simplement exposé mon problème qui est le suivant


voici le lien vers la page
http://www.delair.fr/SilverStripe/de-lair-des-archives/?stage=Live

Et voici les problèmes :
- le carré noir à coté de "Maison rouge" est ferré totalement à gauche de même le
- le bouton 2002 qui se trouve sous le mot archive, descend sous les crochets au rollOver


voici la css pour le mot Maison rouge



.typography h1 {
	padding-right: 120px;
	font-size: 20px;
	background: white url(../images/carre_titre_01.gif) no-repeat right center;
}


et celle pour le bouton 2002


ul#Menu2 li a:hover,
      	ul#Menu2 li a.current,
      	ul#Menu2 li a.current:hover {
        background: #fff url(../images/left_bw_hook.gif) no-repeat left center;
        color: #666;
		cursor: pointer;
        text-decoration: none;
      	}
ul#Menu2 li a.levela:hover span,
      	ul#Menu2 li a.current span,
      	ul#Menu2 li a.section span,
      	ul#Menu2 li a.section:hover span,
      	ul#Menu2 li a.current:hover span {
			padding-right:50px;
			background: transparent url(../images/right_bw_hook.gif) no-repeat right center;


J'espère que c'est assez clair

Merci
Sujet clos
Aller à