Partage

Ajouter images/textes dans des cadres séparés

Sujet résolu

23 mai 2017 à 16:24:57

Bonjour à tous,

Je veux afficher un bloc qui contient une image (une partie d'une pièce) et du texte à côté (des informations/résumé sur la pièce).

J'ai trouvé un site pas trop mal en css et j'ai voulu m'en inspiré sauf que je n'ai pas réussi.

Ce que j'ai voulu faire :

Ce que j'ai :

En faite, j'ai voulu faire un <div> qui contient deux <div> (un pour l'image et un pour le texte). Sauf que non seulement j'ai du mal à mettre le texte à droite mais en plus si je met l'image dans un cadre tout seul elle n'occupe pas tout l'espace.

En plus, je veux afficher un carré de l'image (juste une partie qu'on voit bien comme si on avait zoomer sur l'image), je ne veux pas afficher l'image entière dans le carré.

Merci d'avance pour votre aide !

FloJDM

23 mai 2017 à 16:27:30

<div id="conteneur">
    <div class="element"><p><img src="ton-image"/></p></div>
    <div class="element"><p>Ton texte</p></div>
</div>

#conteneur
{
    display: flex;
}

-> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

me_moi

23 mai 2017 à 16:36:21

<img />

</figcaption>

</figure>

-
Edité par me_moi 23 mai 2017 à 16:39:53

Dragacode

23 mai 2017 à 16:56:04

@FloJDM Merci beaucoup pour la réponse rapide, j'ai ça :

Mais comment je pourrais faire pour que l'image occupe toute la hauteur sans la déformer (par exemple : largeur = 350 px et hauteur = celle du cadre bleu ciel), il n'y a pas de propriété pour ça ?

@me_moi c'est pour la légende d'une image ça?

me_moi

23 mai 2017 à 18:20:45

Pour la hauteur, je te conseille de faire l'inverse, c'est-à-dire que ce soit le cadre qui ait une hauteur en fonction de la hauteur de l'image et ne pas attribuer une hauteur au cadre. Donc, arrange toi pour que tes images aient toutes la même largeur, et en fonction de la largeur, qu'elles aient une certaine hauteur, avec un ratio, par exemple 2/3, car il vaut mieux ne jamais utiliser la propriété height tant qu'on peut éviter. ÉVITER d'utiliser la propriété height le plus possible.

-
Edité par me_moi 23 mai 2017 à 18:25:10

exen

24 mai 2017 à 4:36:18

En gors tu cherche à faire ceci ?

<!DOCTYPE html>
  <html lang="fr-FR">
    <head>
       <meta charset="UTF-8"> 
       
   <style>

#conteneur
{
    display: flex;

  /*Une boite */
    -moz-box-shadow: 0 0 20px #555; 
    -webkit-box-shadow: 0 0 20px #555; 
    box-shadow: 0 0 20px #555; 
    width:95vw;
    height: 40vh;
}
.element{
    display: inline-flex;
    width:auto;
    height: 100%;
}

.image{
    display: inline-flex;
	margin-top: 0px;
	margin-bottom: 0px;
    width:auto;
    height: 100%;
}

.ptexte{
	padding-left: 10px;
}


   </style>    	
   </head>

   <body>
   	
		<div id="conteneur">
		    <div class="element"><img src="images/wp/1.jpg"  class="image" /></div>
		    <div class="element"><p class="ptexte">Ton texte</p></div>
		</div>

   </body>

   </html>

Compos sui.

Dragacode

24 mai 2017 à 13:59:11

@me_moi ok merci pour le conseil !

@exen wow j'ai quasiment fini grâce à toi, me manque juste de mettre deux textes séparés, chose que je n'arrive pas à faire.

Voilà ce que j'ai :

Tu peux voir que dans la deuxième pièce le texte va bien, c'est juste un paragraphe, par contre ce que je veux faire c'est ce qu'il se trouve dans la première pièce, un lien avec <a href> et un texte en dessous qui sera des informations sur la pièce.

Cependant, quand je fais ça ils sont en décalés je sais pas pourquoi :/

