|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
 Posté le : Mar Mar 25, 2008 16:55 Sujet du message: Developpement de services |
|
|
Bonjour
J'ai 2 questions à vous demander, dont une surement coconne mais qui me serait bien utile.
1°) Comment centrer une image en css? j'ai essayé de créér un classe avec un margin:auto, position relative, en vain.
Cordialement
Edit herveg : en fait, il n´en avait qu´1 de question car les demandes de services sont interdites sur le forum... |
|
| |
|
 |
Bool
WRInaute passionné
Inscrit le: 26 Fév 2004
Messages: 858
Localisation: Lyon
|
| Posté le : Mar Mar 25, 2008 17:19 Sujet du message: Developpement de services |
|
|
Hello,
une image étant un élément "inline", c'est "text-align:center" qui fait effet ici.
Mais le problème est toujours le même : l'image sera centrée par rapport à son conteneur. |
|
| |
|
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
| Posté le : Mar Mar 25, 2008 21:33 Sujet du message: Developpement de services |
|
|
Bonsoir
Ou je peux demander cela herveg?
Bool
J'ai essayé aussi ce code mais si l'image etait legerement plus au milieu, elle n'était pas centrée.
Ou peut etre que je me suis planté. le code est bien
Feuille.css
.image
{
text-align:center;
}
Article.html
<img class="image" src="monimage.jpg" alt=""/>
???
Cordialement |
|
| |
|
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
| Posté le : Jeu Mar 27, 2008 13:30 Sujet du message: Developpement de services |
|
|
personne???
Cordialement |
|
| |
|
|
Bool
WRInaute passionné
Inscrit le: 26 Fév 2004
Messages: 858
Localisation: Lyon
|
| Posté le : Jeu Mar 27, 2008 15:12 Sujet du message: Developpement de services |
|
|
Bah comme je t'ai dit, elle est certainement centrée par rapport à son conteneur.
Comme par essayer de "débugger" ça : ajoute une bordure au conteneur et à l'image, tu verras pourquoi tu as l'impression que ce n'est pas centré. |
|
| |
|
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
| Posté le : Jeu Mar 27, 2008 20:45 Sujet du message: Developpement de services |
|
|
| OK je vais essayer |
|
| |
|
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
| Posté le : Dim Mar 30, 2008 20:47 Sujet du message: Developpement de services |
|
|
Salut Bool!!!
Je viens de tester ça
Dans mon css
| Citation: |
#images
{
text-align:center;
text-indent:20px;
}
body {
font:Tahoma;
font-size: 1.0em;
margin:5px auto;
background-color: white;
}
#corps {
width:776px;
background-color: rgb(200,200,200);
margin:auto;
padding:0px;
}
#corps2 {
width:776px;
background-color: rgb(200,200,200);
margin:auto;
padding:0px;
} |
et dans ma feuille html
| Citation: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Bienvenue sur LegypteAntique</title>
<link href="feuille-image.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
<meta name="keywords" lang="fr" content="Egypte, voyage, mythologie, civilisation"/>
</head>
<body>
<div id="corps">
<img class="images" src="akhenaton.gif" alt=""/>
</div>
<br/><br/>
<div id="corps2">
<div id="images">
<img src="akhenaton.gif" alt=""/>
</div>
</div>
</body>
</html>
|
le rendu:
http://www.jeuxfun.com/test.html
seule la deuxieme image est centree mais grace au conteneur. Quand je teste un code du style <img class="image-centree" src="image.jpg">
avec en css
.image-centree
{
text-align:center;
}
Ca ne fonctionne pas. Si tu peux me renseigner...
Merci d'avance
Bonne soirée |
|
| |
|
|
Bool
WRInaute passionné
Inscrit le: 26 Fév 2004
Messages: 858
Localisation: Lyon
|
| Posté le : Dim Mar 30, 2008 22:56 Sujet du message: Developpement de services |
|
|
Hello,
il n'y a rien d'anormal à ça : l'image est un élément inline, elle peut être placée au milieu de texte et par conséquent ne peut avoir un alignement différent des élements "autour" ; si tu ne veux pas ce comportement il faut la passer en "mode bloc". Et pour le coup, ce sera avec un "margin:0 auto" que tu l'aligneras. |
|
| |
|
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
| Posté le : Lun Mar 31, 2008 15:45 Sujet du message: Developpement de services |
|
|
Salut bool
En gros le code donne quoi, je ne vois pas trop ou tu veux en venir. Tu veux me dire de le mettre en float?
En gros, je voulais simplement savoir si pour centrer en css je peux mettre <img class="" src=""> ou si je suis obligé de la mettre dans un conteneur spécifique (<div class="images"></div)? Si non, peut tu me donnzer un exemple précis?
Le but étant de pouvoir centrer certaines images, les mettre a droite ou a gauche, sans avoir une usine à gaz
Cordialement |
|
| |
|
|
Bool
WRInaute passionné
Inscrit le: 26 Fév 2004
Messages: 858
Localisation: Lyon
|
| Posté le : Lun Mar 31, 2008 16:00 Sujet du message: Developpement de services |
|
|
rah, tu veux vraiment du code prémaché...
| Code: |
| display:block;margin:0 auto; |
Mais ça ne sert à rien si tu ne comprends pas de quoi il retourne... comme tout en "programmation", si tu fais du copier/coller sans comprendre, ça ne rime à rien. |
|
| |
|
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
| Posté le : Lun Mar 31, 2008 18:47 Sujet du message: Developpement de services |
|
|
merci bool je vais tester. Je sais bien que ça ne sert à rien mais au bout d'un moment on finit par comprendre. Maintenant je te fais une page html tout sur bloc note, alors que si j'avais attendu d'avoir ce niveau avant de creer un site, j'aurais perdu des annees...
bonne soiree |
|
| |
|
|
Darkcity
WRInaute accro
Inscrit le: 07 Juin 2007
Messages: 1706
|
| Posté le : Lun Mar 31, 2008 19:21 Sujet du message: Developpement de services |
|
|
| snooper a écrit: |
merci bool je vais tester. Je sais bien que ça ne sert à rien mais au bout d'un moment on finit par comprendre. Maintenant je te fais une page html tout sur bloc note, alors que si j'avais attendu d'avoir ce niveau avant de creer un site, j'aurais perdu des annees...
bonne soiree |
Pour apprendre le xHTML/CSS j'y ait peut-être mis une journée pour tout maitriser, pas des années.
Et ne code pas sur Bloc-Notes, un conseil. Utilise Notepad++ ou Dreamweaver. |
|
| |
|
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
| Posté le : Lun Mar 31, 2008 20:23 Sujet du message: Developpement de services |
|
|
Darkcity
Pourquoi Notepad++? Pour mieux visualiser son code?
Sinon j'exagerais un peu mais je n'ai pas ton intelligence pour apprendre aussi vite... En tout cas apres apprendre il faut apprendre à s'en servir... Un jour tu t'es dit: si j'apprenais le HTML? Et le lendemain, tu gérais a fond???
bonne soiree |
|
| |
|
|
Hoho
WRInaute passionné
Inscrit le: 10 Jan 2006
Messages: 514
|
| Posté le : Mar Avr 01, 2008 7:56 Sujet du message: Developpement de services |
|
|
| C'est sur le terrain de combat que tu apprends. Tu te décide à t'y mettre, tu l'utilises sur tes sites web...résultat: ça rentre tout seul. Pour les questions plus pointues, y a les forum qui sont la. |
|
| |
|
|
snooper
WRInaute accro
Inscrit le: 24 Aoû 2006
Messages: 1069
|
| Posté le : Mar Avr 01, 2008 9:55 Sujet du message: Developpement de services |
|
|
Hoho C'est pourquoi si darkcity y arrive moi je ne pourai pas apprendre dans l'absolu tout l'html en une journee. Il est doué  |
|
| |
|
|
| |
|
|
