18041 sujets

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

Comment s'assurer qu'un bloc de texte ne déborde pas...

Bonjour à tous,

J'essaye de mettre deupis peu aux CSS, alors soyez indulgents... Smiley cligne
Je souhaite refaire la home de mon site pour y intégrer le forum.

En gros je vais à travers des requetes php, faire appel à 5 posts choisis dans différentes rubriques.

Voici le lien (attention ce n'est qu'une maquette en construction)
maquette de la home

Pour l'instant la mise en page n'est pas définitve (je parle de la postion des blocs) mais ce que je voudrais surtout m'assurer c'est de la compatibilité Firefox/IE et que le texte ne puisse pas dépasser à l'intérieur des blocs individuels et des blocs principaux.

Certains d'entre vous ont ils une idée de piste, car j'ai bien envie de reussir à la faire en css. Grâce aux tutorials j'ai réussi par exemple à inclure les images en bloc css... Smiley smile

Sinon si vous avez aussi des commentaires pour m'aider à améliorer la maquette ils sont également les bienvenues.
On apprend en améliorant...

Amicalement

Cotp
Modifié par Cotp (28 Oct 2006 - 15:45)
Raphael a écrit :
Hello et bienvenue,

En général, les dépassements sont dû à des positionnements flottants mal gérés :
http://forum.alsacreations.com/faq/#item6

Bonne chance Smiley cligne



Merci pour ta réponse rapide Raphaël, je vais de ce pas lire tout ça et je te tiens au courant Smiley smile

Si tu as des avis concernant la mise en page n'hésites pas aussi à m'en faire part. Penses-tu que j'ai fais le bon choix d'essayer les CSS plutot que les tableaux pour une page comme celle-ci ?

Cotp

** Edit **

Au lire déjà de certaiens pages je suis en train de faire des tests avec 
overflow:auto;

Mais bizarre sous IE7 mes blocs n'apparaissent pas au même endroit que sous Mozilla.

Concernant le choix des positions en gros j'ai des div en positions absolus et le bloc de texte aussi. Aurais-je fait un mauvais choix ?

Exemple:


le titre du bloc:

div#titrebloc
 {
		background-color:#006600;
		font-family:Trebuchet MS;
		font-size:14px;
		font-weight:bold;
		color:#FFFFFF;
		width:100px;
		text-align: middle ; }

L'image du bloc:
		
#imgbloc {
width: 65px;
height: 100px;
left: 10px;
top: 50px;
position:absolute;
}

Le texte du bloc:

div#textbloc
 {
		text-align: left ;
		position:absolute;
		left:100px;
		top: 40px;
}


le bloc films par exemple:

div#films
{
	padding: 0 10px 0 10px ;
	vertical-align:text-bottom;
	background: #b4c871;
    left: 2px;
	width: 350px;	
	height: 200px;	
	top: 414px;
	position:absolute;
	border:thin;
	border-style:solid;
	border-color:#003300;	
}

Modifié par Cotp (28 Oct 2006 - 16:56)
Que vois-je, des hauteurs fixes pour des blocs dont le contenu peut varier ?
Et en plus, c'est un contenu textuel, donc susceptible d'être dramatiquement redimensionné (et surtout agrandi) ?

C'est courageux de chercher la difficulté, mais pourquoi ne pas utiliser tout simplement des blocs qui s'adapteront à la hauteur de leur contenu ? On s'emmerderait moins, et les utilisateurs seraient plus heureux du résultat. Smiley smile
mpop a écrit :
Que vois-je, des hauteurs fixes pour des blocs dont le contenu peut varier ?
Et en plus, c'est un contenu textuel, donc susceptible d'être dramatiquement redimensionné (et surtout agrandi) ?

C'est courageux de chercher la difficulté, mais pourquoi ne pas utiliser tout simplement des blocs qui s'adapteront à la hauteur de leur contenu ? On s'emmerderait moins, et les utilisateurs seraient plus heureux du résultat. Smiley smile



Merci mpop pour ta réponse. Eh oui effectivement j'ai cherché la difficulté Smiley confused Après déjà m'être emmelé les pinceaux avec la postions float
dans la FAQ (attention ce n'est pas la FAQ qui m'a emmelée Smiley cligne mais bien moi), je suis passé en absloue.
Et comme je voulais quelque chose d'homogène, je me suis dit allons y pour des blocs de tailles identiques donc largeur et hauteur fixe. Et le texte changeant evidemment je me suis fait avoir à l'insu de mon plein gré.

Avec overflow, j'ai eu le droit à une belle scroll bar à droite pour le grand bloc de texte mais çà me parait encore moche tout ca...

La simplicité est vraiment chose difficile.

Cotp
Cotp a écrit :
La simplicité est vraiment chose difficile.

Bah, la simplicité c'est pas compliqué, il suffit de partir sur de bonnes bases et d'utiliser les méthodes pertinentes.

Quel est le rendu souhaité, très exactement ? Pour l'instant, on voit juste une page de maquette buguée, ça n'aide pas à savoir quel est le rendu souhaité. Smiley decu
Un petit schéma, peut-être ?
mpop a écrit :

Bah, la simplicité c'est pas compliqué, il suffit de partir sur de bonnes bases et d'utiliser les méthodes pertinentes.

Quel est le rendu souhaité, très exactement ? Pour l'instant, on voit juste une page de maquette buguée, ça n'aide pas à savoir quel est le rendu souhaité. Smiley decu
Un petit schéma, peut-être ?


Une fois de plus tu as raison mpop
Smiley smile
Voici ce vers quoi j'essaie d'aller...
lien ves l'image

Pour l'instant j'en suis là:
http://www.cineastes.com/indextest4.php

Je galère, je galère... Smiley ohwell

Cotp
Modifié par Cotp (28 Oct 2006 - 19:38)
Sujet clos
Aller à