[suivi de projet] mon 1er site en CSS

Bonjour,
Je poursuis ma conception en CSS
J'en suis là depuis hier soir : http://www.avenue-des-assures.com/test/testcss.htm (je débute).
Je bosse dur mais il y a un truc que je ne comprends pas (2 en fait).
Sous ma bannière titre, il y a une zone bleue qui traverse l'écran, avec dans sa partie gauche un texte déroulant. En fait, il s'agit, sous le texte défilant, d'une image, puis à la suite d'une répétition d'image identique pour faire continuer la bordure bleue jusqu'à l'extreme droite de l'écran.
Entre les 2, demeure un espace . Je n'arrive pas à le faire disparaitre.
Ce qui est étonnat car mes autres blocs sont bien collés les uns aux autres (sauf le bloc vert pour son côté gauche).
J'ai lu dans CSS2 que ça venait d'IE qui incorporait les margin et les padding. Pourtant, même en spécifiant tout à 0, rien n'y fait...
Je suis un peu perdu...
Je vous mets mon CSS :

#javaderoul {
padding-top : 4px;
padding-left: 12px;
float: left;
height: 20px;
width: 525px;
background-image: url("http://www.avenue-des-assures.com/images/2_accueil/txtderoul.gif");
}

#javaderoul_suite {
margin-left: 525px;
height: 24px;
background-image: url("http://www.avenue-des-assures.com/images/2_accueil/txtderoul_suite.gif") ;
}

(javaderoul c'est la zone sous le texte défilant, javaderoul_suite c'est la repétition de barre bleue jusqu'à la droite de l'écran)

Quant à la partie html, ça donne ça :

<div id="javaderoul">
<?php include ("ticker.php"); 
?>
</div>
<div id="javaderoul_suite"></div>

(ticker.php est une include faisant ensuite appel à un fichier js).

Je suis très heureux des progrès que je fais, mais là je bloque...

Ah oui, sous FF, ma barre bleue (partie droite) se retrouve tout en haut de l'écran, à la suite de ma bannière titre

Je vous remercie sincèrement pour vos conseils
Modifié par loufpad (10 Feb 2006 - 01:09)

Rajoute {line-height:0em;font-size:0em} dans le div incompressible et vérifie que ces attributs ne sont pas fixés quelque part d'autre.
Normalement ça devrait marcher...
Modifié par Ralfman68 (08 Feb 2006 - 01:26)

Salut et merci Ralf
Je viens de régler mon problème en donnant une marge négative de 3px à mon 1er élément. Je ne suis pas sûr que cela soit bien orthodoxe...
Ceci dit, je trouve ce "bug" d'IE étonnant.
J'ai lu pas mal d'articles et de commentaires sur le sujet, et apparement ça arrive quand les éléments sont positionnés (alors qu'en flottant, non).
Pourtant sur mon site (url au dessus) j'ai un bloc central (le gris) qui colle parfaitement à mes deux éléments flottants. Est-ce à dire que les margin-left et margin-right permettent à coup sûr d'échapper à ce bug ?



En tout cas, ce forum, et ses ressources, sont vraiment salutaires pour un débutant. Merci à vous pour l'aide que vous apporteez aux débutants (certainement pénibles de temps en temps )

on peut aussi essayer de jouer avec les clear:both et les différents attributs de position

Bonjour,

loufpad a écrit :
Salut et merci Ralf
Je viens de régler mon problème en donnant une marge négative de 3px à mon 1er élément. Je ne suis pas sûr que cela soit bien orthodoxe...
Ceci dit, je trouve ce "bug" d'IE étonnant.
J'ai lu pas mal d'articles et de commentaires sur le sujet, et apparement ça arrive quand les éléments sont positionnés (alors qu'en flottant, non).

C'est l'inverse. Le bug du three pixel jog est au contraire dû à la présence du flottant. Voir http://www.test.blog-and-blues.org/haslayout/tests/float6.html

loufpad a écrit :

Pourtant sur mon site (url au dessus) j'ai un bloc central (le gris) qui colle parfaitement à mes deux éléments flottants. Est-ce à dire que les margin-left et margin-right permettent à coup sûr d'échapper à ce bug ?

Dans ton site, le bug du three pixel se produit, mais à l'intérieur du flux adjacent au flottant, et non à l'extérieur (le flux en question n'est pas doté de layout. S'il l'était, les 3 pixels apparaîtraient à l'extérieur)

Merci pour vos précisions
Si je comprends bien, lorsque le 3 pixels jog se produit à l'intérieur d'un élément suivant un flottant, spécifier un margin permet de ne plus le voir non ?
Dans les exemples du lien que tu m'as donné Laurent Denis, un

margin-left: 3px; 

permettrait de ne plus le voir. Mon raisonnement est-il correct ?

JE poursuis sur le même post.
Je souhaite positionner un bloc (appelons le B), collé à gauche en float, juste sous mon menu de navigation (lui aussi collé en float - appelons le A).
N'y parvenant pas, j'ai trouvé une astuce en mettant dans les attributs de B

clear:both

.
Mais c'est une bêtise parceque si mon bloc central descend plus bas que mon menu de navigation, alors mon bloc B se collera sous le contenu central... http://www.avenue-des-assures.com/test/testcss.htm.
Comment pui-je procéder pour que B se colle automatiquement et définitivement à A ?
Dois-je irrémédiablement passer par un position: absolute; ?

Merci
Modifié par loufpad (08 Feb 2006 - 20:49)

Bon, j'ai trouvé une autre technique...
Je mets mes 2 divs dans une div "conteneur"

<div id="conteneur">
     <div id="div_haut"></div>
     <div id="div_bas"></div>
</div>

Les 3 sont en float left et j'ai mis la div conteneur en height: auto

Qu'en pensez-vous ? Cela vous semble-t-il logique ou peut-on faire mieux ?
Merci

J'ai édité le titre de mon topic.
Comme c'est ma première conception de site en CSS, je me dis que d'autres débutants comme moi pourraient trouver réponse à certaines de leurs questions (si cela pose problème, que les modos me le disent, je changerai le titre )

J'ai donc décidé de me débrouiller seul. Le niveau de ce forum étant assez élevé, je comprends que certaines questions basiques n'ont pas grand intérêt à vos yeux.

Ceci dit, si vous avez des remarques, des suggestions, des critiques, n'hésitez pas à m'en faire part .

Le lien de test reste le même : http://www.avenue-des-assures.com/test/testcss.htm