Voilà mon code au cas où :

<div class="piece">
                            <div class="element"><img src="images/piece1.jpg" class="image" /></div>
                            <div class="element"><a href="#">Piece1</a></div>
                            <div class="element"><p>Text</p></div>
                        </div>
                        <div class="piece">
                            <div class="element"><img src="images/piece2.jpg" class="image" /></div>
                            <div class="element"><p class="ptexte">Texte random pour l'instant !</p></div>
                            <div class="element"><p>lol</p></div>
                        </div>

.piece
{
    display: flex;

    /*Une boite */
        -moz-box-shadow: 0 0 20px #555;
        -webkit-box-shadow: 0 0 20px #555;
        box-shadow: 0 0 20px #555;
        width:95vw;
        height: 40vh;
        border: 1px solid white;
        margin: auto;
        margin-bottom: 35px;
}

.element{
    display: inline-flex;
    width: auto;
    height: 100%;

}

.image{

    border-right: 1px solid black;
    display: inline-flex;
    margin-top: 0px;
    margin-bottom:0px;
    width: auto;
    height: 100%;

}

.ptexte{
    /*padding-left: 10px;*/
}

article h1
{
    text-align: center;
}

element a
{
    font-weight: bold;
}

D'ailleurs merci beaucoup pour ton code !

exen

24 mai 2017 à 18:04:23

Lol de rien, je ne suis pas certain que ce que je t'ai fait sois très conventionnel.

J'avoue avoirs du mal à comprendre ce que tu désir, tu veut en fait crée un liens qui va appeler un nouveau texte et une nouvelle image, ou créer une ancre qui va les mener au cadre du dessous ?

Déja tu n'est pas obligée de coller une div par ligne c'est là ou ca pose problème, si tu les vires ça passe mieux.

<div class="piece">
                        <div class="element">
                    		<img src="images/piece1.jpg" class="image" />
                        </div>

                        <div class="element">


                            <p><a href="#">Piece1</a></p>
                           
                            <p>Text</p>

                        </div>
                        
                        </div>
                        <div class="piece">
                            <div class="element">
                            	<img src="images/piece2.jpg" class="image" />
                            </div>
                            <div class="element">
                            	<p class="ptexte">Texte random pour l'instant !</p>
                            </div>
                            <div class="element">
                            	<p>lol</p>
                            </div>
                        </div>

</div>

Tu peut aussi ajouter un petit truc pour masquer les liens dans ton css

a:link 
{ 
 text-decoration:none; 
}

-
Edité par exen 24 mai 2017 à 18:27:40

Compos sui.

Hayetteboubekeur

24 mai 2017 à 18:29:31

   <div class="element"><img src="images/piece1.jpg" class="image" /></div>
                            
   <div class="element"><p><a href=""></a></p><p>Text</p></div>

Essaye plutot ça

-
Edité par Hayetteboubekeur 24 mai 2017 à 18:30:24

exen

24 mai 2017 à 19:12:33

Tiens au passage si tu tiens à garder tes div tu as aussi cette possibilités, là je viens d’aérer le html, et de dupliquer la class "element" pour en changer la couleur afin que tu vois un peut comment ça se comporte.

Pour faire simple ton problème sur ce que je t'ai écrit, c'est que tu ne peut pas inclure div et p en même temps, sois l'un sois l'autre. Ne me demande pas pourquoi je cherche encore.

Je t'ai aussi changé la valeur du texte, et l'ai passé en em, je t'aurais bien dit rem mais je ne sais pas si c'est pris en charge par tout les navigateurs.

Si tu t'amuse à bouger un peut ta fenêtre tu va pouvoir voire comment l'ensemble se comporte, après tu serras quand même obliger d'éditer des règles @media pour pour les petits écrans.

<!DOCTYPE html>
  <html lang="fr-FR">
    <head>
       <meta charset="UTF-8"> 
       
   <style>

.piece
{
    display: flex;
 
    /*Une boite */
        -moz-box-shadow: 0 0 20px #555;
        -webkit-box-shadow: 0 0 20px #555;
        box-shadow: 0 0 20px #555;
        width:95vw;
        height: 40vh;
        border: 1px solid white;
        margin: auto;
        margin-bottom: 35px;
}
 
