Problème d'alignement d'images en HTML!
Fermé
Zephir432
Messages postés
32
Date d'inscription
mercredi 26 mai 2010
Statut
Membre
Dernière intervention
9 septembre 2010
-
Modifié par Zephir432 le 29/05/2010 à 03:03
briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 - 29 mai 2010 à 14:26
briiiiix Messages postés 575 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 1 juin 2010 - 29 mai 2010 à 14:26
A voir également:
- Problème d'alignement d'images en HTML!
- Editeur html - Télécharger - HTML
- Des images - Guide
- Images enregistrées - Forum Blender
- Image cliquable html ✓ - Forum Réseaux sociaux
- &Nbsp html ✓ - Forum Webmastering
4 réponses
Yami-No-Naka
Messages postés
115
Date d'inscription
dimanche 23 mai 2010
Statut
Membre
Dernière intervention
28 novembre 2011
117
Modifié par Yami-No-Naka le 26/05/2010 à 23:06
Modifié par Yami-No-Naka le 26/05/2010 à 23:06
Bonsoir,
Essaie juste <br> sans le slash. Ça fait un peu longtemps que j'ai pas fait de HTML mais je me souviens que j'utilisais <br> et ça sautait les lignes nickel... Et puis <br />, je crois bien que c'est réservé au XHTML. Si ça marche toujours pas et que tu utilises un logiciel WYSIWYG comme Nvu (ou Kompozer), passe en mode "visuel", tape "enter" et regarde le code correspondant dans le mode "source".
Bon courage =)
Essaie juste <br> sans le slash. Ça fait un peu longtemps que j'ai pas fait de HTML mais je me souviens que j'utilisais <br> et ça sautait les lignes nickel... Et puis <br />, je crois bien que c'est réservé au XHTML. Si ça marche toujours pas et que tu utilises un logiciel WYSIWYG comme Nvu (ou Kompozer), passe en mode "visuel", tape "enter" et regarde le code correspondant dans le mode "source".
Bon courage =)
Zephir432
Messages postés
32
Date d'inscription
mercredi 26 mai 2010
Statut
Membre
Dernière intervention
9 septembre 2010
3
26 mai 2010 à 23:21
26 mai 2010 à 23:21
Merci pour ton conseil.
En fait, quelle est la difference entre xhtml et html?
En fait, quelle est la difference entre xhtml et html?
athena21
Messages postés
75
Date d'inscription
lundi 17 mai 2010
Statut
Membre
Dernière intervention
23 mai 2011
4
27 mai 2010 à 11:37
27 mai 2010 à 11:37
je pense que ca serait mieux de les mettre dans un tableau comme ca ca sera plus organisé.
Yami-No-Naka
Messages postés
115
Date d'inscription
dimanche 23 mai 2010
Statut
Membre
Dernière intervention
28 novembre 2011
117
29 mai 2010 à 01:16
29 mai 2010 à 01:16
Je n'ai jamais pratiqué le XHTML, mais il se différencie du HTML par:
-des éléments toujours emboîtés (pas de chevauchement)
-des balises non-vides ayant toujours un "début" et une "fin" (ex <p>...</p>)
-des balises vides terminées par un slash (et là le fameux <br />)
-des valeurs d'attribut entre guillemets
...et plein d'autre trucs un peu durs à comprendre XD
-des éléments toujours emboîtés (pas de chevauchement)
-des balises non-vides ayant toujours un "début" et une "fin" (ex <p>...</p>)
-des balises vides terminées par un slash (et là le fameux <br />)
-des valeurs d'attribut entre guillemets
...et plein d'autre trucs un peu durs à comprendre XD
Zephir432
Messages postés
32
Date d'inscription
mercredi 26 mai 2010
Statut
Membre
Dernière intervention
9 septembre 2010
3
29 mai 2010 à 02:57
29 mai 2010 à 02:57
D'accord, car en réalité j'utilise le XHTML, puisque le HTML est assez vieux, mais je ne savais pas qu'il y avait toutes ces différences, car je n'ai jamais fait du HTML. J'aurais du écrire XHTML dans le titre...
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
29 mai 2010 à 08:55
29 mai 2010 à 08:55
le html n'est pas "vieux" ! et le xhtml 1.0 est en fait du html 4, tout comme le html 4.01.
Une petite lecture s'impose je pense...
http://css.mammouthland.net/balises-html.php#xhtml
Une petite lecture s'impose je pense...
http://css.mammouthland.net/balises-html.php#xhtml
briiiiix
Messages postés
575
Date d'inscription
vendredi 24 octobre 2008
Statut
Membre
Dernière intervention
1 juin 2010
18
29 mai 2010 à 01:27
29 mai 2010 à 01:27
Essaie ça:
- Tu crée une div qui contiendra l'image et le texte, je donne juste un exemple:
<div style="width:100px; height:150px; float:left;">
- Dedans tu mettra une autre qui contiendra l'image:
<div style="width:90px; height:120px; float:left; margin:5px 5px 5px 5px;">
<img .........../> </div>
- Enfin une autre div pour le texte
<div style="width:90px; height:20px; float:left; margin:5px 5px 5px 5px;">
Texte </div>
- Et n'oubli pas de fermer la première div
</div>
Voila
- Tu crée une div qui contiendra l'image et le texte, je donne juste un exemple:
<div style="width:100px; height:150px; float:left;">
- Dedans tu mettra une autre qui contiendra l'image:
<div style="width:90px; height:120px; float:left; margin:5px 5px 5px 5px;">
<img .........../> </div>
- Enfin une autre div pour le texte
<div style="width:90px; height:20px; float:left; margin:5px 5px 5px 5px;">
Texte </div>
- Et n'oubli pas de fermer la première div
</div>
Voila
Zephir432
Messages postés
32
Date d'inscription
mercredi 26 mai 2010
Statut
Membre
Dernière intervention
9 septembre 2010
3
Modifié par Zephir432 le 29/05/2010 à 03:18
Modifié par Zephir432 le 29/05/2010 à 03:18
Merci, mais j'ai un autre problème... <code>
J'ai voulu faire une image contenue dans un lien. (C'est une image lien qui mène à l'accueil)
Le problème est que je veux la positionner en haut à gauche et mettre un margin-top et margin-left d'environs 50px chacun, mais je ne sais pas comment faire.
J'ai essayé de faire ceci:
(CODE CSS)
a img{ /*Tout les images contenues dans un lien*/
display: block;
border: 0;
position: top left;
margin-top: 50px;
margin-left: 50px;
}
JE SAIS QU'IL Y A QUELQUE CHOSE QUI NE FONCTIONNE PAS MAIS JE NE SAIS PAS QUOI!
J'ai besoin d'aide.
J'ai voulu faire une image contenue dans un lien. (C'est une image lien qui mène à l'accueil)
Le problème est que je veux la positionner en haut à gauche et mettre un margin-top et margin-left d'environs 50px chacun, mais je ne sais pas comment faire.
J'ai essayé de faire ceci:
(CODE CSS)
a img{ /*Tout les images contenues dans un lien*/
display: block;
border: 0;
position: top left;
margin-top: 50px;
margin-left: 50px;
}
JE SAIS QU'IL Y A QUELQUE CHOSE QUI NE FONCTIONNE PAS MAIS JE NE SAIS PAS QUOI!
J'ai besoin d'aide.
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
Modifié par notobe le 29/05/2010 à 11:07
Modifié par notobe le 29/05/2010 à 11:07
position:top left n'existe pas.
C'est position:absolute ou position:relative (ou encore fixed), et ensuite les valeurs à donner à top et left.
exemple :
Mais attention, ce genre de positionnements demande de bien savoir ce qu'on fait et comment ça fonctionne.
Il faudrait peut-être d'abord apprendre les langages et ne pas essayer de bruler les étapes.
On commence donc par le commencement :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
https://openweb.eu.org/articles/initiation_flux/
https://openweb.eu.org/articles/initiation_float/
https://openweb.eu.org/articles/initiation_absolue/
C'est position:absolute ou position:relative (ou encore fixed), et ensuite les valeurs à donner à top et left.
exemple :
position:absolute; top:0; left:10px;
Mais attention, ce genre de positionnements demande de bien savoir ce qu'on fait et comment ça fonctionne.
Il faudrait peut-être d'abord apprendre les langages et ne pas essayer de bruler les étapes.
On commence donc par le commencement :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
https://openweb.eu.org/articles/initiation_flux/
https://openweb.eu.org/articles/initiation_float/
https://openweb.eu.org/articles/initiation_absolue/
briiiiix
Messages postés
575
Date d'inscription
vendredi 24 octobre 2008
Statut
Membre
Dernière intervention
1 juin 2010
18
29 mai 2010 à 14:26
29 mai 2010 à 14:26
Essaie ça:
a img{ /*Tout les images contenues dans un lien*/
display: block;
border: 0px;
position: absolute;
left: 50px;
top:50px;
z-index:2;
}
a img{ /*Tout les images contenues dans un lien*/
display: block;
border: 0px;
position: absolute;
left: 50px;
top:50px;
z-index:2;
}
