28172 sujets

CSS et mise en forme, CSS3

Bonsoir à tous Smiley cligne

Voilà une bonne partie de la journée que je me prends la tête pour la mise en page de mon site internet.

J'ai fais pleins d'essais et de bidouillages durant la journée sous chrome ( 16.0.912.77 m ) et voilà que je rentre chez moi, j'essaie sous firefox ( 9.0.1 ) et cela ne marche plus..

Voici une capture d'écran sous firefox suivie d'une sous chrome.

La bordure rouge correspond au bloc middle.

http://i46.servimg.com/u/f46/11/06/60/26/firefo10.jpg

http://i46.servimg.com/u/f46/11/06/60/26/chrome10.jpg

Et voilà mon code :

<!DOCTYPE html )

	<html lang="fr">
 
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width"> 
    <title>xxx.com | Blog</title>
    <meta name="author" content="Marc Schaefges">
    <link rel="stylesheet" media="all" type="text/css" title="style" href="index.css" />
</head>



	<body>



<div class="top">

  <header>
	<h1><a href="">xxx.com</a></h1>
    <h2 class="titre">La partie blog....</h2>
   </header>

			<nav class="menu_principal" role="navigation">

    <ul>
		<li><a href="">Accueil</a></li>
		<li><a href="" class="actuel">Blog</a></li>
		<li><a href="">Contact</a></li>

	</ul>

			</nav>

</div>
  
    <div class="middle">
<article>
<p>Bonjour à toutes et tous  :;) 

Je viens de réaliser la mesure et le réglage du jeu à la coupe des segments de mon bloc Peugeot 106 S16 qui a été réalésé à 79mm et déglaçé.

Mon bloc sera équipé de pistons forgés Wossner ( diamètre 78,93, donc un jeu pistons/cylindres de 7 centièmes, 0,07, a été pris en compte ), je tiens d'ailleurs à préciser qu'il ne s'agit pas d'une préparation moteur, mais les pistons forgés étant moins cher que les pistons d'origine Peugeot, le calcul était vite fait.



Le jeu à la coupe des segments permets d'être sûr que les 2 extrémités du segment ne puissent pas venir se rencontrer en cas de forte dilation de ce dernier dû par exemple à un usage sportif de la voiture.

Car si les 2 extrémités venait à être au contact l'une à l'autre, le segment n'aura plus de débattement possible pour se dilater et viendrai frotter d'une manière "agressive" sur les cylindres avec les conséquences d'endommager ces derniers, voir même de faire serrer les pistons dans les cylindres.

C'est pourquoi nous devons faire en sorte que les segments aient assez de place pour se dilater dans tous les cas de figure, usage routier, roulage sur circuit, etc...

Ce qui est particulièrement important, c'est de bien veiller à avoir assez de jeu pour les 2 premiers segments ( même si le segment racleur reste évidemment important ), donc celui coupe feu et celui d'étanchéité car ce sont eux qui vont évacuer la majeure partie de la chaleur du piston vers le bloc moteur.

Tout dépend bien sûr du type du moteur.





Avant de commencer, j'ai nettoyé le cylindre avec un chiffon micro-fibre



Ensuite pour faciliter l'introduction du segment dans le cylindre, on huile légèrement sa surface 



On place le segment dans le cylindre, là j'ai utilisé un mètre afin que toutes les parties du segment soient à la même hauteur, car sinon cela pourrait causer une erreur de mesure.

Une pratique courante est d'utiliser le piston pour rentrer le segment le plus droit possible, malheureusement, dans mon cas, la surface de mon piston n'étant pas plate et régulière, cela ne marchait pas bien, voilà pourquoi j'ai utilisé le mètre.



On se munit ensuite d'un jeu de cales d'épaisseur pour mesurer le jeu au fur et à mesure du travail, dans mon cas, d'origine, je n'avais que la cale de 0,20 qui passait, donc beaucoup trop peu et donc risque de serrage...



J'ai eu comme information de mettre 0,45 de jeu pour le segment coupe-feu, la RTA indique d'ailleurs un jeu de 0,25 - 0,45 .

Je dois donc augmenter le jeu de 25 centièmes de mm.



On prends donc une bonne lime, on s'arme de courage car la matière est vraiment très très dur ( cela m'a pris 45 minutes pour limer, en comptant bien sûr le temps des essais intermédiaires ) ...


Il faut y aller progressivement et essayer de passer les cales les une après les autres au lieu de viser directement celle de 0,45 afin de minimiser la possibilité d'enlever trop de matière.

