Partage

Placer une image(html/css)

17 mai 2017 à 18:21:06

Bonjour,

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>



#classroom{
    width: 160px;
    height: 100px;
    position: absolute;
    margin-bottom: 20px;
}
#classroom{
    width: 160px;
    height: 100px;
    position: absolute;
    margin-bottom: 20px;
}



merci d'avance.

-
Edité par AntoineBoudjenah 17 mai 2017 à 18:23:39

17 mai 2017 à 19:04:18

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.

-
Edité par ShaWaTK 17 mai 2017 à 19:06:27

Ce message est inutile, ne le lis pas !!! Je t'avais prévenu...
28 mai 2017 à 17:48:06

<!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>

voila pour l'html et le css en bas

@font-face{
    font-family:'myfont';
    src:url(Capinella%20ou%20Beaujoais.ttf);
}
@font-face{
    font-family:'myfontt';
    src:url(Messenger%20Pigeons%20Personal%20Use.ttf);
}
html{
    background-color: #808080;
}
h1{
    background-color: red;
    padding: 10px;
    font-family: myfontt,fantasy,cursive;
    font-size: 50px
}
ul li a {
    display:inline-block;
    float:left;   
    width:auto;
    height: auto;
    background-color:#FF00FF;
    color:black;
    text-decoration:none;
    text-align:center;
    vertical-align:center;
    padding:5px;
    border:2px solid;
    border-color:;
 }
ul li a:hover {
    background-color:#76D7C4;
 }
li {
    margin-left:2px;
    float:left;
}
ul {
    padding:0;
    margin:0;
    list-style-type:none;
}
a{
    font-family: myfont,fantasy,sans-serif;
    font-size: 25px;
}
table{
    margin: auto;
    
}
caption{
    font-size: 25px;
    text-decoration: underline;
}
th {  
 border-width:1px;
 border-style:solid; 
 border-color:black;
 vertical-align: middle;
 text-align: center;
 background-color: #EB984E;
 text-align: center;
 }
td {
 border-width:1px;
 border-style:solid; 
 border-color:black;
 vertical-align: middle;
 text-align: center;
 background-color: #800080;
 text-align: center;
 }
label{
    display: block;
    width: 150px;
    float:left;
}
input, textarea{
    font-family: cursive;
}
fieldset{
    padding:20px;
    border:2px solid black;
    width: 25em;
}
#entete{
    height: 110px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#logo{
    width: 150px;
    height: 100px;
    position: absolute;
    top: 40px;
    left: 170px;
    background: url(ele-running.gif)
        no-repeat;
}
#bordure_tableau{
    border: 1px solid black;
    text-align: justify;
    background: #BFC9CA;
    padding: 15px;
    padding-bottom: 25px;
}
#classroom{
    background: url("open_classroom.jpg") 
        no-repeat;
    width: 200px;
    height: auto;
    vertical-align: text-top;
    float: right;
    margin-left: 50px; 
}
.bordure{
    border: 2px solid black;
    padding: 10px;
}

voila donc j'ai une image et je souhaiterais la mettre dans le cadre avec un padding-top/bottom de +/- 10px

merci d'avance

29 mai 2017 à 11:45:04

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 ;)

29 mai 2017 à 15:50:24

Saut,

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.

-
Edité par ShaWaTK 29 mai 2017 à 15:52:36

Ce message est inutile, ne le lis pas !!! Je t'avais prévenu...
31 mai 2017 à 16:11:02

bonjour, 

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é.
  • Editeur
  • Markdown