.element{
	background-color: red;
    display: inline-flex;
    width: auto;
    height: 100%;
}
.element1{
	background-color: blue;
    display: inline-flex;
    width: auto;
    height: 100%;
}
 .element2{
	background-color: green;
    display: inline-flex;
    width: auto;
    height: 100%;

}
.image{
 
    border-right: 1px solid black;
    display: inline-flex;
    margin-top: 0px;
    margin-bottom:0px;
    width: auto;
    height: 100%;
 
}
 
.ptexte{
    padding-left: 10px;
    font-size: 1em;
}
 
article h1
{
    text-align: center;
}
 
element a
{
    font-weight: bold;
}


   </style>    	
   </head>

   <body>
   	
<div class="piece">
                            <div class="element">
                            	<img src="images/piece1.jpg" class="image" />
                            </div>
                            <div class="element1 ptexte">
                            	<a href="#">Piece1</a>
                            </div>
                            <div class="element2 ptexte">
                            Text
                        	</div>
</div>

<div class="piece">
                            <div class="element">
                            	<img src="images/piece2.jpg" class="image" />
                            </div>
                            <div class="element1">
                            	<p class="ptexte">
                            	Texte random pour l'instant !
                            	</p>
                            	<p>
                            	lol
                            	</p>
                            </div>
</div>

   </body>

   </html>

Compos sui.

stefde3

25 mai 2017 à 0:54:46

Rha lala la nouvelle mode des display:flex... maintenant c'est à tout bout de champ que je les vois...

En gros tu veux un truc dans ce genre-là quoi :

Essai

Le CSS ça peut craindre -->Conférence CSS3.CREATE

exen

25 mai 2017 à 4:00:02

Yes voila c'est exactement ça ; )

Merci.

Demain soir je vais jeter un coup d’œil du coté des media queries, et des %, comme tu me l'a conseillé.

Compos sui.

Rennor974

25 mai 2017 à 7:35:35

Il y a une solution plus simple que de refaire tout le css :sur la page dont tu t'inspire : clic droit -> code source -> puis clic sur le lien de la feuille de style et tu y recupere la partie qui t'interesse

stefde3

25 mai 2017 à 11:43:11

On acquiert ce reflexe avec le temps.

Le CSS ça peut craindre -->Conférence CSS3.CREATE

exen

25 mai 2017 à 13:09:33

@Rennor974 Pour ma part ce n'étais absolument pas le but de faire un Ctrl-u, je voulais surtout voir et comprendre les possibilités, pour un même résultat, en plus je n’était absolument pas certains du placement de certaines de mes balises.

D'un autre coté c'est pas non plus mon post, je le fait juste pour le sport. lol

Compos sui.

Dragacode

26 mai 2017 à 10:30:00

Je suis vraiment désoler, je n'ai pas été très clair, je vais tout vous expliquer

Alors en gros je veux faire un cadre qui en contient deux (un avec une image et un avec du texte). Concernant le texte, j'aimerais en gros avoir un titre (qui sera un lien qui renvoie vers une autre page quand on clique dessus par exemple : "PIECE 1") et avec en dessous du texte qui sera une description de la pièce, en l’occurrence ça sera la liste des capteurs que contient la pièce (j'utiliserais par la suite des requêtes SQL pour récupérer le nom des capteurs à partir de ma base de données et les afficher mais je ferais peut-être un autre sujet pour ça) .

Exemple :

PIECE 1

Il y a 5 capteurs:

-Temperature

-Fumee

-Lumiere

etc...

