Bonjour à tous !
Avant tout, je précise que je suis carrément novice. J’apprends petit à petit en créant mon propre site (projet perso) et aujourd'hui, j'ai besoin de vous !
Voila, dans ma section <littles-articles-flex> j'ai, une image (<box-article>) et une div avec du texte à l'interieur. En lg et en md je veux que ma partie texte superpose l'image et à partir du sm, que les deux se mettent l'un en dessous de l'autre en commençant par l'image. Or, j'ai dû inverser les div dans le html pour que la div box article soit à gauche et l'image à droite (pas réussis à faire autrement). Par conséquent au moment de réduire, la div avec du texte passe au dessus de l'image. J'ai fais pas mal de recherche et ai essayé beaucoup de choses (peut être pas de la bonne façon) : flexbox, display:table, pull/push... mais je n'arrive pas au résultat escompté.
Avez vous une solution ?
Merci d'avance !
Avant tout, je précise que je suis carrément novice. J’apprends petit à petit en créant mon propre site (projet perso) et aujourd'hui, j'ai besoin de vous !
Voila, dans ma section <littles-articles-flex> j'ai, une image (<box-article>) et une div avec du texte à l'interieur. En lg et en md je veux que ma partie texte superpose l'image et à partir du sm, que les deux se mettent l'un en dessous de l'autre en commençant par l'image. Or, j'ai dû inverser les div dans le html pour que la div box article soit à gauche et l'image à droite (pas réussis à faire autrement). Par conséquent au moment de réduire, la div avec du texte passe au dessus de l'image. J'ai fais pas mal de recherche et ai essayé beaucoup de choses (peut être pas de la bonne façon) : flexbox, display:table, pull/push... mais je n'arrive pas au résultat escompté.
Avez vous une solution ?
Merci d'avance !
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Wire+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
<title>Maman indécise - Le blog</title>
</head>
<body>
<div class="page-wrapper">
<nav class="navbar">
<div class="container">
<ul class="nav-main-left">
<li id="acceuil"><a class="main-link" href="">Acceuil</a></li>
<li id="mumlife"><a class="main-link" href="">Mum Life</a></li>
<li id="mode"><a class="main-link" href="">Mode</a></li>
<li id="beaute"><a class="main-link" href="">Beaute</a></li>
</ul>
<ul class="nav-main-right">
<li id="lifestyle"><a class="main-link" href="">Lifestyle</a></li>
<li id="test"><a class="main-link" href="">Test</a></li>
<li id="maison"><a class="main-link" href="">Maison</a></li>
<li id="contact"><a class="main-link" href="">Contact</a></li>
</ul>
<div class="logo-center">
<h1 class="h1">
<a class="logo-h1" href="" rel=""><img src="Logo/blog-maman-logo.png" alt="Maman indecise, blog maman, beaute, decoration, cuisine, lifestyle, mode femme et enfant, "></a>
</h1>
</div>
</div>
</nav>
<main id="main">
<section class="big-article">
<div class="container">
<div class="big-img-article">
<a href="" title="">
<img class="big-img img-responsive" src="images/printable-bullet-journal.jpg" alt="">
</a>
</div>
<div class="box-text-big-article">
<p class="big-article-category">
<a href="" rel="">Mode</a>
</p>
<h2 class="article-title">
<a href="" rel="bookmark" title="">Les jeans sont les vêtements les plus consommés </a>
</h2>
<footer class="link-more">
<a href="" rel="" title="">Lire la suite</a>
</footer>
</div>
</div>
</section>
<!-- col-lg-4-->
<section class="littles-articles-flex">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="box-text-left">
<p class="littles-articles-category">
<a href="" rel="">Mode</a>
</p>
<div class="article-title">
<h2 class="h2"><a href="" rel="bookmark">Les jeans sont les vêtements les plus consommés </a></h2>
</div>
<div class="article-content">
<div class="box-little-p">
<p>Les jeans sont les vêtements les plus consommés avec 2 milliards de jeans vendus chaque année dans le monde dont 63 millions en France !</p>
</div>
<footer class="link-more">
<a href="" rel="" title="">Lire la suite</a>
</footer>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="box-article">
<a href="" title="">
<img class="article-img-right img-responsive" src="images/canada-en-hiver.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</section> [/#]
<section class="littles-articles">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="box-article">
<a href="" title="">
<img class="article-img-left img-responsive" src="images/canada-en-hiver.jpg" alt="">
</a>
</div>
</div>
<div class="col-lg-4">
<div class="box-text-right">
<p class="littles-articles-category">
<a href="" rel="">Mode</a>
</p>
<div class="article-title">
<h2 class="h2"><a href="" rel="bookmark">Les jeans sont les vêtements les plus consommés </a></h2>
</div>
<div class="article-content">
<div class="box-little-p">
<p>Les jeans sont les vêtements les plus consommés avec 2 milliards de jeans vendus chaque année dans le monde dont 63 millions en France !</p>
</div>
<footer class="link-more">
<a href="" rel="" title="">Lire la suite</a>
</footer>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="banniere">
<div class="container-fluid">
<img class="banniere-rose" src="banniere-reseaux/bande-rose.png">
</div>
</div>
<section class="littles-articles-flex">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="box-text-left">
<p class="littles-articles-category">
<a href="" rel="">Mode</a>
</p>
<div class="article-title">
<h2 class="h2"><a href="" rel="bookmark">Les jeans sont les vêtements les plus consommés </a></h2>
</div>
<div class="article-content">
<div class="box-little-p">
<p>Les jeans sont les vêtements les plus consommés avec 2 milliards de jeans vendus chaque année dans le monde dont 63 millions en France !</p>
</div>
<footer class="link-more">
<a href="" rel="" title="">Lire la suite</a>
</footer>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="box-article">
<a href="" title="">
<img class="article-img-right img-responsive" src="images/canada-en-hiver.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</section>
<section class="littles-articles">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="box-article">
<a href="" title="">
<img class="article-img-left img-responsive" src="images/canada-en-hiver.jpg" alt="">
</a>
</div>
</div>
<div class="col-lg-4">
<div class="box-text-right">
<p class="littles-articles-category">
<a href="" rel="">Mode</a>
</p>
<div class="article-title">
<h2 class="h2"><a href="" rel="bookmark">Les jeans sont les vêtements les plus consommés </a></h2>
</div>
<div class="article-content">
<div class="box-little-p">
<p>Les jeans sont les vêtements les plus consommés avec 2 milliards de jeans vendus chaque année dans le monde dont 63 millions en France !</p>
</div>
<footer class="link-more">
<a href="" rel="" title="">Lire la suite</a>
</footer>
</div>
</div>
</div>
</div>
</div>
</section>
<nav class="pagination container" data-max="">
<div class="container">
<span class="prev">Page précédente</span>
<span class="next">
<a href="">Page suivante</a>
</span>
<ul class="page-numbers">
<li><span aria-current="page" class="page-numbers current">1</span></li>
<li><a class="page-numbers" href="">2</a></li>
<li><a class="page-numbers" href="">3</a></li>
<li><span class="page-numbers dots">…</span></li>
<li><a class="page-numbers" href="">10</a></li>
</ul>
</div>
</nav>
</main>
</div>
</body>
</html>@charset "UTF-8";
/* GENERAL */
*{
margin: 0;
padding: 0;
}
*
{
box-sizing: border-box;
}
html {
font-family: 'Open Sans', sans-serif;
text-size-adjust:100%;
}
body{
margin: 0;
z-index:1;
}
a{
font-family: 'Open Sans',sans-serif;
background-color: transparent;
text-decoration: none;
outline: 0;
}
a:hover {
outline:0;
}
a:visited{
color: #000;
}
h{
font-family:'Open Sans', sans-serif;
}
p{
hyphens: auto;
font-size: 16px;
line-height: 1.7em;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
color: #000;
word-break: break-word;
word-wrap: break-word;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li{
display: inline-block;
text-decoration: none;
outline: 0;
}
img {
max-width:100%;
height:auto;
list-style-image: none;
}
body{
color:#000;
background-color:#fff;
text-align:justify;
}
/*TOP BAR*/
.navbar{
background-color: #fff;
font-size: 12px;
letter-spacing: .2em;
font-weight: 600;
text-transform: uppercase;
max-width: 1440px;
padding-left: 80px;
padding-right: 80px;
margin-right: auto;
margin-left: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
padding-bottom: 90px;
}
.navbar .nav-main-left{
position: absolute;
right: 0;
transition: left 1s, transform 1s;
white-space: nowrap;
right: 1045px;
top:40px;
}
.navbar li a {
color: #424242 ;
font-family: 'Open Sans', sans-serif;
}
.navbar li a:hover{
color: #FDC8C8;
text-decoration: none;
}
.navbar .nav-main-left li{
display: inline-block;
line-height: 40px;
margin-left: 45px;
margin-right: 40px;
}
.navbar .nav-main-right{
text-align: right;
width: 40%;
position: absolute;
left: 0;
transition: left 1s, transform 1s;
white-space: nowrap;
left: 820px;
top:40px;
}
.navbar .nav-main-right li{
display: inline-block;
line-height: 40px;
margin-left: 45px;
}
/*LOGO MAIN*/
.logo-center{
}
.logo-h1{
position: absolute;
left: 0;
transition: left 1s, transform 1s;
white-space: nowrap;
width: 20%;
left: 595px;
top: 10px;
}
/*MAIN ARTICLES*/
.big-article{
margin-top: 50px;
}
.big-img-article{
width: 100%;
height: auto;
border: solid 8px rgba(255, 255, 51, 0.3);
border-bottom: none;
}
.box-text-big-article{
box-sizing: border-box;
position: relative;
width: 100%;
height: auto;
padding-top: 20px;
background-color: rgba(255, 255, 51, 0.3);
text-align: center;
}
.big-article-category {
width: 200px;
margin: -50px auto 25px;
background-color: #FFCC33;
padding: 5px;
}
.big-article-category a{
text-transform: uppercase;
letter-spacing: .2em;
line-height: 2.7em;
color: #000;
text-decoration: none;
padding: 24px;
font-weight: 700;
font-size: 1.1em;
}
.article-title a {
/*letter-spacing: .1em;*/
/*text-transform: uppercase;*/
font-weight: bold;
font-family: 'Open Sans',sans-serif;
color: #424242;
font-size: 25px;
line-height: 1.4em;
}
.article-title{
text-align: center;
}
.article-title a:hover{
color: #fdbfb7;
}
.link-more{
text-align: center;
}
.link-more a{
font-size: 14px;
font-family: 'Open Sans',sans-serif;
letter-spacing: 0.2em;
font-weight: 600;
text-transform: uppercase;
position: relative;
overflow: hidden;
color: #fe96a0;
border-bottom: 2px solid #fdbfb7;
margin: 0 auto;
}
.link-more a:hover{
color: #000;
border-bottom:1px solid #000;
}
/* LITTLE ARTICLE*/
.littles-articles{
background-color: #fff;
}
.littles-articles-flex{
display: flex;
flex-wrap: wrap;
}
.box-article{
margin-top: 40px;
}
.article-img-left{
width: 100%;
height: auto;
}
.article-img-right{
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
.box-text-right{
background-color: #fff;
border: solid 3px rgba(255, 255, 51, 0.3);
width: 115%;
margin: 75px 0 0 -50px;
text-align: center;
}
.box-text-left{
background-color: #fff;
border: solid 3px rgba(255, 255, 51, 0.3);
width: 115%;
text-align: center;
margin-top: 75px;
position: absolute;
z-index: 1;
display: block;
}
.article-content{
box-sizing: border-box;
padding: 20px;
}
.littles-articles-category {
padding: 5px;
width: 200px;
margin: 0 auto 25px;
background-color: #FFCC33;
/* box-sizing: border-box;
width: 50%;
height: auto;
margin: 20px auto;
background-color: #FFCC33;
}
.littles-articles-category a
{
color: #000;
text-decoration: none;
padding: 24px;
font-weight: 700;
font-size: 1.1em;
text-transform: uppercase;*/
/* color: #424242;
outline: 0;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .1em;
display: block;
margin: 0 auto;
width: 17px;*/
}
/*BANNIERE*/
.banniere{
box-sizing: border-box;
}
.banniere-rose{
width: 100%;
height: 400px;
margin-top: 60px;
}
/*PAGINATION*/
.pagination{
box-sizing: border-box;
text-align: center;
margin: 70px 0;
display: block;
}
.pagination .prev{
box-sizing: border-box;
visibility: hidden;
transition: all .2s ease;
float: left;
color: #000;
font-size: 15px;
margin: 0;
text-decoration: none;
line-height: 1em;
font-weight: 600;
padding: .75em;
min-width: 1em;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
}
.pagination .next{
box-sizing: border-box;
transition: all .2s ease;
float: right;
font-size: 15px;
color: #000;
margin: 0;
text-decoration: none;
line-height: 1em;
font-weight: 600;
padding: .75em;
min-width: 1em;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
}
.pagination .next a{
box-sizing: border-box;
line-height: 1em;
padding: 0;
color: #000;
font-size: 15px;
margin: 0;
text-decoration: none;
min-width: 1em;
font-weight: 600;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
background: transparent;
}
.pagination ul{
box-sizing: border-box;
display: block;
background-color: #fff;
white-space: nowrap;
padding: 0;
border-radius: 3px;
margin: 1em 0;
font-weight: 600;
font-size: 18px;
}
.pagination li{
box-sizing: border-box;
padding: 0;
margin: 0;
display: inline-block;
overflow: hidden;
color: #000;
margin-right: 20px;
}
@media screen and (max-width: 992px){
.box-text-left
{
position: static;
}
.article-img-right
{
display: table-caption;
}
}