28220 sujets

CSS et mise en forme, CSS3

[Résolu]Problème avec le tutorial Trois blocs côte-à-côte ...

Bonjour à toutes et tous,
Avant tout un grand merci M. Raphaël GOETTER, pour ce site qui ma beaucoup aidé sur le CSS.

Passons au problème qui m'amène à posté dans le forum.
Pour un site dont je refais la mise en forme j'ai pris l'exemple d'un tutorial qui ce trouve ici
Paragraphe "Trois blocs côte-à-côte avec un espace de séparation :".
Le problème ce situe au niveau de la longueur, ceux-ci font "100px", mais quant ont regarde bien le bloc 2 et 3 ne font pas exactement cette taille (un peu moin), pourquoi ?
Je n'arrive pas à faire une bonne mise en page à cause de çà.
Voici un exemple que j'ai fait avec une image dans le bloc 1 et 3.
Les deux sont identique et la taille des bloc pareil.
http://users.skynet.be/sitevinch/testsite/test3.htm
D'avance je vous remercie de toutes l'aide que vous pourez m'apporter.
Bonne nuit.
Modifié par Vinch (05 Apr 2005 - 15:05)
Winch
Chez moi tes trois blocs font 135px de largeur; ta feuille de style n'est pas en contradiction;

<style type="text/css">
.bloc1 {
background-color: blue;
height: 50px;
width: 135px;
float: left;
background-image: url("images/fullmenu.gif");
background-repeat: no-repeat;
}
.bloc2 {background-color: green;
height: 50px;
float: left;
margin-left: 20px;
width: 135px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 135px;
float: left;
margin-left: 20px;
background-image: url(images/fullmenu.gif);
background-repeat: no-repeat;}
</style>

