CSS [Résolu]

Question

Zelenka

5 Apr 2008 à 20:39

Bonjour à tous

Je suis nouvelle sur ce forum et plus que débutante en css et xhtml alors soyez indulgents avec moi car je sais que je vais poser une question que vous allez trouver hyper bête mais bon faut quand même que je sache.... Smiley langue

Voilà est-ce qu'il y a un "truc" pour qu'un texte super long qui serait écrit sur une même ligne soit mis en forme automatiquement pour rester dans la page sans créer une barre de défilement en bas de page?? J'ai essayé avec padding margin width rien n'y a fait. Alors est-ce que la seule solution soit que le webmaster fasse en sorte d'écrire comme il faut pour ne pas dépasser de la page en utilisant br??

merci pour vos réponses Smiley smile

Modifié par Zelenka (05 Apr 2008 - 23:35)

Heyoan

5 Apr 2008 à 20:48

Bonjour Zelenka et bienvenue Smiley cligne

,

le comportement que tu décris est celui par défaut d'un texte si son élément conteneur n'a pas une dimension figée en hauteur et qu'il peut s'agrandir en fonction de son contenu.

Le problème se pose également si le texte en question ne comporte pas d'espaces Smiley langue

...

Tu as un bout de code (html et css) à nous montrer ?

Edit: un petit exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Blabla</title>
	<style type="text/css">
		#global {
			width: 500px;
			margin: auto;
		}
	</style>
</head>
<body>
<div id="global">
<p>Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli Bla Bla Bli Bli</p>
</div>
</body>
</html>

Modifié par Heyoan (05 Apr 2008 - 20:57)

Zelenka

5 Apr 2008 à 21:14

Merci pour l'accueil Smiley biggrin

Non à vrai dire j'en suis à faire des essais avec les balises et la mise en forme avec le css et j'essaie de bien comprendre le fonctionnement avant de me lancer complètement dans mon site. J'ai déjà lu un livre sur le xhtml et le css mais bon je peux pas poser des questions au livre... Smiley help

A oui j'oubliais je veux faire mon css en externe. Smiley lol

Modifié par Zelenka (05 Apr 2008 - 21:15)

Zelenka

5 Apr 2008 à 21:57

Voilà mon essai de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta name="author" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="keywords" lang="fr" content="" />
<link rel="stylesheet" type="text/css" href="style2.css" title="default" media="screen" />
</head> 

<body>
  <h2>Bienvenue</h2>
  <p><a href="#">Pour en savoir plus sur cliquez ici.</a></p>
  <p>zzllmmmmmmmmmmmmmmmmmmmmmmssssssssssssssssssssssssssssssssssssssssssssssssssssssssssmmmmmmmmmmmmmmlllllllll</p>

</body>
</html>

body
{
  background-image:url("f4.png"); 
  font-family: verdana;
  text-align:center;
}
p
{ width:10%;
  border-width: 5px;
  border-style: solid;
  border-color: solid black;
  margin-left:auto;
  margin-right:auto;
   
}

Donc si le résultat est comme sur mon ordi le texte "pour en savoir plus...." lui s'est redimensionné tout seul alors que le texte "n'importe quoi" lui s'étire sur la droite de l'écran. Alors pourquoi cela marche avec l'un mais pas l'autre?

Heyoan

5 Apr 2008 à 22:14

Comme dit plus haut, "Le problème se pose également si le texte en question ne comporte pas d'espace" ! Un mot plus long que la largeur disponible ne peut pas être automatiquement coupé d'où l'apparition de la barre de défilement Smiley ravi

!

C'est un classique de la phase de tests et c'est très facilement réglé en utilisant de "vrais" mots (c'est aussi pour cette raison qu'on se sert du Lorem ipsum).

A+
Modifié par Heyoan (05 Apr 2008 - 22:15)

Zelenka

5 Apr 2008 à 23:35

Merciii!!

Ce que je suis bête ce n'était qu'une erreur de ma part, j'avais pas pensé à l'espace entre les mots. Cela marche bien mieux avec Lorem Ipsum Smiley ravi

je vais pouvoir continuer à faire des tests. Merci encore Heyoan Smiley cligne

Sujet clos

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

CSS [Résolu]