28106 sujets

CSS et mise en forme, CSS3

Bonjour,

Je conçois actuellement une template pour un site personnel. Le site en lui même est composé de deux parties, l'une contient un menu qui se trouve à gauche et l'autre qui contient les informations à droite. Lorsque la partie de droite reçois trop d'information le texte dépasse et déforme donc ma page.

Voici mon code source html:

/* Structure de la page
----------------------------------------------- */
#container{
	border-top:1px solid #230;
	border-right: 1px solid #230;
	width:760px;
	margin: 0px; 
	padding: 0px; 
	background: transparent url(images/topbg.gif) repeat-x;
}
#footer{
	position:absolute;
	left:0;
	top:230px;
	font: 10px verdana, arial, sans serif; 
	color:#fff;
	margin:0 30px 0 400px;
	width:340px;
	text-align:right;
}
#quickSummary{
	margin: 0 0 0 355px;
	width:332px;
	height: 200px;
	background: #ABBC47 url(images/quicksumbg.gif);
	border-right:1px solid #ABBC47;
	border-top:1px solid #ABBC47;
}
#quickSummary p.p1 {
	font: bold 11px/14px arial,verdana, sans serif;
	color:#fff; 
	padding:100px 30px 2px 30px;
}
#quickSummary p.p2{
	position:absolute;
	left:0;
	top:230px;
	font: 10px verdana, arial, sans serif; 
	color:#fff;
	margin:0 30px;
}
#quickSummary p.p2 a, #footer a{	color:#fff; }
#quickSummary p.p2 a:hover, #footer a:hover{ color:#230; background-color:#fff;text-decoration:none; }
#quickSummary .p1{ margin-top:0; }	
#preamble{
	padding:50px 30px 30px 30px;
	margin:30px 0 0 355px;
	border-width:0 0 1px 1px;
	border-color:#fff #ddd;
	border-style:solid;
	text-align:left;
	background: transparent url(images/endsection.gif) no-repeat bottom center;

	width:343px;
}

#preamble p { text-align:justify; }
#preamble h3{
	background: transparent url(h3preamble.gif) no-repeat bottom left; 
	margin: 0px;
	width: 270px; 
	height: 36px;
	border-bottom:1px solid #ddd;
}
#preamble h3 span{ display:none; }
#preamble p.p1{	width: 270px; }
#supportingText {
	border-width:0 0 1px 1px;
	border-color:#fff #ddd;
	border-style:solid;
	margin:0px 0px 0px 355px;
	padding:50px 30px 0 30px;
	width:405px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width:343px;
	height: auto;
}
#Contents {
	padding:0 0 20px 0;
	margin-bottom:20px;
	text-align:left;
	background: transparent url(images/endsection.gif) no-repeat bottom center;
}

#Contents h3 { margin: 0px; min-width: 200px; height: 36px; border-bottom:1px solid #ddd; }
#Contents h3 span { display:none; }


Et voila mon code source html:

<div id="container">
	<div id="intro">
		<div id="pageHeader">
			<h1><span>Cité Scolaire de Nérac</span></h1>
			<h2></h2>
		</div>

		<div id="quickSummary">
			<p class="p1">Bienvenue sur le site de la cité scolaire de Nérac. Vous trouverez ici toutes les informations sur notre établissement ainsi que diverses ressources mises à votre disposition.</p>
			<p class="p2"></p>
		</div>
		<div id="preamble">
			<h3>Présentation</h3>
			<p class="p1"><span>blablablablablablablablablablablablablablablablablablablabla</span></p>
		</div>
	</div>

	<div id="supportingText">
		<div id="Contents">
			<h3>Les dernières nouvelles :</h3>
			<p class="p1"><span>blablablablablablablablablablablablablablablablabla</span></p>
		</div>
	</div>
	
	<div id="linkList">
		<div id="linkList2">
			<div id="lselect">
				<h3 class="select"></h3>
				<ul>
					<li><a href="#">Actualités</a><div class="c">Les nouvelles</div></li>
					<li><a href="#">Connection</a><div class="c">Se logger</div></li>
					<li><a href="#">Enseignants</a><div class="c">Listes des professeurs</div></li>
					<li><a href="#">Contact</a><div class="c">Nous contacter</div></li>
				</ul>
			</div>
			
			<div id="lressources">
				<div id="lressources">
					<h3 class="ressources"></h3>
					<ul>
						<li>Cours de SVT</li>
						<li>Cours de Physique</li>
						<li>Cours de Gestion</li>
					</ul>
				</div>
			</div>
			
			<div id="liens">
				<h3 class="links"></h3>
				<ul>
					<li><a href="http://redkod.byethost7.com/">Redkod</a></li>
					<li>Chez Jeannot.com</li>
				</ul>
			</div>
		</div>
	</div>
</div>


Je vous remercis d'avançe d'avoir pris le temps de lire mon message et eventuellement de me répondre.
Modifié par BenjaminMosse (17 Sep 2006 - 11:07)
Bonjour,

blablablablablablablablablablablablablablablablablablablabla est considéré comme un bloc (il n' y pas d'espace) comme une image par exemple ! Essaye avec : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor. In porta tortor non sapien vulputate imperdiet. Aliquam eget eros id turpis volutpat ornare. Pellentesque luctus malesuada turpis. Nam non diam at pede accumsan imperdiet. Sed lacinia mi et lacus. Praesent a sem. Suspendisse nisl lorem, consequat vel, mattis ac, placerat a, justo. Vestibulum volutpat eros sit amet felis. Proin vel ante et orci convallis suscipit. Donec sem augue, fringilla eget, hendrerit ac, porta a, ipsum.