Je vous met tout le code que j'ai pour l'instant avec un aperçu :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="pageaccueil.css" />
        <title> Page d'accueil</title>
    </head>

    <body>
        <div class="background-image"></div>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id="logo">
                        <img src="images/ConnectUs3.png" alt="Logo du site" />
                        <h1>DOMISEP</h1>
                    </div>
                    <h2>Gestion d'habitations connectées</h2>
                </div>

                <nav>
                    <ul>
                        <li><a href="#">Données en temps réel </a></li>
                        <li><a href="#">Mes informations </a></li>
                        <li><a href="#">Actionneurs </a></li>
                        <li><a href="#">Statistiques </a></li>
                    </ul>
                </nav>
            </header>

            <div id="banniere_image">
                <div id="banniere_description">
                    Gérez votre habitation efficacement !

                </div>
            </div>

            <section>
                <article>
                    <h1>VOS PIECES</h1>

                        <div class="piece">
                            <div class="element">
                                <img src="images/piece1.jpg" class="image" />
                            </div>

                            <div class="element1 ptexte">

                                <a href="#"> Piece</a>
                            </div>
                            <div class="element2 ptexte">
                                <p>Text</p>
                            </div>

                        </div>
                        <div class="piece">
                            <div class="element">
                                <img src="images/piece2.jpg" class="image" />
                            </div>
                            <div class="element">
                                <p class="ptexte">Texte random pour l'instant !</p>
                            </div>
                            <div class="element">
                                <p>lol</p>
                            </div>
                        </div>
                        <div class="piece">
                            <div class="element"><img src="images/piece3.jpg" class="image" /></div>
                            <div class="element"><p class="ptexte">Texte random pour l'instant !</p></div>
                            <div class="element"><p>lol</p></div>
                        </div>
                        <div class="piece">
                            <div class="element"><img src="images/piece4.jpg" class="image" /></div>
                            <div class="element"><p class="ptexte">Texte random pour l'instant !</p></div>
                            <div class="element"><p>lol</p></div>
                        </div>
                        <div class="piece">
                            <div class="element"><img src="images/piece55.jpg" class="image" /></div>
                            <div class="element"><p class="ptexte">Texte random pour l'instant !</p></div>
                            <div class="element"><p>lol</p></div>
                        </div>




                </article>

            </section>

            <footer>
                <a href="#">Nous contacter</a>
                <h1>© 2017 DOMISEP<p></p>
            </footer>
        </div>
    </body>
</html>

body
{
    background: url("images/villaban4.jpg") fixed;
}
a:link
{
    text-decoration: none;
}
p
{
    font-family: 'sans-serif';
}
#bloc_page
{

    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: 'Trebuchet MS';
    text-transform: uppercase;
}

