18041 sujets

Questions générales et questions de débutants

[Résolu] Aligner une image a un texte

Hello, je bloque et pour le coup j'ai beau chercher je comprends pas. J'aimerai aligner une image avec du texte. Je vous mets une photo pour que vous voyez le soucis.

upload/1571765344-77403-capture.png

j'ai pas réellement de code étant donné que ceux essayés n'ont pas marchés.
En css j'ai seulement le placement de mon image (image-site c'est le nom de ma classe)
image-site{
    float: left;
}

et sa taille
img{
    width: 150px;
    height: auto;
    
}

d'ailleurs j'en profite pour aussi demander pourquoi mon width ainsi que mon height ne marchent pas sous ma classe image-site ? Ils ne marchent que si je déclare par un img comme dans l'exemple
l'image je l'ai mise comme ça 

    <body>
        <p class="image-site">
            <img src="img/logo.png" alt="site">
        </p>

je suis désolé si l'erreur est bête ou autre je suis débutant ^^"
merci ! Smiley smile
Modifié par Efeelios (22 Oct 2019 - 20:12)
Okay super les gars merci beaucoup, j'vais aller me train un peu là-dessus et je reviendrais vers vous si j'ai d'autres soucis concernant les fb.

J'en profite pour poser une autre question xD, regardez l'image, c'est possible d'enlever le fond blanc de la photo et de n'avoir que le "logo"

upload/1571841065-77403-capture.png

? j'ai trouvé quelque filon intéressant sur Alsa en cherchant un peu mais rien ne fonctionne et je me questionne si ce n'est pas un format d'image précis ou un truc dans le genre a mettre?

Merci ^^"
Modifié par Efeelios (23 Oct 2019 - 16:31)
Bonjour,
oui, ça s'appelle "détourer" une image. Je donne la procédure avec Gimp, avec Photoshop, ça doit être plus facile :
- Choisir "Ciseaux intelligents" (sans doute la partie la plus ardue, entourer le logo avec la souris).
- Valider (entrée)
- Inverser (sélection)
- Couleur vers Alpha (couleur)
- Effacer (Supp)
- Sauvegarder en png.
Des sites le font aussi automatiquement, mais il faut s'inscrire et je ne sais pas ce qu'ils font de nos images...
Bonne journée.
Bonjour Efeelios,
Il faut du png avec fond transparent ou svg
Mais il faut le faire dans un logiciel de retourche photo c'est pas faisable en css ou html

Pour ton menu , des exemples qui peuvent peut être t'aider
https://codepen.io/Zonecss/pen/VxdPmO
Modifié par aliasdmc (23 Oct 2019 - 18:09)
Ok super les gars merci, c'est génial vous répondez vite ça aide beaucoup.
J'ai regardé de mon côté pour les Flexbox, tuto d'Alsa, Open et un tuto vidéo de Grafikart et je pense avoir besoin de pratique pour que ça rentre correctement, car c'est pas encore ça. (je parle pour le placement du logo a gauche de ma barre de navigation)

Je reviens vers vous car du coup je bloque. Pour réaliser ma barre de navigation, j'ai procédé comme ça :

<body>
        <nav>
            <ul>
                    <li class="menu-contact"><a href="contact.html">Contact</a></li>
                    <li class="menu-presse"><a href="presse.html">Presse</a></li>
                    <li class="menu-blog"><a href="blog.html">Blog</a></li>
                    <li class="menu-avis"><a href="avis.html">Nos avis</a></li>
                    <li class="menu-equipe"><a href="equi.html">L'équipe</a></li>
                    <li class="menu-galerie"><a href="galerie.html">Galerie</a></li>
                    <li class="menu-ceremo"><a href="ceremo.html">Cérémonies Laïque</a></li>

                <li class="menu-prestations"><a href="presta.html">PRESTATIONS</a>
                    <ul class="submenu-presta">
                        <li><a href="#">ttt</a></li>
                        <li><a href="#">tttt</a></li>
                        <li><a href="#">tttti</a></li>
                    </ul>
                </li>
                <li class="menu-accueil"><a href="#">Accueil</a></li>
            </ul>
        </nav>

(tout est inversé car je connaissais pas encore l'utilisation des flexbox) ^^

Si j'ai bien compris et dans le cas contraire je m'excuse ^^", le format n'est pas bon pour ce que je veux faire? Il faut que je regroupe tout en une class, dont l'image et que je replace par le biais de l'utilisation des Flexbox? J'vous avouerai que c'est super flou et je comprends beaucoup mais j'ai le sentiment qu'il me manque quelque chose et je trouve pas. Du coup j'vous re-demande parce que j'avance pas malgré mes heures de tests.
merci ^^""
Modifié par Efeelios (23 Oct 2019 - 19:21)
Salut, j'ai trouvé la solution merci a tous de votre aide. J'ai procédé autrement que par des FB parce que j'y comprenais vraiment rien. Je l'ai positionné à droite aligné a mon texte et voilà comment j'ai procédé si ça peut intéresser quelques personnes :
c'est approximatif, mais si on n'y fait pas attention ça passe ^^'


.logositeimg{
    position: relative;
    width     : 100px;
    height    : 100px;
    bottom    : 100px;
    left      : 1200px;
}
Sujet clos
Aller à