18041 sujets

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

Texte qui sort d'une div

Bonjour,

Voila je travaille actuellement sur un site qui doit d'adapter à TOUTES les résolutions d'écran (ordinateurs mais au aussi smartphone, tablettes etc).
J'ai donc l'intégralité des dimensions de mes div en pourcentage.


<div class="clear">
</div>
		
	<a href="#" id="pt3"></a>
	<section id="about">
		<div class="bloc" style="background: #1a1262;">
				<h3 class="fitted">Le luxe révèle l'essence même d'une époque</h3>
		</div>
		<div class="bloc">
			<p class="pfitted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam orci, accumsan nec blandit et, scelerisque ac metus. Nunc tristique rutrum malesuada. Mauris enim eros, egestas at laoreet a, posuere id sem. In sagittis ipsum quis nulla tincidunt aliquam. Sed in sapien vel augue vulputate rutrum. Nullam hendrerit augue quis turpis sodales venenatis. Sed consequat viverra turpis, quis mattis sapien tempus ut. Morbi sed nisl sed leo tempor bibendum. Vestibulum nec magna id eros varius malesuada. Sed augue elit, ornare vitae bibendum in, semper eu enim. Nulla tempus pellentesque eros. Praesent sem ligula, viverra eu placerat sit amet, ultrices vel dolor. Nulla venenatis accumsan convallis. Donec eget consequat elit. Sed lacinia nulla vitae lacus imperdiet dapibus. Sed imperdiet lorem sapien, sed gravida odio.
                      </p>
		</div>
	</section>

		<div class="clear">
		</div>

Modifié par 5KRO (17 Oct 2012 - 08:45)
Désolé, erreur de manipulation... je continue ici.
Ci-dessus mon code html donc...
Ci-dessous mon CSS :


.bloc{
	float: left;
	width: 50%;
	height: 100%;
}

.bloc p{
	color: #000;
	margin: 4em;
}

.bloc h3{
	color: #FFFFFF;
	display: inline-block;
	margin: 0.5em;
	text-transform: uppercase;
	vertical-align: bottom;
	width: 90%;
}

.content{
	width: 100%;
}


Il y a un script qui scroll automatiquement jusqu'au point de référence, ici 
<a href="#" id="pt3"></a>
.
Il y a aussi un script qui permet de resizer automatiquement la police en fonction de la largeur de l'écran. (Fittext)
Le problème est que mon texte ne se resize pas AUSSI en fonction de la hauteur, ce qui fait qu'il dépasse du bloc lorsque je réduis fortement la hauteur du navigateur.

J'ai cherché partout sans trouver de solution adaptée.
Auriez-vous une idée ?


Merci d'avance ! Smiley biggrin
Administrateur
5KRO a écrit :

Le problème est que mon texte ne se resize pas AUSSI en fonction de la hauteur, ce qui fait qu'il dépasse du bloc lorsque je réduis fortement la hauteur du navigateur.

J'ai cherché partout sans trouver de solution adaptée.
Auriez-vous une idée ?


Merci d'avance ! Smiley biggrin

Bonjour,

En effet, la propriété height (par ex. height: 100%;) fixe à tout jamais la hauteur d'un élément, et le comportement normal est que si cet élément contient un autre élément plus haut, ce dernier doit déborder.

Je te conseille plutôt d'utiliser min-height: 100%; qui permettra au bloc de pouvoir être redimensionné en fonction de son contenu.
Sujet clos
Aller à