28220 sujets

CSS et mise en forme, CSS3

Petit paragraphe bien joli

Bonjour,

je suis en train de préparer le passage d'un site fait avec de vieux tableaux poussiéreux vers une mise en page en CSS.
Ne voulant pas y passer trop de temps, j'essaye de préparer au mieux le terrain en analysant bien la structure actuelle des tableaux et en imaginant comment les remplacer.

J'ai un doute pour ces paragraphes (voir image ci-dessous)

upload/1426-illustrpour.jpg

Comment faire pour que la puce de gauche reste isolée du reste ?
Je voudrais que ces blocs soient dans un paragraphe <p>, ce qui me semble le plus logique. Comment, de même, isoler l'image d'illustration sur la droite ?
Voilà, je suis désolé de poser ces questions de base, étant assez ignorant en la matière, mais j'aimerais ne pas me lancer sur de fausses pistes...

Merci à tous en tout cas !
Administrateur
elcastor a écrit :

Comment faire pour que la puce de gauche reste isolée du reste ?

Salut,

Tu peux jouer avec les marges de la puce, mais aussi et surtout avec la propriété "list-style-position" Smiley cligne

a écrit :
Je voudrais que ces blocs soient dans un paragraphe <p>, ce qui me semble le plus logique. Comment, de même, isoler l'image d'illustration sur la droite ?

Pour cela, tu peux faire un tour dans le tutoriel qui explique les positionnements, et particulièrement le positionnement flottant Smiley smile

Bonne chance.

PS : si tu es débutant, n'oublie pas de passer par la Méthodologie qui est placée en post-it de ce salon CSS Smiley cligne
Modifié par Raphael (21 Jun 2005 - 15:47)
Merci beaucoup, j'ai réussi à faire tenir ce petit paragraphe !

J'ai quasiment fini le modèle pour la transition en CSS du site sur lequel je travaille. Il reste néanmoins une anicroche qui me gène.

Voilà où j'en suis : http://terawatt.fr/_fr/index-2.html[/url]
J'aimerais que cela ressemble à ça :

http://www.terawatt.fr/index-2.html[/url]

Je cherche à faire coller les deux paragraphes de la colonne de droite sur le haut. Des bandes blanches apparaissent ici juste avant le titre. Elles correspondent au "background-color" de la colonne de droite.

Ces deux paragraphes dont des "div" imbriquées... peut-être suis-je tombé dans le travers évoqué dans le livre de Raphaël au chaître 1 ??? :-| "trop de <div> tue les <div>" ??? (tiens je crois que je vais me faire offrir ce bouquin moi)

Enfin le bloc jaune en bas est un résidu du "background-color" de la partie "contenu".

Bref, je ne sais pas trop comment finir cette page...

Smiley ohwell
merci pour votre aide !
Etrange ta solution... vu que tes "puces" ne servent qu'a la presentation elles devraient plutot se trouver dans ta feuille de style. En background de tes h2 et en jouant avec le text-indent pour le decallage ça serait trés simple à faire.

En plus tu as mis "puce" comme texte alternatif. ça veux dire que sur les navigateurs textuels et/ou lecteurs écran :

a écrit :

puce optimisation financiere
Solutions d'optimisation financière
Réduisez votre facture d'énergie en minimisant jusqu'à 40 % les puissances souscrites, en améliorant la productivité de votre contrat et en bénéficiant des tranches tarifaires les plus performantes.
Lire la suite

puce optimisation technique
Solutions d'optimisation technique
Evitez la saturation des infrastructures d'accès à l'énergie (transformateur, centrale électrogène) et des réseaux internes de distribution (câbles, protections).
Lire la suite

puce optimisation multisite
Solutions d'optimisation multisites


Pas trés heureux, non? Il vaudrait mieux, dans ce cas, ne rien mettre dans ton attribut alt, ou alors pourquoi pas un &bull;, à la limite.
Modifié par jb_gfx (24 Jun 2005 - 16:10)
listes à puces avec images, par là...
n'hésitez pas à faire des recherches... Le mot "puces" vous suffit...
Modifié par Macpom (24 Jun 2005 - 16:43)
en effet, c'est ce que je viens de faire : une liste. Et bien cela résoud mon problème d'affichage pour la première puce, qui était trop collée vers le haut.

Je viens de découvrir par ailleurs comment faire pour que Firefox et IE affichent correctement la même page : avec 2 feuilles de style !

J'avais cherché ici la solution, mais je n'avais pas trouvé... peut-être avais-je mal cherché.
Donc : 
<style type="text/css">
@import url("mafeuille1.css");
</style>
<!--[if IE]>
<style type="text/css">
@import url("mafeuille2_pour_ie.css");
</style>
<![endif]-->

La deuxième "écrasant" la première si le navigateur est "made in Bill Gates"...

Merci à tos de votre aide en tout cas ! Cela m'a été bien utile. Smiley smile
Sujet clos
Aller à