Ombre
-
Compteur de contenus
19 -
Inscrit(e) le
-
Dernière visite
-
Merci Denis et Laurent pour la partie optimisation... P.S. : la page originale possède plus de contenu Ceci n'était qu'une version simplifiée.
-
Super! Merci Xavier!
-
J'ai trouvé : il faut mettre le div #topmenu en float également. Ceci dit, si quelqu'un avait une explication sur le pourquoi du comment ça serait sympa...
-
Bonjour, Comme vous pouvez le voir avec le code suivant : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"lang="fr"> <head> <title>Essais de mise en page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #topmenu { background-color: #000000; clear: right; height: 5em; width: 100%; left: 0px; top: 0em; margin: 0px; padding: 0px; } #topmenu ul{ list-style-type: none; } #topmenu li{ float: left; margin-right: 1em; color: #FFFFFF; } #menu { width: 10em; float: left; background-color: #FFFFCC; } #principal { float: left; } --> </style> </head> <body> <div id="topmenu"> <ul> <li><a href="#menu">Menu</a></li> <li><a href="#principal">Contenu principal</a></li> <li><a href="mailto:bidon_AT_bidon.bid">E-mail</a></li> </ul> </div> <div id="menu"> <h2>Menu</h2> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </div> <div id="principal"> <h1>Positionnement des divs</h1> <p>Héhéhé</p> </div> </body> </html> J'ai essayé de créé un bandeau noir qui servirait de menu d'accessibilité de la page. Malheureusement, il ne "colle pas" au-dessus dans Firefox. A quoi est dû ce problème? Au XHTML? J'ai déjà fait une mise en page de ce genre sans problèmes mais en HTML... Y aurait-il une différence dans le positionnement des DIVs?
-
Oui mais bon, si on reçoit une newsletter c'est qu'on l'a demandé et que l'on a suffisamment confiance dans l'envoyeur pour être certain qu'il ne va pas refiler notre adresse e-mail à des sites qui font du spamming. Amha, c'est à l'utilisateur de définir la newsletter comme courrier "sain" afin d'avoir une mise en page correcte. Sinon, on peut faire une newsletter en css et sémantiquement correcte comme ça si les images sautent, elle sera quand même lisible.
-
Au boulot, on utilise des liens absolus comme expliqué plus haut. De toutes façons les images se mettent dans la cache du client mail je pense, donc la personne peut les consulter hors ligne pour autant qu'il laisse le temps au logiciel de les charger.
-
Re-Bonjour, Alors voilà, la newsletter fonctionne... Je suis content car j'ai appris pas mal de choses, en plus de vos renseignements, en travaillant sur ce projet : Quoiqu'on fasse les background ne passe pas sur le site de Hotmail, faut se débrouiller autrement Pour les divs, il vaut mieux utiliser un div conteneur avec les attributs de base (fonte, taille, etc) et encapsuler des divs flottants à l'intérieur mais en utilisant des margin pour le positionnement plutôt que le padding qui ne marche pas Les css doivent bien se trouver dans le body Si ces deux ou trois renseignements peuvent servir... Encore merci à tous
-
Bon je me réponds à moi-même : j'ai mis une marge "top" négative de 3 pixels et ça marche. Je ne savais pas que l'on pouvait faire du négatif avec les flottants.
-
Merci Gribouille. Je viens d'essayer avec un padding de 0 : même résultat... Qui va trouver?
-
Heu... Sans trop dévoiler , voilà ce que ça donne : http://membres.lycos.fr/legritch/ Vous voyez où est le problème?
-
Bonjour, Je vous écrit pour un 2e problème dans la mise en page de ma newsletter. Cette newsletter est composée d'un div "container" lui même contenant en haut de page une image gif et juste en dessous un div flottant à droite avec le texte. Dans le div "container" il y a juste une couleur bleue en fond et dans le div "contenu" un fond blanc avec le texte. Dans mon premier essais, en placant l'image, j'ai vu qu'elle ne se mettait pas tout à fait en haut et à gauche du "container". Renseignements prits, en faisant une recherche sur le forum, je tombe sur un post de Laurent Denis (merci )expliquant que c'était un bug typique à IE et qu'il fallait mettre l'élement inline, ce qui, en effet, résolu le problème. Si maintenant l'image est bien placée, il y a dans IE seulement un espace de 2 ou 3 pixels avec le div "contenu" placé juste en dessous. Dans le style pour l'image, je l'ai également placée en float à gauche, mit le padding, border et marges à 0 mais rien n'y fait... Je ne sais plus quoi faire...
-
Hum, bon ce sont les images en arrière-plan qui ne passent pas même avec style="..." Grrr Faut trouver autre chose...
-
Youpie! Ça marche! Je vous donner la recette : il faut placer les styles non pas dans le HEAD mais dans le BODY. Le webmaster de la boîte m'a dit d'aller voir dans la mise en page d'une autre newsletter (qui utilise le mode tableau, les balises FONT mais aussi un peu de CSS) pour voir comment c'était fait : et voilà. Bon, il y a encore 2 ou 3 petit problèmes avec les images dans les styles mais rien d'insurmontable je pense. Merci à tous.
-
Bonjour, Dans le cadre du boulot, je suis amené à créer une newsletter (que je ne peux malheureusement pas vous monter ) pour notre site internet. Une société externe nous à fourni un gabarit avec une mise en page en mode tableau et j'ai donc conscieusement détruit tous ces tableaux pour les remplacer par des divs et utiliser un balisage sémantique avec CSS comme décrit dans un article de pompage.net. Ça marche bien dans les logiciels clients mails. Là où le bât blesse c'est que tous les styles sautent quand on regarde la mise en page sur le site d'hotmail. Certes, grâce aux balisage, il est parfaitement lisible mais niveau présentation : bof... Vous allez me dire : «On s'en fout d'hotmail» et vous auriez bien raison mais nos futurs abonnés auront la possiblité de s'abonner via le site de Microsoft et s'ils recoivent une lettre avec une mise en page merdique ça ne le fera pas trop. Connaissez-vous une solution à ce problème? En attendant, je vais essayer de mettre les styles dans une feuilles externe. Si vraiment cela ne marche pas, je mettrai les styles inline pour chaque balises ou, horreur, repasserai en mode tableau. Crotte de crotte... Ombre P.S. : grâce à l'extension webdeveloper de firefox, j'ai vu que les indications de class et id étaient conservées. Reste plus qu'à réussir à lui attacher les styles.
-
Salut Pierre, Sur Safari ça passe bien.