28172 sujets

CSS et mise en forme, CSS3

Centrer un texte en fonction de l'existence (ou non) d'un autre bloc

Bonjour,

Je bute sur un problème que j'ai bien du mal à définir. J'espère que je serai clair dans mes explications :

Il était une fois un bloc dont le contenu (texte) devait être toujours centré.
upload/7957-001.gif

Seulement parfois, un bloc (logo) apparaît en haut à gauche et je voudrais que lorsque ce deuxième bloc est là, le texte se décale de manière à ce qu'il soir centré sur la place restante
upload/7957-002.gif

Avec les images, c'est mieux ! Smiley smile

Comment faire ça en CSS svp ?
Je sais qu'il faudra utiliser le float:left, mais ce n'est pas suffisant...

merci par avance
Modifié par cevichero (08 Dec 2010 - 15:04)
Hello.

En positionnant ton logo en absolute, il sortira du flux et ne décalera plus ton texte dans ton header.

A+
Justement, je voudrais qu'il le décale... Smiley cligne

Voici mon code :

<div class="entete">
<div class="pastilleVerte"> style="display:{displayOfferBtn};">{offerBtn}</div>
    	le <span class="big">deal</span> du jour
        <div class="close"><a href="action.php?type=1&cId={campaignId}&internalId={internalId}&appId={appId}"></a></div>

    </div>


et mon CSS :

div.entete {
	background-image: url(../bck_entete.png);
	background-position: 0 0;
	background-repeat: repeat-x;
	font-size: 23px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	height: 47px;
	padding: 5px 0 0 35px;
}
div.pastilleVerte {
	background-image: url(../past_verte.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 127px;
	height: 80px;
}


en espérant que cela inspire quelqu'un
merci
Arf, j'avais lu de travers. En gardant le logo en absolute, et avec un texte indent de la largeur du logo, ça doit le faire.

Il doit y avoir une solution plus propre de faire, là c'est juste une idée quick and dirty.
Florian_R a écrit :
Arf, j'avais lu de travers. En gardant le logo en absolute, et avec un texte indent de la largeur du logo, ça doit le faire.

Il doit y avoir une solution plus propre de faire, là c'est juste une idée quick and dirty.

Excuse, je n'ai pas compris ta proposition, tu peux m'expliquer stp ?

Sinon, en bidouillant, j'ai trouvé ça mais ça ne marche pas complètement sur IE (7 et8) :
div.entete {
	position: relative;
	font-size: 23px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	height: 47px;
	max-width: 700px;
	padding: 5px 0 0 0;
}
div.textEntete {
	text-align: center;
	width: 82%;
	margin: 0 auto;
}
div.entete span.big {
	font-size: 27px;
}
div.pastilleVerte {
	float: left;
	font-size: 19px;
	color: #FFF;
	text-shadow: 0 0 1px #066;
	line-height: 18px;
	width: 16%; /*127px*/
	min-width: 111px;
	height: 70px; /*80px*/
	padding: 10px 10px 0 6px;
	margin-top: 5px;
	margin-left: 10px;
}


et pour le html :
<div class="entete">
    	<div class="pastilleVerte" style="display:{displayOfferBtn};">{offerBtn} au clic</div>
        <div class="textEntete">le <span class="big">deal</span> du jour</div>        
    </div>


est-ce que ça vous parle ?
merci
Modifié par cevichero (09 Dec 2010 - 10:47)
Mmmh et en ajoutant une balise ?
Genre :
<div id="header">
    <ton logo />
    <div id="en_plus">Ton texte</div>
</div>


Du coup, tu pourrais mettre ton logo en float left et ton div "en_plus" avec un "float:left;" et un "text-align:center" et ton prob serait réglé...

Pas eu le tps de tester, mais dans l'idée, ça devrait te simplifier les choses !
merci pour ta réponse,
Tout compte fait, j'ai abandonné cette idée de bloc qui repousse l'autre selon sa présence ou non. trop complexe à gérer.
Du coup, j'ai créé une page et un style différent pour chaque possibilité...
merci en tout cas !
Sujet clos
Aller à