26516 sujets

CSS et mise en forme, CSS3

upload/1549983784-74431-maquette210.png Bonjour , j'ai un petit soucis sur CSS
Je souhaiterai aligner mon image avec mes <h2> ( image à gauche et <h2 à droite). Or mes <h2>se mettent en ligne et non en colonne comme je le souhaiterais et je n'arrive absolument pas à les aligner..
Quelqu'un a une solution ? je lui en serai très reconnaissante ... Voici mon code

<body>

<section>
	<article>
		<h1 class="titre_services"> Nos services </h1>
			<p class="services">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed molestie</br> purus, nec bibendum turpis. Duis nec orci ligula. Vivamus.</p>
				<h2>UX Design 
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p> 
				<h2>UI Design</h2> 
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
				<h2>SEO</h2> 
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>

			<p class="pc"> <img src="images/pic_pc.png" alt="photo de pc" /> <p>
				
	</article>



 .titre_services 
{
	text-align: center;
	font-family:'robotoblack';
	font-size: 40px;
	margin-top: 5px;
	color:#282828;
}

.services
{
	text-align: center;
}

.pc 
{
	padding-left: 60px;
	margin-top: 50px;

} 


Et voici la maquette de ce que j'aimerai comme rendu
Modifié par Tinkerbell06 (12 Feb 2019 - 16:03)
Hello,

Attention ta première balise <h2> n'est pas fermée après "UX Design", c'est sûrement ça qui te cause un problème Smiley cligne
@xavierlet j'ai fermé ma balise mais ça ne me donne quand même pas le rendu voulu ...
Je ne vois pas la maquette avec le rendu final voulu. Upload la et je pourrais peut être t'aider Smiley biggrin
@Tinkerbell06 Oh okay j'avais pas compris ce que tu voulais faire pardon.
En fait tu veux que ton contenu soit sous forme de 2 colonnes si je comprends mieux.
Pour ça du coup il existe une multitude de technique mais pour répondre à ton problème je peux te proposer du display flex:

HTML

<section>
    <article>
        <div class="article">
            <div class="article__column center">
                <img src="images/pic_pc.png" class="pc" alt="photo de pc" />
            </div>
            <div class="article__column">
                <h1 class="titre_services"> Nos services </h1>
                <p class="services">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed molestie</br> purus, nec bibendum turpis. Duis nec orci ligula. Vivamus.</p>
                <h2>UX Design</h2>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
                <h2>UI Design</h2>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
                <h2>SEO</h2>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
            </div>
        </div>
    </article>
</section>


CSS


.titre_services {
    text-align: center;
    font-family:'robotoblack';
    font-size: 40px;
    margin-top: 5px;
    color:#282828;
}

.services {
    text-align: center;
}

.pc {
    padding-left: 60px;
    margin-top: 50px;
}

.article {
    display: flex;
    width: 100vw;
}

.article__column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
}

.center {
    text-align: center;
    align-items: center;
}


Essaye et reviens nous donner les résultats par rapport à ce que tu voulais Smiley cligne