Ca devrait le faire
Modifié par ghost (17 Sep 2006 - 00:36)
Pour être plus clair, les navigateurs web ne réalisent pas d'eux-même la césure des mots. Ils ne coupent donc pas les mots jugés trop longs.

Mais il faut avouer qu'un mot comme « blablablablablablablablablablablablablablablablablablablabla » est tout de même assez improbable, aussi le problème ne se pose-t-il que dans deux cas :
- les sites d'adolescents qui n'ont pas encore appris à se servir de la barre « espace » (il faut leur pardonner, ils sont jeunes) ;
- les liens dont le texte de contenu (celui entre les balises <a> et </a>) est l'URL complète elle-même (cas typique de l'adresse d'un article donnée dans les commentaires d'un billet de blog).

Pour le premier cas, il n'y a rien à faire. Pour le deuxième, beaucoup de CMS ou plateformes de blogs ont un filtre qui tronque le texte visible des URL trop longues, le lien lui-même étant pleinement fonctionnel bien sûr.
Bonjour,

Ah... J'aime les dimanches matins où l'on a le temps de creuser un peu un sujet, pour une fois Smiley ravi

Ici: "j'ai pleins de caractères sans espaces, et ça déborde, ou ça m'agrandit mon bloc".

En fait, le problème se pose bien plus fréquemment que cela, et en toute validité : toponymes, termes médicaux ou chimiques, ou simplement termes "longs" affichés en caractères agrandis par l'utilisateur sont autant d'exemples de débordement de texte courants dans les langues occidentales. Et ne parlons pas de ces gens qui ont la suprenante idée de faire du Web dans des langues saugrenues où l'on aime les mots-valises (<trol inside>le gallois, le maori, le néerlandais... </>). Et encore moins de ceux qui ont une toute autre idée sur la question, parce que les espaces et les "lignes" ont, pour eux, une valeur différente (le thai, etc.)

Pour la petite histoire, c'est sans doute l'un des problèmes les plus épineux à résoudre qui soit, car c'est avant tout en effet un problème d'internationalisation.

Très grossièrement, il exige à la fois:

1. un jeu de propriétés permettant de spécifier les règles de coupures de "mots", les "retours à la ligne" et les "espaces" dans des langues où ces notions sont radicalement différentes (quand elles existent), avec des degrés de "sévérité" nécessairement gradués (il faut bien arbitrer entre règles typo-linguistiques et accessibilité/design/workflow). Le brutal word-wrap: break-word CSS3 (implémenté actuellement par IE), qui permet de s'affranchir de ces règles linguistiques, n'est qu'une toute petite pièce du puzzle...

2. un système de dictionnaires ou un mécanisme similaire, permettant au navigateur de gérer les coupures valides par langue, lorsque cela va lui être demandé via les CSS auteur ou utilisateur (tiens, cela rappelle une certaine gestion des sigles, abréviations, acronymes et autres 1<sup>er</sup> / 1er par certaines synthèses vocales...).

3. un système de caractères spécifiques permettant à l'auteur d'indiquer par ailleurs des points de coupure possibles indépendamment de ce qui précède. Il est nécessaire sur le fond, mais c'est aussi l'inévitable et irrésistible tentation de trouver vite et mal une solution faute de mieux pour résoudre au moins les difficultés les plus flagrantes (c'est à dire en général "mon problème précis à moi" et "après moi le déluge"...).

4. Enfin, il renvoit clairement la balle dans le camp des CMS et de leurs fonctionnalités d'alerte et d'assistance au contributeur, ce qui est très intéressant, mais nous entraînerait un peu loin.

Côté propriétés CSS, CSS3 Text Effects Module et les mésaventures de cette partie de CSS entre "candidate recommandation" et retour à la case "document de travail" donnent une idée des difficultés rencontrées...

Côté dictionnaires natifs... nous en sommes, sauf erreur de ma part, au point zéro...

Côté caractères spécifiques, Unicode offre ce qu'il faut, avec par exemple le zero width space et le problématique soft hyphen (Unicode et ISO ne sont pas d'accord sur son rôle), mais:
- ce n'est pas encore cela côté implémentation dans les navigateurs (Firefox en particulier ignore le soft hyphen, avec des raisons peut-être défendables d'un certain point de vue)
- ... il faut une police Unicode pour l'espace qui n'en est pas un
- ce n'est qu'une réponse très partielle, inapplicable dans divers cas courants (url par exemple : attention au phishing involontaire).

Côté CMS... "plop" intégral aujourd'hui, à ma connaissance, en dehors effectivement du cas bien spécifique des urls tronquées.

Bref, tout cela est aujourd'hui très frustrant, ou passionnant, selon les points de vue Smiley ravi
Modifié par Laurent Denis (17 Sep 2006 - 09:23)
Je vous remercis de m'avoir permi à résoudre ce problème. En effet je pensais avoir mal conçu ma template et après avoir passé une heure sur ce soucis je m'apperçois qu'il n'y avait rien à faire. Merci encore pour l'aide et surtout pour les explications (il est toujours bon d'en savoir plus). J'ajoute [RESOLU] au nom du topic.
Modifié par BenjaminMosse (17 Sep 2006 - 11:07)
Bonjour,
je ne sais pas vraiment quelle est la question posée (j'ai vérifié, il n'y a pas de point d'interrogation), mais si c'est pour tronquer le texte, afin que ça ne déborde plus, tu peux essayer la propriété clip (conjointement à la position absolue), qui rogne ce qui est affiché.
Je sais vraiment pas si ça peut aider...