CSS et images ? Mes codes sont ils bon ?
Résolu/Fermé
euuuh
Messages postés
58
Date d'inscription
dimanche 6 décembre 2009
Statut
Membre
Dernière intervention
25 février 2010
-
13 déc. 2009 à 19:39
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 - 20 déc. 2009 à 18:26
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 - 20 déc. 2009 à 18:26
A voir également:
- CSS et images ? Mes codes sont ils bon ?
- Codes ascii - Guide
- Mes codes personnels - Guide
- Des images - Guide
- Comment avoir les codes iptv gratuit forum - Forum Réseaux sociaux
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word
9 réponses
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
13 déc. 2009 à 20:36
13 déc. 2009 à 20:36
Les positions absolues sont difficiles à maîtriser car elle sortent du flux, et donc peuvent générer des problèmes de superpositions. Ce qui semble être le cas...
Utilise plutôt un float, c'est plus facile à gérer.
Utilise plutôt un float, c'est plus facile à gérer.
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
13 déc. 2009 à 21:04
13 déc. 2009 à 21:04
Bsr
Non ce n'est pas bon :-(
Déjà le sélecteur de classe "mg.1" est faux !
Donne des noms explicite ex "image1"
Ce qui donne
<style>
.image1 { ... }
</style>
et dans ton image : <img class="image1" src="...">
Ensuite soit tu utilises "float" pour le positionnement , soit "position" mais pas les 2 !
Va lire les 3 excellents et indispensables tutos ici :
https://openweb.eu.org/articles/initiation_flux/
Et tu comprendras que c'est pas si simple hélas ...
Bon CSS
Non ce n'est pas bon :-(
Déjà le sélecteur de classe "mg.1" est faux !
Donne des noms explicite ex "image1"
Ce qui donne
<style>
.image1 { ... }
</style>
et dans ton image : <img class="image1" src="...">
Ensuite soit tu utilises "float" pour le positionnement , soit "position" mais pas les 2 !
Va lire les 3 excellents et indispensables tutos ici :
https://openweb.eu.org/articles/initiation_flux/
Et tu comprendras que c'est pas si simple hélas ...
Bon CSS
euuuh
Messages postés
58
Date d'inscription
dimanche 6 décembre 2009
Statut
Membre
Dernière intervention
25 février 2010
5
19 déc. 2009 à 16:57
19 déc. 2009 à 16:57
Merci bpc pour votre aide, donc j'ai modifié mon code mais maintenant mon texte reste en dessous des deux images qui sont elles bien placée ! ^^
J'ai du me tromper de code mais je ne vois ps voici mes codes si vous voyez ce qu'il faut faire, merci d'avance :
HTML :
<body>
<p align="center">
<img src="http://nomdemonsite.free.fr/image/titre.bmp"
alt="titre"><img
src="http://nomdemonsite.free.fr/images/menu.jpg"
alt="Menu"></p>
<img class="floatleft"
src="http://nomdemonsite.free.fr/images/rallye.acc.bmp"
alt="Rallye"><img class="floatright"
src="http://nomdemonsite.free.fr/images/concert.acc.bmp"
alt="Concert">Bienvenue chez ... (mon texte) :<br>
Des ... (encore du texte)<br>
Du ... (texte;)<br>
Une... (encore du texte)<br>
Un ... (et du texte;)
<p> [...]
<body/>
Code CSS:
body{
background-color: #363636;
color: white;
font-size: large;
font-family: Century Gothic, Verdana, Trebuchet MS, Comic Sans MS, Georgia, serif;
text-align: center
}
.floatleft{
float: left;
padding: 2%;
margin-top: -170px;
margin-bottom: 10px;
margin-right: 0px;
width: 234px;
height: 156px;
}
.floatright{
float: right;
padding: 2%;
margin-top: -170px;
margin-left: 735px;
margin-bottom: 10px;
width: 228px;
height: 156px;
}
D'avance Merci beaucoup
J'ai du me tromper de code mais je ne vois ps voici mes codes si vous voyez ce qu'il faut faire, merci d'avance :
HTML :
<body>
<p align="center">
<img src="http://nomdemonsite.free.fr/image/titre.bmp"
alt="titre"><img
src="http://nomdemonsite.free.fr/images/menu.jpg"
alt="Menu"></p>
<img class="floatleft"
src="http://nomdemonsite.free.fr/images/rallye.acc.bmp"
alt="Rallye"><img class="floatright"
src="http://nomdemonsite.free.fr/images/concert.acc.bmp"
alt="Concert">Bienvenue chez ... (mon texte) :<br>
Des ... (encore du texte)<br>
Du ... (texte;)<br>
Une... (encore du texte)<br>
Un ... (et du texte;)
<p> [...]
<body/>
Code CSS:
body{
background-color: #363636;
color: white;
font-size: large;
font-family: Century Gothic, Verdana, Trebuchet MS, Comic Sans MS, Georgia, serif;
text-align: center
}
.floatleft{
float: left;
padding: 2%;
margin-top: -170px;
margin-bottom: 10px;
margin-right: 0px;
width: 234px;
height: 156px;
}
.floatright{
float: right;
padding: 2%;
margin-top: -170px;
margin-left: 735px;
margin-bottom: 10px;
width: 228px;
height: 156px;
}
D'avance Merci beaucoup
euuuh
Messages postés
58
Date d'inscription
dimanche 6 décembre 2009
Statut
Membre
Dernière intervention
25 février 2010
5
19 déc. 2009 à 17:57
19 déc. 2009 à 17:57
please ! help me !=)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
19 déc. 2009 à 18:45
19 déc. 2009 à 18:45
Bsr
Je veux bien mais je ne vois pas comment tu veux positionner tes éléments
A gauche [rallye.acc.bmp] au centre du texte à droite [concert.acc.bmp] ?
Je veux bien mais je ne vois pas comment tu veux positionner tes éléments
A gauche [rallye.acc.bmp] au centre du texte à droite [concert.acc.bmp] ?
euuuh
Messages postés
58
Date d'inscription
dimanche 6 décembre 2009
Statut
Membre
Dernière intervention
25 février 2010
5
19 déc. 2009 à 18:50
19 déc. 2009 à 18:50
oui exactement cela ! Mais pour le moment mes images sont décalés par rapport au texte, je ne comprend pas prk !
euuuh
Messages postés
58
Date d'inscription
dimanche 6 décembre 2009
Statut
Membre
Dernière intervention
25 février 2010
5
19 déc. 2009 à 18:53
19 déc. 2009 à 18:53
Cela donne :
A gauche [rallye.acc.bmp] - au centre le texte (mais en dessous) - à droite [concert.acc.bmp]
Ps : A savoir que le texte descend qd ls images descendent !
A gauche [rallye.acc.bmp] - au centre le texte (mais en dessous) - à droite [concert.acc.bmp]
Ps : A savoir que le texte descend qd ls images descendent !
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
19 déc. 2009 à 20:03
19 déc. 2009 à 20:03
Pourquoi une marge haute négative de -170 ?
Pourquoi text-align: center dans body ? Tu veux vraiment que tous les textes soit centrés ? (Je ne parle pas de centrer ton site dans la page hein !)
Pourquoi margin-left: 735px; dans floatRight sachant que float:right te positionne déjà l'élément à droite ?
le code suivant donne de meilleurs résultats mais pour bien faire il faudrait utiliser des div
Pourquoi text-align: center dans body ? Tu veux vraiment que tous les textes soit centrés ? (Je ne parle pas de centrer ton site dans la page hein !)
Pourquoi margin-left: 735px; dans floatRight sachant que float:right te positionne déjà l'élément à droite ?
le code suivant donne de meilleurs résultats mais pour bien faire il faudrait utiliser des div
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-language" content="fr" />
<meta name="language" content="fr" />
<title>Alignement</title>
<style>
body {
background-color: #363636;
color: white;
font-size: large;
font-family: "Century Gothic", Verdana, "Trebuchet MS", "Comic Sans MS", Georgia, serif;
text-align: center;
}
.floatleft{
float: left;
padding: 2%;
margin-bottom: 10px;
margin-right: 0px;
width: 234px;
height: 156px;
}
.floatright{
float: right;
padding: 2%;
margin-bottom: 10px;
width: 228px;
height: 156px;
}
</style>
</head>
<body>
<p>
<img src="http://nomdemonsite.free.fr/image/titre.bmp" alt="titre">
<img src="http://nomdemonsite.free.fr/images/menu.jpg" alt="Menu">
</p>
<img class="floatleft" src="small/desert.jpg" alt="Rallye">
<img class="floatright" src="small/building.jpg" alt="Concert">
<p>
Bienvenue chez ... (mon texte) :<br />
Des ... (encore du texte)<br />
Du ... (texte;)<br />
Une... (encore du texte)<br />
Un ... (et du texte;)<br />
</p>
</body>
</html>
euuuh
Messages postés
58
Date d'inscription
dimanche 6 décembre 2009
Statut
Membre
Dernière intervention
25 février 2010
5
20 déc. 2009 à 18:26
20 déc. 2009 à 18:26
Ca marche merci à tous ! =)