header
{

    color: white;
    background-color : #465150;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    padding-top: 15px;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img
{
    width: 120px;
    height: 75px;

}

header h1
{
    font-family: 'Trebuchet MS';
    font-size: 2.5em;
    font-weight: normal;
    margin-bottom: 1px;
    margin-left: 17px;
}

header h2
{
    font-family: 'Trebuchet MS';
    font-size: 1.2em;
    margin-top: 0px;
    font-weight:normal;
}

nav ul
{

    padding-right: 5px;
    padding-bottom : 30px;
    list-style-type:none;
    display:flex;
    justify-content: space-around;
}

nav a
{
    font-weight: bold;
    padding-right: 10px;
    font-size: 1em;
    color: white;
    padding-bottom: 3px;
    text-decoration: none;
}

footer img
{
    width: 120px;
    height: 75px;
    background-color: white;
    border: solid black 3px;
}

footer h1
{
    font-size: 2em;
    text-align: center;
    color: grey;
    margin-bottom: 25px;
}

footer a
{
    text-align: center;
    font-size: 1.8em;
    color: white;
    text-decoration: none;
}



footer
{
    background-color: black;
}

#banniere_image
{
    /*margin-top: 15px;*/
    height:200px;
    /*border-radius: 5px;*/
    background: url('images/villaban4.jpg')  no-repeat;
    background-position: -0px -200px;
    position: relative;
    border-top: 1px solid white;
    /*box-shadow: 0px 4px 4px #1c1a19;*/
    /*margin-bottom: 25px;*/
}

#banniere_description
{
    font-family: 'Trebuchet MS';
    position: absolute;
    bottom: 0;
    /*border-radius: 0px 0px 5px 5px;*/
    width: 99.4%;
    height: 33px;
    padding-top: 15px;
    padding-left: 10px;
    background-color: rgba(24,24,24,0.6);
    color: white;
    font-size: 1.2em;
}

.piece
{
    display: flex;
    background-color: rgba(24,24,24, 0.6);
    /*Une boite */
        -moz-box-shadow: 0 0 20px #555;
        -webkit-box-shadow: 0 0 20px #555;
        box-shadow: 0 0 20px #555;
        width:95vw;
        height: 40vh;
        border: 1px solid white;
        margin: auto;
        margin-bottom: 35px;
}

.element{
    background-color: red;
    display: inline-flex;
    width: auto;
    height: 100%;

}
.element1{
    background-color: blue;
    display: inline-flex;
    width: auto;
    height: 100%;

}
.element2{
    background-color: green;
    display: inline-flex;
    width: auto;
    height: 100%;

}

.image{

    border-right: 1px solid black;
    display: inline-flex;
    margin-top: 0px;
    margin-bottom:0px;
    width: auto;
    height: 100%;

}

.ptexte{
    padding-left: 10px;
    font-size: 1em;

}

article h1
{
    font-family: 'Arial';


    text-align: center;
    font-size: 3.5em;
    color: white;
    font-weight: lighter;
    text-shadow: 2px 2px grey;
    /*background-color: rgba(55,55,55,0.6);*/
}

.element a
{
    font-weight: bold;

}

.element p
{

    color: white;
    font-size: 1.5em;
}

@exen encore merci mec

@Rennor974 oui c'est ce que j'ai utilisé pour pouvoir lire le code de stefde3, merci^^

@stefde3 c'est exactement ce que je veux (les boutons ne sont pas obligatoires) si tu pouvais m'expliquer un peu (en général) ton code ça serait génial (je ne maîtrise pas encore tout les propriétés css, d'ailleurs il y en a quelques une que j'ai pas très bien compris dans le code d'exen)

Lucky13

26 mai 2017 à 11:42:09

stefde3 a écrit:

Rha lala la nouvelle mode des display:flex... maintenant c'est à tout bout de champ que je les vois...

En gros tu veux un truc dans ce genre-là quoi :

Essai

Effectivement le modèle flexbox simplifie grandement les choses, ne serait ce que pour centrer un <div> en milieu de page quelque soit la taille de fenêtre, chose pénible avant... J'ai eu la même réflexion que toi au début (on dirait du float) mais maintenant tout va bien

Il ne faut pas non plus enterrer les inline-block et autres sertes, d'ailleurs ton code ( joli travail) le démontre, même si le chevauchement constaté en réduisant la fenêtre démontre les limites sans devoir passer par un @media. Mais on peut faire de même avec flexbox, avec lequel une seul ligne permet de changer le sens ou comportement...

-
Edité par Lucky13 26 mai 2017 à 11:45:16

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

stefde3

26 mai 2017 à 13:00:53

oui en effet mais on m'a pas demandé à ce que ce soit responsive hein

donc j'ai fait au mieux et au plus vite

@Dragacode : Tu peux reprendre mes codes si tu veux

Le CSS ça peut craindre -->Conférence CSS3.CREATE

Dragacode

26 mai 2017 à 13:17:34

@stefde3 je jetterais un coup d'oeil sur ton code et le testerais, c'est juste que comme t'utilise pas flexbox mais plus les positions relatives/absolues c'est pas très évident pour moi

merci beaucoup en tout cas

EmmanuelBeziat

26 mai 2017 à 13:36:20

Salut,

Voilà un exemple responsive avec flexbox https://jsfiddle.net/5Lwe73bp/1/

J'ai mis plusieurs exemples pour en démontrer l'intérêt :

Avoir les éléments affichés toujours en bas du cadre, peu importe sa taille, sans avoir à sortir les éléments du flux
Pouvoir changer l'ordre des éléments très facilement (exemple sur la dernière carte en mode mobile)

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Dragacode

28 mai 2017 à 18:55:48

@rhooManu Il faudrait que je revois/apprends quelque propriétés css de ton code, sinon ça marche niquel ! merci beaucoup