Pour gagner du temps ( positionnement plus facile car on peut s'aider des bords pour bien caler le segment ), j'ai ensuite fais les mesures en mettant le segment à fleur du cylindre, en faisant des essais, j'ai pu remarquer que cela ne changeait pratiquement rien d'essayer tout en haut plutôt qu'à 1 cm plus bas, peut être un demi-centième...

Je tiens également à préciser que je me suis permis de faire ça car les cylindres ont été réalésés, ils sont donc d'une dimension connue et constante, pas de déformation du cylindre possible.

Dans le cas d'une mesure avec un cylindre "dans son jus", il faudrait pouvoir mesurer à  différents endroits du cylindre.

J'aimerais préciser un point concernant les cylindres qui ne vont pas être réalésés, voici une explication de Guillaume R. 

[quote="Guillaume R."][color=#800000]Qui dit "segment neuf" dit "réalésage". Dans le cas défavorable ou il y aurait juste déglaçage sans reprise de la géométrie de la chemise, il faudrait ajuster le jeu à la coupe en positionnant le segment en bas de chemise dans la zone non balayée par les segments. C'est là que l'alésage est le plus petit (moins usé) et là ou la chemise est la plus froide (donc moins dilaté moteur chaud). Quand il y a grippage d'un segment pour cause de jeu trop faible c'est toujours par le bas que ça s'amorce.[/color][/quote]

Je l'en remercie !!



Voilà, le limage est terminé, j'arrive à faire en sorte de passer les cales 0,40 + 0,04 mais juste pas celle de 0,45, je laisse comme ça.

Je prends ensuite le deuxième segment, donc celui de l'étanchéité et je contrôle le jeu.



Cette fois je n'aurai bien besoin de toucher car j'arrive juste juste à passer les cales de 0,40 + 0,06.

Et je finis par les deux segments racleurs.



Pour le premier, j'arrive à passer les cales de 0,30 + 0,04, mais juste pas la cale de 0,35.

Pour le deuxième, j'arrive juste à passer les cales de 0,30 + 0,04.

Je laisse donc comme ça.

Même si tous les cylindres sont théoriquement de la même dimension, je préfère noter les segments en indiquant le cylindre dans lequel je les ai réglés.



Et on refais les mêmes manipulations pour les 3 autres cylindres, courage...

Ah oui un point important, veillez à faire cette mesure avec le bloc moteur, les segments et le jeu de cales à la même température afin de réaliser des relevés fiables.y
</p>
</article>

<div class="colonne_droite">
<section class="haut">
	<h2 class="categories">Catégories</h2>

<nav class="sous_menu" role="navigation">
    <ul>
		<li><a href="">Mécanique auto</a></li>
		<li><a href="">Electronique</a></li>
		<li><a href="">Informatique</a></li>
		<li><a href="">Divers</a></li>
	</ul>
</nav>	
</section>
<section class="milieu">
<h3 class="articles_hasard">Articles au hasard</h3>
<p>sdsdsdsdsdsadjiksajdkjsadjsladjlsadjlsjdlsjdlsdjlsdjsddddsdsdsdsxsxysdsdsdsadsadsadsadsadddfffffffffdfdfdfdffffffdfdfdfdffd</p>


</section>
</div>

</div>

<footer>
  
</footer>

	</body>


/* --- STYLES DE BASE --- */
a img {
  border: none;
  text-decoration:none;
}


/* --- polices d'écriture --- */

@font-face {
    font-family: 'BoycottRegular';
    src: url('polices/BOYCOTT_-webfont.eot');
    src: url('polices/BOYCOTT_-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/BOYCOTT_-webfont.woff') format('woff'),
         url('polices/BOYCOTT_-webfont.ttf') format('truetype'),
         url('polices/BOYCOTT_-webfont.svg#BoycottRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html 

{
font-size: 100%; /* Évite un bug d'IE 6-7. (1) */
width:100%;
background-color:#E7CF61;
}

body

{
background-image:url("images/fond_body.jpg");
background-repeat: repeat;
margin: 0;
line-height: 1.4;
width:960px;
min-height:100%;
color:black;
margin-left:auto;
margin-right:auto;
box-shadow: 1px 1px 12px #555; 
}

/* --- Partie supérieur de body --- */

.top

{
display:table;
width:960px;
height:200px;
margin-bottom:50px;
table-layout:fixed:
}

header

{
display:table-cell;
width:530px;
}

header h1

{
font-family:BoycottRegular;
font-size:3.5em;
color:black;
padding-left:0px;
border-bottom:5px solid white;
font-weight:600;
margin-top:15px;
margin-left:15px;
}

header h1 a

{
text-decoration:none;
color:black;
}

header h1 a:hover

{
text-shadow:0px 0px 10px #fff;
outline:none;
}

header h2.titre 
{
font-family:BoycottRegular;
font-size:3em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 1px 1px 22px #000000; 
-webkit-box-shadow: 1px 1px 22px #000000; 
box-shadow: 1px 1px 22px #000000;
-moz-transform: rotate(-13deg); 
-webkit-transform: rotate(-13deg);
width:430px;
margin-left:25px;
padding-left:10px;
padding-right:20px;
background-color: rgba(255,255,255, 0.6);
font-weight: normal;
}

nav.menu_principal

{
display:table-cell;
width:430px;
}

nav.menu_principal ul 

{
width:380px;
top:0;
position:absolute;
}


nav.menu_principal ul li

{
list-style-type:none;
display:inline;
margin-bottom:300px;
padding-right:30px;
margin-left:5px;
}


nav.menu_principal li a

{
font-size:1.6em;
font-family:BoycottRegular;
color:black;
text-decoration:none;
text-align:center;
}

nav.menu_principal li a.actuel


{
border-bottom:4px solid white;
}

.top nav li a:hover

{
border-radius: 4px;
text-shadow: 1px 1px 1px white;
}

/* --- Partie milieu de body --- */

.middle

{
display:table;
width:930px;
font-size:1.1em;
line-height:1.4em;
margin-left:auto;
margin-right:auto;
border-collapse: separate;
border-spacing:12px;
table-layout:fixed;
border:1px solid red;
}

article

{
display:table-cell;
border:2px solid white;
height:200px;
width:543px;
padding-left:20px;
padding-right:20px;
line-height:30px;
border-radius: 8px;
color:white;
font-size:1.1em;
-moz-box-shadow: 1px 1px 20px #000000; 
-webkit-box-shadow: 1px 1px 20px #000000; 
box-shadow: 1px 1px 20px #000000;
background: rgba(0, 0, 0, 0.5);
}

.colonne_droite

{
display:table-cell;
height:200px;
width:343px;
margin-left:20px;
padding-left:20px;
padding-right:20px;
line-height:30px;
}

.colonne_droite section.haut
{
background: rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding:10px;
background: rgba(0, 0, 0, 0.2);
border:2px solid white;
color:white;
-moz-box-shadow: 1px 1px 20px #000000; 
-webkit-box-shadow: 1px 1px 20px #000000; 
box-shadow: 1px 1px 20px #000000;
}

.colonne_droite section.milieu
{
background: rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding:10px;
margin-top:30px;
background: rgba(0, 0, 0, 0.2);
border:2px solid white;
-moz-box-shadow: 1px 1px 20px #000000; 
-webkit-box-shadow: 1px 1px 20px #000000; 
box-shadow: 1px 1px 20px #000000;
}


.colonne_droite h2.categories
{
text-align:center;
text-decoration:underline;
font-size:1.9em;
}

 .colonne_droite h3.articles_hasard
{
text-align:center;
text-decoration:underline;
font-size:1.9em;
color:white;
}


 .colonne_droite p
{

word-wrap: break-word; 
}

.colonne_droite nav.sous_menu li

{
list-style-type:none;
}

.colonne_droite nav.sous_menu li a

{
color:black;
line-height:30px;
text-decoration:none;
}







Avez-vous une idée de ce qui cloche ? Car là je m'arrache les cheveux..

Merci beaucoup d'avance et bonne soirée Smiley lol

Cordialement

Marc..
Modifié par marc.suisse (31 Jan 2012 - 20:52)
Modérateur
probablement un problème d'implémentation par défaut.

as-tu essayé de mettre:

border-collapse: separate;
border-spacing: 0;


sur l'élément tableau
Modérateur
Ce que je fais habituellement moi, je défini un margin, padding et border à 0 pour tous mes éléments pour ne pas avoir d'éventuelle modifs selon le navigateurs.

*{
margin:0;
padding:0;
border:0;
}

Il y en a qui disent que l' " * " alourdi... (perso je trouve que ça fait gagné pas mal de temps...)
Bonjour à vous et merci pour vos réponses Smiley cligne

kustolovic =>

J'ai essayé, mais repoussait le bloc entouré en rouge vers la gauche à la limite du body.

Yordi =>

Ta méthode de reset css globale est à mon avis ( d'après ce que j'ai lu ) n'est pas la meilleure solution.

Mais il me semble avoir trouvé pourquoi cela ne marchait pas.

Le code que j'ai mis plus haut, plus particulièrement celui correspondant au bloc article était le suivant :

article

{
display:table-cell;
border:2px solid white;
height:200px;
width:543px;
line-height:30px;
border-radius: 8px;
color:white;
font-size:1.1em;
-moz-box-shadow: 1px 1px 20px #000000; 
-webkit-box-shadow: 1px 1px 20px #000000; 
box-shadow: 1px 1px 20px #000000;
background: rgba(0, 0, 0, 0.5);
padding-left:20px;
padding-right:20px;
}


On peut y apercevoir des valeurs de padding afin d'éviter que le texte ne colle au bord.

Mais j'ai réfléchis ensuite que je devais mettre cette valeur à une nouvelle déclaration CSS afin d'agir uniquement sur les paragraphes, voici le code :

article p

{
padding-left:20px;
padding-right:20px;
}


Je débarrasse la déclaration article des padding et je fais la même chose pour la colonne de droite.

Au lieu de :

.colonne_droite

{
display:table-cell;
height:200px;
width:343px;
margin-left:20px;
line-height:30px;
padding-left:20px;
padding-right:20px;
}


Je fais

.colonne_droite p

{
padding-left:20px;
padding-right:20px;
}


Si je ( si j'ose m'exprimer ainsi ) que je cache la m... au chat en procédant ainsi..