PROBLEME "vertical-align: top;"

Bonjour à tous,

Je souhaite savoir qui peut m'aider à résoudre un problème en ce qui concerne la fonction vertical-align: top; en CSS3.
Je suis sur mac, j'utilise TextWranger et comme navigateurs Safari et FireFox.
La fonction "vertical-align" avec la fonction "top" afin de mettre 2 inline-block aligné en haut ne fonctionne pas sur les 2 navigateurs.

En vous remerciant d'avance.

Merci de présenter la partie de la css incriminée.

Voici la partie CSS concernée.


article, aside
{
display: inline-block;
vertical-align: top;
text-align: justify;
}

Bonjour,

Et du coup, ou se situe ton souci ? Plusieurs lignes ? Un padding que sur l'un des deux ?
Sinon ton code fonctionne très bien.
http://fiddle.jshell.net/yrvesvh4/

Je suis bien d'accord que la syntaxe est correcte, par contre cella ne fonctionne pas et sur l’éditeur TextWrangler la couleur reste sombre comme pour me dire qu'il y a un problème au niveau de la ligne (cf image ci-jointe).
Quand au padding il y en à pas.

salut,
on ne peut clairement pas jouer aux devinettes. Il faut savoir que tu ne fournies pas assez d'éléments pour que l'on puisse t'aider. Il faudrait joindre l'ensemble du code HTML et CSS.

En fait, après les réponses que j'ai eu sur ce sujet, tout est correcte sauf ce problème de ligne comme mentionné sur l'image qui me montre qu'il y a un souci sur " vertical-align: top; " qui reste en couleur foncé comme si il y aurait une erreurs.

DreamWeber a écrit :
En fait, après les réponses que j'ai eu sur ce sujet, tout est correcte sauf ce problème de ligne comme mentionné sur l'image qui me montre qu'il y a un souci sur " vertical-align: top; " qui reste en couleur foncé comme si il y aurait une erreurs.

La coloration syntaxique de ton IDE est une chose, le fait que le code ne marche pas en est une autre.

Le theme de ton IDE n'est peut etre pas réglé sur CSS ou bien il a des lacunes pour certaines propriétés. RàS sous mon Sublime text 3 avec coloration syntaxique CSS3.

Pour ce qui est du fonctionnement du code, pourrais-tu nous montrer le code HTML qui va avec ainsi que l'aspect souhaité (= ce que tu voudrait) et l'aspect que tu as actuellement (= ne marche pas) ?

Voici le code HTML:

 <section>
                <article>
                    <h1> <img src="images/..png" alt=".." class=".." /> ************</h1>
                    <p>€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€
</p>
                    <p>$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$</p>
                    <p>££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££££.<br/>¨¨¨¨¨¨¨¨***%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%</p>
                </article>
                <aside>
                    <h1>TITRE</h1>
                    <img src="images/...png" alt="" id="..." />
                    <p id="..."> <img src="...png" alt="" </p>
                    <p>“‘{¶«¡ÇøÇ¡«¶{‘{¶«¡Ç¡«¶{‘“‘{¶«¡«¶{‘“‘{¶«¡</p>
                    <p>£%%%*¨%**%*%*%*%*¨%£%£%%££%%£%££%%£%£%£%£.</p>
                    <p>
                        <img src="images/........png" alt="" />
                        <img src="images/........png" alt="" />
                        <img src="images/........" alt="" />
                        <img src="images/.........png" alt="" />
                        <img src="images/.........png" alt="" />
                    </p>
                </aside>
            </section>

En fait, ce que je souhaite avoir c'est le block <section> à gauche de <aside>, et aligner au top.
La situation actuel est que <aside> reste en bas de la <section>.

pour du faux texte, sert toi d'outil comme ça http://html-ipsum.com/

as tu déjà rencontrer des mots de 40 lettres ?
Cdt,

WOW quel code surprenant... bref.

Donc comme je l'attendais, ce n'est pas le code qui ne fonctionne pas mais certainement toi qui ne sais pas utiliser les inline-block. Le point positif c'est que ce n'est pas dur à changer, il suffit de revoir un peu les bases !

Les inline-block vont se placer les uns a la suite des autres, tant qu'il y a la place (c'est cette seconde partie que tu as omis). Après ça bah ils passent à la ligne suivante et continuent.
Avec tes chaines de caractère sans espace et super longues, ton article prend toute la place (et même plus que la largeur de son conteneur et ça donne même un scroll horizontal).
Tu peux essayer en donnant à ces deux block des largeurs fixes (qui, une fois additionnées, sont <= 100%) et en mettant également un overflow hidden ou bien en forçant le retour à la ligne des longues chaines comme ça. Tu verras les bloc se positionner l'un a coté de l'autre tout naturellement.

Bon code et vas-y doucement avec les caractères spéciaux

Merci à gc-nomade pour le site http://html-ipsum.com/, ça me sera utile pour mes futurs testes html/css.
Merci également à Laurent à propos de ta correction, maintenant j'ai su trouvé la solution au problème et c'est bien clair à ce sujet.
Concernant les caractères spéciaux, je vous prie de m'excuser du "masacre" , j'avais besoin de charger les balises pour tester mes compétences "acquises" .