28173 sujets

CSS et mise en forme, CSS3

Bonjour bonjour,
je bosse sur une application web qui utilise des tableaux pour afficher des données. Ces tableaux font parties d'un bloc.
Mon probleme est que si le tableau dépasse la taille du bloc, ce meme bloc ne change pas de taille, et de ce fait le tableau est a cheval sur 2 bloc, ce qui est assez cracra.

Ma question est donc la suivante: est ce qu'il est possible de modifier la taille du bloc englobant mon tableau en fonction de la taille de celui-ci?

Si vous avez des idées, je suis preneur.

Merci Smiley smile
Modifié par Thana (02 Jun 2006 - 13:58)
Bonjour et bienvenue, Smiley cligne
En principe si tu n'as pas défini de taille à ton block conteneur il devrait s'adapter au la taille de ton tableau. Mais le mieux serait te fournir au moins tout le code correspondant.
Merci Smiley cligne
Oui, désolé, je n'ai pas pensé a mettre le code.

Pour l'exemple, voici une url:
http://listes.cru.fr/sympa/arc/sympa-fr
(cliqué sur "rechercher avancée", le texte "Un de ces mots" dépasse du bloc)

en ce qui concerne le code css (je ne met pas tout, ca risquerais de prendre un peu de place):

#Stretcher {
	/*margin: 0px 0px 0px 250px;*/
	margin-left: 24%;	
	text-align: left;
}
#Paint {
	vertical-align:top;
	text-align: center;
}
.ContentBlock {
	margin: -3px 0px 0px 0px;
	background: [% color_5 %];
	border: 1px solid [% color_2 %];
	padding: 10px;
	text-align: left;
	height: 100%;
}
.ContentBlock p {padding: 10px;}
.ContentBlock > * {
	padding: 0px;
	border-bottom: 0px dotted [% color_1 %];
	text-align: left;
}
.ContentBlock * a {
	border-bottom: 1px dotted [% color_8 %];
	text-align: left;
}
.ContentBlock * a:hover {text-decoration:none;}
.ContentBlock * a img {border: 0px;}
Chez moi le "Un de ces mots" ne dépasse pas!

.ContentBlock * a {
	border-bottom: 1px dotted [% color_8 %];
	text-align: left;
}


Tu n'as pas besoin de mettre un *, ça revient a ne rien mettre.
[% color_8 %] Voila une notation dynamique que je ne savais pas possible. Est ce que ça fonctionne bien?
la notation [% color_8 %] est utiliser comme pour des template (en fait l'application ne fonctionne qu'avec des templates). color_8 est référencé dans un autre fichier (l'application est en perl).

S'il ne dépasse pas, c'est peut etre parce que ta résolution est plus grande que la mienne (je suis en 1024*768). En faisant ctrl +, je pense que ca devrait dépasser.

Le meme probleme de dépassement se produit aussi sur le module que je développe: j'ai toujours ce fameux tableau dans un bloc, tableau qui contient entre autre une image, tout a droite. j'ai mis un hover sur l'image qui l'agrandit. Du coup le tableau s'agrandi avec l'image, et il dépasse de mon bloc.

Je vais essayé sans le *.

Merci Smiley smile
Ok tu dois spécifier la largeur de .ContentBlock pour faire en sorte qu'il ne s'adapte pas a la largeur de la zone d'affichage.
Si tu souhaites que ces case a cocher descendent au dessous du reste quand tu réduit la fenêtre, alors il faut revoir la structure de ton code.
Penses à mettre tes texte en unité relative (em ou %) pour rendre possible le redimensionnement dans IE.
Tu avais mis un height:200 sans unité donc je l'ai suprimé.


.ContentBlock {
	margin: -3px 0 0 0;
	width: 700px;
	background: #fff;
	border: 1px solid #333;
	padding: 10px;
	text-align: left;
}

Modifié par Hermann (02 Jun 2006 - 15:46)
En fait ce que je veux c'est que le bloc s'adapte au tableau, parce que j'ai le probleme dans plusieurs pages.

Mais merci quand meme, je note pour les em et % Smiley smile
Alors met le en position:absolute ou en float:left suivant ce qui te convient le mieux mais n'oublies pas de retirer les propriétés de taille. Une élement doté de l'une des ses propriété s'adapte à son contenu.
Bonjour,
Pour cela il aurait fallu que tu crée un autre post dans l'ideal.
TOn code n'est pas inséré dans des balises code. Je te suggère d'aller lire
http://forum.alsacreations.com/help.php
Tu mets un clear:both à l'élement suivant. Je n'ai pas le temps de t'expliquer. Va voir les tutoriaux et la faq.
Bonjour à tous,

@trouille2 :

Merci de créer un topic pour ta question, laquelle peut ne pas être en rapport avec le problème exposé dans ce topic.

Ensuite, nous t'invitons à présenter tes sources
a l'aide de la balise code comme précisé dans les règles forum :


a écrit :
Regle 13- ... Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié (éviter également, pour des questions de lisibilité, de présenter des codes HTML et PHP imbriqués). ...



Enfin, ne pas hésiter à consulter :

- la faq qui regorge de réponses aux questions les plus souvent posées

ou

-la recherche

avant de poser une question ...

Smiley cligne Smiley smile

<edit>
Petit barbecue, mais c'est de saison !
Smiley lol
Modifié par Vero (02 Jun 2006 - 18:17)