Problème insertion d'image dans le CSS
Forbag
-
Matador -
Matador -
Bonjour,
Je bloque sur quelques choses de minime pour la création d'un site Web... En effet je ne comprend pas pourquoi cela ne fonctionne pas.
Je fais :
<img src="....." id ="test" />
Puis dans l'onglet CSS :
#test
}
position-y: 100%.,
Bottom : 90%.,...
.....
}
Ce sont des exemples parmi tant d'autre de balise mais rien ne change dans ma page Web...
AU niveau de l'image je précise car pour ce qui est de paragraphe ou autre cela fonctionne
Tenez, autre exemple
Body
{
Background-image : url("...")
.....
}
Même avec une image de fond cela ne fonctionne pas, j'ai essayé avec un lien où avec "image.png" ou ". Quelque chose" mais rien non plus.
Merci d'avance
Je bloque sur quelques choses de minime pour la création d'un site Web... En effet je ne comprend pas pourquoi cela ne fonctionne pas.
Je fais :
<img src="....." id ="test" />
Puis dans l'onglet CSS :
#test
}
position-y: 100%.,
Bottom : 90%.,...
.....
}
Ce sont des exemples parmi tant d'autre de balise mais rien ne change dans ma page Web...
AU niveau de l'image je précise car pour ce qui est de paragraphe ou autre cela fonctionne
Tenez, autre exemple
Body
{
Background-image : url("...")
.....
}
Même avec une image de fond cela ne fonctionne pas, j'ai essayé avec un lien où avec "image.png" ou ". Quelque chose" mais rien non plus.
Merci d'avance
A voir également:
- Problème insertion d'image dans le CSS
- Image iso - Guide
- Touche insertion clavier - Guide
- Insertion sommaire word - Guide
- Insertion filigrane word - Guide
- Insertion liste déroulante excel - Guide
2 réponses
Bonjour,
Il faut que tu continues à suivre des exemples dans des tutos ;-)
Et il faut mettre tout ton code.
Par exemple cela fonctionne, mais il faut que l'image soit au même endroit que index.html et style.css
PS : Pour la mise en forme des sources, au dessus de la zone d'édition de tes messages, il y a des icônes pour l'enrichissement du texte. Celle qui a cet aspect
Un petit tuto là : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Il faut que tu continues à suivre des exemples dans des tutos ;-)
Et il faut mettre tout ton code.
Par exemple cela fonctionne, mais il faut que l'image soit au même endroit que index.html et style.css
body {
background-image : url("back.jpg");
}
#banner1 {
background-color:black;
color:black;color:white;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>Premiers tests</title> </head> <body> <div id="banner1"> <h1>Mon site web</h1> <p>Lorem ipsum dolor sit amet. </p> </div> </body> </html>
PS : Pour la mise en forme des sources, au dessus de la zone d'édition de tes messages, il y a des icônes pour l'enrichissement du texte. Celle qui a cet aspect
<> ▼permet d'appliquer au code, suivant une liste de valeurs, le format correspondant à sa nature (C, Python, Shell, ...).
Un petit tuto là : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Je l'ai lu ! Ça m'a bien été utile merci, j'ai bien avancé pour mon site mais j'ai tout de même une dernière question
En effet, pour m'arrive sur mon site j'aimerai mettre une image de présentation, comme une bannière youtube, qui a une hauteur pas trop élevé mais prenant toute la largeur de la page. Malheureusement, j'ai essayé toute les balises : width, height,top,position...mais mon image reste toujours en haut à gauche de ma page... Escequ'il faut choisir une image avec la résolution de ma page internet, ou bien on peut élargir la largeur de l'image ?
En effet, pour m'arrive sur mon site j'aimerai mettre une image de présentation, comme une bannière youtube, qui a une hauteur pas trop élevé mais prenant toute la largeur de la page. Malheureusement, j'ai essayé toute les balises : width, height,top,position...mais mon image reste toujours en haut à gauche de ma page... Escequ'il faut choisir une image avec la résolution de ma page internet, ou bien on peut élargir la largeur de l'image ?
L'image ne prend pas toute la largeur, elle est trop petite, elle est juste centrée
voir la structuration des pages : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605881-structurez-votre-page
body {
background-image: url("back.jpg");
}
header {
background: yellow;
height:100px;
top:0;
left:0;
right:0;
background-image: url(logo.png);
background-repeat: no-repeat;
background-position: center;
}
footer {
background: red;
height:50px;
bottom:0;
left:0;
right:0;
}
section {
background-color: black;
color: white;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>Premiers tests</title> </head> <body> <header>page 1</header> <section> <h1>Mon site web</h1> <p>Lorem ipsum dolor sit amet. </p> </section> <footer>page 1</footer> </body> </html>
voir la structuration des pages : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605881-structurez-votre-page
on te le dit depuis le début, il faut suivre un cours complet, http://css.mammouthland.net/margin-padding-css.php
Quand tu mets <div id="banner1"> tu dis j'applique le style banner1 à tout ce qu'il y a dans le bloc.
<div id "logo" >
<img src="....." >
</div>
Puis
#logo
}
Position-y=.....,
...
}
?
Pour la seconde fois ... merci d'utiliser les BALISES DE CODE pour poster du code sur le forum !
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite ...
Dans le code que tu viens de donner .....
- Tu as oublié le signe "=" entre le mot "id" et "logo"
- Tu as mis deux accolades fermantes dans ton css ... normal que ça ne marche pas ...
Donc.. à corriger par :
<div id="logo" > <img src="....." > </div>#logo { position-y=....., ... }Et puis... position-y .. je ne connais pas....
voir ici :
https://developer.mozilla.org/fr/docs/Web/CSS/position
Merci pour l'éclaircissement, et peut on mettre "<div2>" pour numéroter chaque balise ?