[ Édité par Stephan...
Merci d'utiliser le BBCode [ code][/code ] (sans les espaces) pour formater votre code. ]

Mais par contre tu vérifieras à bien mettre la feuille de style encapsulée dans le <head> et non pas derrière.
On ne sait jamais, c'est peut être meilleur Smiley lol

Et puisque j'en suis à répondre bêtement à 5 heures du matin. Tu pourrais simplifier la syntaxe:dans le bloc 1:
background: blue url("images/fullmenu.gif") no-repeat;
De cette manière, tu rassembles toutes les infos en une seule petite phrase. 2 lignes de moins.
Même chose dans le bloc 3.

Au fait... t'es sur quelle plateforme ?
j'ai p'têt des bonnes adresses de softs Editeurs pour Macintosh.
Modifié par Stephan (03 Apr 2005 - 07:12)
Merci de ta réponse Aureance,
Que veux tu dire par encapsuler ?
Je suis débutant en css... Smiley confused
Pour la simplification je vais le faire comme tu me le propose.
As tu vérifiés le tutorial comme indiqué plus haut.
Car quant je prend ma petite latte (metre à coudre) pour mesurer sur mon ecran j'ai 2,45 cm pour le bloc 1, 2,40 pour le 2, et 2,40 pour le 3.
Et sur mon lien j'ai bloc 1 4,35 cm bloc 3 4,50 cm.
C'et à peine perceptible mais dans la mise en page ce décalage est important.
Je suis I.E 6.0 si ça peut servir.

Pouaw 6H. du mat et ont ce casse les méninges Smiley lol
Si tu es encore là dans cinq bonne minute je vais mettre le site sur le seveur pour te montrer. mon problème et j'ai essayé en adresse absolue, relative avec et sans le float j'ai toujours ce problème.
Merci encore de ton aide. Smiley cligne
voilà j'ai mis les fichiers.
Por l'instant le code CSS n'est pas épuré, je le ferais plus tard.
Mais si tu mesures tu peux constater que le bloc 1 et 3 non pas la même taille (+- 30 mm de différence) pourtant il font tout les deux 135px en width, pareil que l'exemple que je t'ai donné et comme sur le site d'Alsacréations.
http://users.skynet.be/sitevinch/testsite/index.htm
Pour le reste je vais bien nettoyer tous ça dès que j'ai trouvé ce problème ne regarde pas trop, ç'est pas très propre...
Administrateur
Hello, à tout hasard, tu as pensé à suivre la Méthodologie qui se trouve dans la FAQ ?
Bonjour Raphael,
Oui et non j'ai bien essayé de lire un max, mais je ne comprend pas bien tout et pour tout les liens en anglais, je passe mon chemin, je ne comprend pas cette langue Smiley confused

Maintenant j'aimerais savoir si le problème vient de chez moi ou si le problème vient de chez vous, j'ai repris (copier-collé) votre exemple j'ai juste augmenté la taille de la longueur des bloc CAD 250 px pour les 3 bloc et quant je mesure sur mon ecran le bloc 2 et 3 font un demi centimetre en moin ?? (8 cm pour le bloc 1 et 7,5 cm pour le bloc 2 et3. voir exemple ici.
Peut-être que la solution ce trouve bien dans la FAQ mais je ne vois pas ou et je n'ai plus le courage de tester toutes les solutions, ça fait trois jours que j'essai.
Maintenant si personne ne peu m'aider, je vais devoir laissé les tableaux et j'aurais pourtant bien aimé être le proche possible du W3C.
Merci à vous et à vous tous.

Vinch il très découragé Smiley bawling
Bonne journée à toutes et tous.
Vinch a écrit :
quant je mesure sur mon ecran


Smiley lol c'est une blague belge Smiley lol

fait une capture d'écran puis importe le presse papier dans ton éditeur d'images préférés et tu veras qu'ils font tous 
width:135px;
Merci Alex,
En effet il font bien tous 135 px.
Je ne sais pas comment expliquer ça mais pourtant le bloc trois apparait plus petit que le bloc1, et ce n'est pas une blague belge, prend une latte ou si tu as un metre pour la couture ben il y à 3millimetre de différence, je n'y comprend rien et manifestement chez vous ce n'est pas le cas mais chez moi oui, pourtant avec la capture d'ecran ils font bien tous la même longueur... Smiley eek
Pas grave je recommence tout à zero et fin de semaine, je viendrai vous demandez si tout mon code est corect.
Un merci tout particulier à toi Aureance Smiley cligne
Bonne soirée à tous et toutes et merci de votre patiente.
@+
C'est soit un effet d'optique due aux couleurs (les blocs de couleurs foncées apparaissent plus petits que les blocs de couleurs claires) soit un mauvais réglages du parrallélisme de ton moniteur, soit ton écran est bombé.
Bonsoir JB_gfx,
Merci de ces sugestions, en effet j'y ai pensé mais le hic ne vient pas de là.
Voilà ici le lien du site que j'essai de refaire completement.
Il contient des tableaux et là je n'ai aucune différence entre le bloc1 (.site) et le bloc3 (.sponsor)
Ici le lien ou c'est en CSS, et là le bloc trois semble identique mais chez moi il est plus petit Smiley eek
J'ai pris un bout de papier j'ai fait un repere dessu (gauche, droite du bloc1) ensuite je place sur le bloc 3 et là quelques millimetre de différence...
Je prend ce meme bout de papier et je teste avec le site fait en tableau aucune différence...
J'ai l'impression de passé pour un urluberlu, mais vraiment je ne sais pas quoi faire ça me rend fouuuuuuuu.
Je vous remercie de vous pencher sur mon problème, pouriez-vous faire ce test de votre coté je vous en remercierez grandement car vous m'avez répondu mais jamais dis si vous aviez mesuré comme je l'ai fait.
Je vous en prie faite ce test pour moi et dites moi si c'est chez moi ou si il y à bien un binz, d'avance merci à vous tous.
Je suis I.E 6.0 au cas ou serais-ce possible que mon I.E ait un petit bug avec les DIV ? Je me répette pourquoi avec les tableaux pas de problème avec les div oui.
Demain je vais tester chez mon voisin, je vous tient informé de la suite.
Bonne nuit à toutes et tous.

Edit: J'ai testé sur un autre ecran idem
Modifié par Vinch (05 Apr 2005 - 03:52)
Bonjour à toutes et tous,
Problème résolu, je pense que c'était un problème avec les bordures et ou les marges, j'ai recommencé tout différement et c'est OK.
Merci à vous toutes et tous d'avoir eu de la patiente et de m'avoir aidé.
Bonne journée.
Sujet clos
Aller à