Je dois réaliser un site sur php en html/css pour ll'école. Je souhaiterais avoir une mise en forme de mon image mais je n'arrive pas à la placer pour que cela fasse joli
<article>
<h3>Apprendre PHP</h3>
<p class="bordure">Et bien pour ca rien de plus simple!!<br>
Il te suffit de cliquer sur cette image et de t'accrocher ;-)<img src="open_classroom.jpg" alt="apprendre PHP" id="classroom"></p>
</article>
Euuh, déjà deux fois la même balise dans ton css, y'a un problème non
Puis, quel est le rendu que tu souhaites avoir, joli c'est très subjectif et en plus sans le reste de ton site, difficile de voir ce qui ferait "joli".
Tu as probablement une maquette ? Si oui, ce serait bien de nous dire ce que tu as en tête. Si non, réfléchis d'abord à ce que tu veux comme rendu, puis code le après. Tu gagneras plus de temps en faisant une maquette quand cherchant à tâtons.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="site.css">
<title>Débuter en PHP</title>
</head>
<body>
<header>
<div id="entete"><h1>PHP</h1></div>
<div id="logo"></div>
</header>
<nav>
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="debuter_en_php.html">Débuter en PHP</a></li>
<li><a href="liens_utiles.html">Quelques liens utiles</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="sources.html">Sources</a></li>
</ul>
</nav>
<br>
<br>
<br>
<section>
<article>
<p>Comment débuter en PHP? Suis-je assé intelligent que pour apprendre la programmation? Aurais-je le temps? Autant de questions qui se bousculent dans votre esprit. Rassurez-vous, c'est dans le but de répondre à ces questions que ce site a été créé.
</p>
<hr>
<h3>Pourquoi apprendre le language PHP?</h3>
<p class="bordure">Tout d'abord, PHP est gratuit et ne nécessite aucune licence d'utilisation. PHP est le langage de programmation Web le plus utilisé. Il existe une communauté de développeurs très active qui rend disponibles des dizaines de milliers de librairies PHP de grande qualité ainsi qu'une vaste quantité de documentation et tutoriels pour le bénéfice de chacun. Ces ressources facilitent notre travail et réduisent notre temps d'exécution.</p>
</article>
<br>
<article>
<h3>A quoi sert le language PHP?</h3>
<p class="bordure">Le language PHP permet de passer d'un site statique à un site dinamique.Par exemple, un site satatique est construit avec html5 et css3 n'aura pas d'animation. A l'inverse, un site dynamique peut-être construit avec php, javascript... Ce site pourra envoyer des informations à une personne en particulier, ce qui permet de créer un compte, d'avoir des options de payments...</p>
</article>
</section>
<section>
<article>
<table>
<tr>
<td id="bordure_tableau">
<ol>
<li>un espace membres : vos visiteurs peuvent s'inscrire sur votre site et avoir accès à des sections qui leur sont réservées</li>
<br>
<li>un forum : il est courant aujourd'hui de voir les sites web proposer un forum de discussion pour s'entraider ou simplement passer le temps ;</li>
<br>
<li>un compteur de visiteurs : vous pouvez facilement compter le nombre de visiteurs qui se sont connectés dans la journée sur votre site, ou même connaître le nombre de visiteurs en train d'y naviguer !</li>
<br>
<li>des actualités : vous pouvez automatiser l'écriture d'actualités, en offrant à vos visiteurs la possibilité d'en rédiger, de les commenter, etc. ;</li>
<li>une newsletter : vous pouvez envoyer un e-mail à tous vos membres régulièrement pour leur présenter les nouveautés et les inciter ainsi à revenir sur votre site.</li>
<br>
</ol>
</td>
</tr>
</table>
</article>
<article>
<h3>Apprendre PHP</h3>
<p class="bordure">Et bien pour ca rien de plus simple!!<br>
Il te suffit de cliquer sur cette image et de t'accrocher ;-)<a href="https://openclassrooms.com" target="_blank"><img src="open_classroom.jpg" alt="apprendre PHP" id="classroom"></a></p>
</article>
</section>
<footer>
</footer>
</body>
</html>
Première petite chose pour mieux t'y retrouver : essaie de donner un ID à tes articles pour savoir toi de quoi tu parles.
Deuxième chose : ton image fait-elle réellement 200px de large ? Peux-tu envoyer un screenshot de ton rendu stp?
PS : "assez" et non "assé", "langage" et pas "language" qui est anglais, "statique" et non "satatique" Ne pas confondre "peut-être" (probabilité) et "peut être" (qui peut être construit) Bref, pense à relire ton site avant de le publier ou autre
Parfois, arrêter 5 minutes son développement permet de mieux repartir face à un problème ;)
Pas grand chose à rajouter par rapport à lindadu01.
Mis-à-part que tu mets en background de ton image ton image... Aucun intérêt. Tu places deux choses de façon identique mais avec une technique différente en faisant ça. Enlève le background déjà.
Il n'y a pas besoin de définir des dimensions à #classroom. Si tu veux redimensionner ton image en une valeur définie en px, autant le faire directement sur l'image plutôt que dans le css.
Sinon, j'ai pas compris ce que tu appelles le cadre. Mais je peux te proposer de placer ton image en dessous de ton texte. En utilisant correctement les flex-box ça devrait être assez simple et plus logique visuellement. Il suffit que tu modifies un peu le html (sortir l'image de la balise <p>) et le texte ("Il te suffit de cliquer sur l'image ci-dessous et de t'accrocher ;)")
Pareil, si tu veux placer ton image à gauche du texte, autant utiliser les flex-box.
Ton site est assez formel, tout est aligné à gauche (tu pourrais centrer) et il n'y a pas de couleur. Tu peux donner de la couleur à tes titres par exemple.
merci pour les réponses, je vais essayer avec flex-box
merci beaucoup
Placer une image(html/css)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Parfois, arrêter 5 minutes son développement permet de mieux repartir face à un problème ;)