Related
Here's my problem if I don't use a <br> after <hr> my image goes away like this:
So I added the <br>, and now I have this result:
I used some margin to reduce the size of the blank space, but I'd like to be close such as this result I designed:
Here's my HTML code:
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
display: grid;
grid-template-columns: 190px auto;
flex-direction: column;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin-top: -10px;
width: 480%;
opacity: 12%;
}
<img src="images/vanguard.jpeg" alt="Article GTA " class="center">
<div>
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<br>
<img src="images/marvel.jpg" alt="Article GTA " class="center">
<div>
<p1>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p1>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
Thanks in advance for your help !
One approach is as follows, though bear in mind I've taken the liberty of replacing the non-standard HTML elements, <p1> and <p2>, replacing them with the valid <p> element:
/* a simple reset, in order to ensure all elements have
the same defaults: */
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
/* we're using CSS flex-box layout: */
display: flex;
/* we want the content to wrap, as the <img> and
<div>, containing the text, are visually adjacent,
but we want the content to appear in a vertical
orientation: */
flex-wrap: wrap;
width: 90vw;
margin: 0 auto;
/* defining a visual separation between elements: */
gap: 1em;
}
.wrapper img {
/* defining the width of the <img> element: */
width: 200px;
/* along with setting that <img> to fully-cover
its available dimension in the layout: */
object-fit: cover;
}
/* defining styles for <img> elements that aren't
successfully loaded */
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
/* here we style the <div> elements that follow the <img>
elements: */
.wrapper img + div {
/* we set the <div> to allow it to grow to occupy space available: */
flex-grow: 1;
/* we set the flex-basis to 50% in order that, when the element
occupies 50% of the available space, the layout shifts to
occupy two rows, with the <img> above the <div>: */
flex-basis: 50%;
}
hr.solid {
/* the <hr> is a flex-item, and here we use the flex
shorthand to set the flex-grow, flex-shrink and
flex-basis properties, to allow it to grow, not allow
it to shrink and set its width as 100%: */
flex: 1 0 100%;
height: 3px;
background-color: currentColor;
}
/* assuming that you don't want a trailing <hr> element at the
end of the list of articles; if you do this can be removed: */
hr:last-child {
display: none;
}
<!-- the following '.wrapper' element is added to contain the list of elements you're
showing, though if no parent element exists the CSS could be applied to the <body>
element instead: -->
<div class="wrapper">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<div>
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<div>
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
</div>
This is easier to layout, though, if you wrap the <img> element inside the <div> with the text content and then use CSS grid to style that <div>:
/* simple reset: */
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
/* because related elements - the <img> and the text - are
all contained within the same descendant element, we can
use flex-direction to force the content into a vertical
orientation: */
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
/* I applied a class-name to easily access and style the <div>
elements that contain the content: */
div.card {
/* here we use CSS grid layout, which allows for a two-
dimensional layout of the contents: */
display: grid;
/* defining the vertical, and horizontal, gaps between
adjacent tracks (columns/rows): */
gap: 0.5em 1em;
/* defining the named grid areas, here we define three
rows of content, each row with two named columns: */
grid-template-areas:
"img title"
"img content"
"img release-date";
/* we then define the widths of those columns; the first
named 'img' is 200px wide, and the second is as wide
as possible to occupy the remaining space once the
width of the 'img' column is removed: */
grid-template-columns: 200px 1fr;
}
.wrapper img {
/* we specified already that the 'img' area is 200px in
width; here specify that the <img> should fill the
available space (without distorting the aspect-ratio): */
object-fit: cover;
/* we place the <img> element in the 'img' area of the
containing grid: */
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
hr.solid {
height: 3px;
background-color: currentColor;
}
hr.solid:last-child {
display: none;
}
<div class="wrapper">
<!-- applying a somewhat meaningful class-name to the <div> element(s) which
contain the content: -->
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
</div>
Of course, the above can be further simplified by removing the <hr> elements, and instead using CSS generated content to create the separators:
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
/* a grid-item will only occupy one track (row/column) by
default, so here we add a two-column grid-area named 'hr'
for the psuedo-<hr> to occupy: */
"hr hr";
grid-template-columns: 200px 1fr;
}
/* we use the ::after pseudo-element to create the visual line: */
div.card::after {
background-color: currentColor;
/* for a pseudo-element to be rendered the content, even if
only an empty string, must be set: */
content: '';
/* we place the element - rendered as a grid-item - into the
'hr' grid-area: */
grid-area: hr;
height: 3px;
/* we add a margin-top to adjust the spacing of the pseudo-
element, so it's visually centred between the adjacent cards: */
margin-top: 0.5em;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
</div>
Assuming that you don't want the trailing pseudo-element to create a line at the end of the content a further refinement can be used; here we use the :not() negation operator to refine the selector so that we select all ::after pseudo-elements of all div.card elements that are not the :last-child of their parent:
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
"hr hr";
grid-template-columns: 200px 1fr;
}
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
</div>
I'd also, in closing, recommend that you use more semantic means to wrap the text-content; it looks like you have content such as a title, article text and a release date? If so, I'd personally – and this is highly subjective – update the HTML to the following:
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
"hr hr";
grid-template-columns: 200px 1fr;
}
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
.card h2.title {
color: #050;
font-size: 1.2rem;
font-weight: bold;
}
/* here we select all ::before pseudo-elements of
all <time> elements that have a 'data-prefix'
custom attribute: */
time[data-prefix]::before {
/* setting the content to be equal to the value of
the 'data-prefix' attribute, using the attr()
function, and adding a string to follow that
attribute-value: */
content: attr(data-prefix) ': ';
font-weight: bold;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<!-- a page should have a <h1> element to title the page or document; here I use a
<h2> element (though any other type of heading element could be used) as it's
hierarchically/semantically less important than the page-title; if the cards
appear in a section that itself has a heading, this element should be titled
with a lower-significance heading, <h3>, <h4>... -->
<h2 class="title">CALL OF DUTY : VANGUARD : Est-il bon ?</h2>
<p>Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<!-- in order to make the date of release (arguably) accessible to user-agents that
can parse such information I chose to use a <time> element with the datatime
attribute set to the referenced date: -->
<time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<h2 class="title">MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</h2>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time>
</div>
</div>
References:
CSS:
Adjacent-sibling combinator (+).
attr().
content.
display.
flex (shorthand).
:last-child.
:not().
object-fit.
Pseudo-elements.
HTML:
<time>.
<h2>.
Bibliography:
"Basic concepts of flexbox."
"CSS Grid Layout."
"<h1>–<h6>: The HTML Section Heading Elements."
You should always post working code. At the very least I assume you forgot to add the <div class="articleactu">.
Also p1 and p2 are not valid HTML elements. If you want to style them differently, use a valid element (such as p) and classes.
Your problem is that you forgot that the <hr> elements also are included in the grid.
The elements inside the grid, are distributed (by default) from the top left, row by row. Without the <br> something like this:
+-------+-------+
| img | div |
+-------+-------+
| hr | img |
+-------+-------+
| div | |
+-------+-------+
By adding the <br> you are adding an element that is then placed into the second column:
+-------+-------+
| img | div |
+-------+-------+
| hr | br |
+-------+-------+
| img | div |
+-------+-------+
However now the <hr> only covers the first column which you try to compensate with the width.
Instead you need to tell the hr, to cover two columns like this:
+-------+-------+
| img | div |
+-------+-------+
| hr |
+-------+-------+
| img | div |
+-------+-------+
This can be done, for example with the grid-columns property and the span keyword:
hr.solid {
grid-column: span 2;
with: 100%
opacity: 12%;
}
The width is needed, because as a grid element the <hr> looses it default width. Also remove the negative margin.
The large gap around the <hr> is due to grid-gap: 36px with applies to vertical and horizontal gaps. To reduce the distance around the <hr>, set a separate value for the horizontal gaps:
grid-gap: 0 36px;
For a complete example look at https://jsfiddle.net/3qywz8e7/1/
BTW, you should learn to use the developer tools of your browser. They have tools built in to help you visualize the grid. For example in Chrome: https://developer.chrome.com/docs/devtools/css/grid/
Here is a flexbox sample of your code and need some change, good luck.
.flex-container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 100%;
padding: 15px;
gap: 5px;
}
.flex-container > div{
border-radius: 5px;
padding: 8px;
}
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin : 10px auto 10px auto;
width: 100%;
opacity: 12%;
}
<div class="flex-container">
<div>
<img src="https://via.placeholder.com/250" alt="Article GTA " class="center">
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<div>
<img src="https://via.placeholder.com/250" alt="Article GTA " class="center">
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
</div>
I try to have an aside, but i don't get an issue for the nav menu and the aside. The text would be around the float:left for the200x200 images. I would like to position well done like the image is. Can't float:left and grid-columns coexist together ?
The expected version
The actual code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html"/>
<title>Ma page</title>
<meta name="author" content="Erwan Dupeux-Maire" />
<meta name="keywords" content="html, xhtml, conception, creation de site web, realisation de site web, formation, cours" />
<meta name="description" content="Support du cours de conception et réalisation de sites Web en XHTML" />
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="header">
<nav class="nav">
<ul class="ul">
<li ><a class="accueil" href="index.html">Accueil</a></li>
<li>Menu</li>
<li>Contact</li>
<li>Grafikart</li>
</ul>
<h1 class="title">Restaurant le Fiasco</h1>
<img class="baniere" src="https://via.placeholder.com/1200x600" alt="banière restaurant le fiasco"/>
<div class="fondu"></div>
<div class="fondu2"></div>
</nav>
<div class="MonTitre">
<h2>Mon Titre</h2>
<p>Buzz Aldrin, né Edwin Eugene Aldrin Jr. le 20 janvier 1930 à Glen Ridge dans le New Jersey, est un militaire, pilote d'essai, astronaute et ingénieur américain. Il effectue trois sorties dans l'espace en tant que pilote de la mission Gemini 12 de 1966 et, en tant que pilote du module lunaire Apollo de la mission Apollo 11 de 1969, il est, avec le commandant de la mission Neil Armstrong, parmi les deux premiers humains à marcher sur la Lune.</p>
</div>
</header>
<div class="section1">
<h2 class="title_2">
A propos du restaurant
</h2>
<img class="200_1" src="https://via.placeholder.com/200x200" alt="200x200"/>
<img class="200_2" src="https://via.placeholder.com/200x200" alt="200x200"/>
<p class="paragraphe_arround">
Terminologie
Selon le dictionnaire de langue française le Larousse1 ainsi que l'Office québécois de la langue française2 (mais inconnu du Centre national de ressources textuelles et lexicales3), le terme « développeur » s'applique en informatique à une personne ou une société qui développe et conçoit des logiciels. Cependant, s'agissant d'une ...
</p>
</div>
<section class="aside">
<img class="aside-img-200x400" src="https://via.placeholder.com/200x400" alt="200x200"/>
</section>
</body>
</html>
body{
background-color: lightgrey;
}
.ul{
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: wrap;
flex-shrink: 0;
flex-grow: 1;
flex-basis: auto;
justify-content: space-evenly;
align-items: end;
padding: 3px 20px 3px 20px;
background-color: rgba(117, 190, 218, 0.5);
}
ul li a{
width: 200px;
text-decoration: none;
color: white;
background-color: rgba(117, 190, 218, 0.2);
font-family: "Agency FB", sans-serif;
font-size: xx-large;
}
ul li a:hover{
background-color: black;
transition-delay: 300ms;
transition-property: background-color;
}
ul{
margin-left: 400px;
z-index: 5;
}
.baniere{
/*position: absolute;
top: 0;
left:0;
right:0;*/
z-index: -1;
width: 100%;
height: auto;
}
.title{
position: relative;
top: -40px;
padding: 10px;
margin: 0 0 0 10px;
font-size: 80px;
width: 400px;
height: 170px;
border-radius: 20px;
z-index: 6;
background-color: rgba(117, 190, 218, 0.5);
}
.fondu{
display: block;
position: absolute;
top:0;
left:0;
width:100%;
height:366px;
z-index: 2;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(255,255, 255,0.3));
}
.fondu2{
display: block;
position: absolute;
top:366px;
left:0;
width:100%;
height:366px;
z-index: 2;
background-image: linear-gradient(to bottom, rgba(255,255, 255,0.3), rgba(0,0,0,0.8));
}
.ul{
position: relative;
left: 200px;
}
.MonTitre{
/*width: 100%;
position: absolute;
top: 600px;
left: 20px;*/
color: aqua;
z-index: 3;
}
/*.section1{
position: relative;
top: 500px;
left: 20px;
}
*/
div .section1{
margin: 500px 10px 10px 20px;
display: grid;
grid-template-columns: 200px 200px calc(100% - 600px) 200px;
grid-gap: 10px;
padding: 10px;
}
.paragraphe_arround{
width: calc(100% - 200px);
/*float: left;*/
}
.aside{
/*position: absolute;
top: 700px;
right: 10px;*//
position: relative;
top: -200px;
right: 0px;
float: right;
}
The example below produces the following result:
Maybe something like this, it is combination of what I found on Stackoverflow about floating text around flexbox items and an example I could find on https://www.sitepoint.com/css-layouts-floats-flexbox-grid/ (within the abstract called 'Enhancing Grid Templates').
As far as I understand this, the images are now floating elements within the first grid item and the text will just float around the 2nd item. The aside just gets the display flex attribute.
<!DOCTYPE html>
<html lang="fr">
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="header"></header>
<div class="section1">
<div class="container">
<div class="inner-container">
<h2 class="title_2">
A propos du restaurant
</h2>
<img class="200_1" src="https://via.placeholder.com/200x200" alt="200x200"/>
<img class="200_2" src="https://via.placeholder.com/200x200" alt="200x200"/>
<p class="paragraphe_arround">
Terminologie
Selon le dictionnaire de langue française le Larousse1 ainsi que l'Office québécois de la langue française2 (mais inconnu du Centre national de ressources textuelles et lexicales3), le terme « développeur » s'applique en informatique à une personne ou une société qui développe et conçoit des logiciels. Cependant, s'agissant d'une personne, il est possible de distinguer les développeurs par secteurs d'activités, ceux spécialisés dans le métier du logiciel, ou ceux spécifiquement spécialisés dans les métiers de l'Internet4, et du secteur des technologies de l'information et de la communication (TIC) qui compte à lui seul les deux tiers des activités de développeurs sectoriel :
Le développeur informatique (Web), développeur web 5,6 responsable des codes sources constituant les différents langages de programmation Web, composées entre autres des langages de balisage tel que le HTML, le CSS ou le XML, des langages interprétés notamment composé des langages PHP Hypertext Preprocessor, ASP Active Server Pages, Pascal, Perl ou encore du JavaScript, ou des langages à objet (POO) composée entre autres de C++, de Java, de Ruby, ou de Python.
Le développeur multimédia, designer graphique, chargée des graphismes (le WebArt, Web design), ou de l'encapsulation dynamique audio/vidéo.
Le développeur logiciel ou concepteur de logiciel, chargé de construire pour une entité ou pour une finalité un programme spécifique tel que les applications mobiles pour les environnement nomades, logiciels sur des systèmes embarqués ou la Domotique.
[réf. nécessaire]
Dans la langue française, il n'y a pas de mot spécifique aujourd'hui pour parler d'un auteur de logiciel, le terme de développeur sectoriel s'est progressivement imposé.
Contrairement à logiciel, qui a fait son apparition en 1972 pour traduire software, et qui cohabite encore avec « programme informatique », développeur remplace dans le langage courant l'expression « programmeur informatique »[réf. nécessaire].
</p>
</div>
<section class="aside">
<img class="aside-img-200x400" src="https://via.placeholder.com/200x400" alt="200x200"/>
</section>
</div>
</div>
</body>
</html>
div.section1 {
width: 100%;
display: grid;
grid-gap: 10px;
grid-template-columns: auto auto auto;
}
img {
float: left;
margin-right: 1em;
}
.container {
background: red;
position:relative;
float:left;
}
.inner-container {
width:80%;
min-height: 400px;
background:yellow;
float:left;
}
.aside{
background:green;
display: flex;
}
I have this code, and I would like to have the aside with 100% height. I have already set the height of the aside, body and section to 100%, but it does not work. Do you know how to do it? Is there any other way to do it? Thanks
#font-face {
font-family: 'kinder';
src: url('kindergarten.ttf');
}
/* Eléments principaux de la page */
body {
background: url('back.jpg');
font-family: 'kinder', Arial, sans-serif;
color: #181818;
}
#bloc_page {
width: 100%;
margin: auto;
}
/* Header */
header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
#titre {
display: flex;
flex-direction: row;
align-items: flex-end;
}
#titre div {
position: absolute;
right: 40px;
top: 25px;
}
/* Body */
aside {
width: 5%;
background: url(ban.jpg);
border-radius: 4px;
}
section {
display: flex;
}
<body>
<div id="bloc_page">
<header>
<div id="titre">
<h1>Jules Raymond</h1>
<div>
<img src="moi_mini.jpg" alt="Une photo de Jules Raymond" title="Cliquez pour agrandir" />
</div>
</div>
<h3>Etudiant à l'université de Californie-Berkeley</h3>
</header>
<section>
<aside>
</aside>
<article id="experience">
<h3>Mon expérience</h3>
<ul>
<li>De 1992 à 2004: naissance et école primaire</li>
<li>De 2004 à 2010: école secondaire (high scool)</li>
<li>De 2010 jusqu'à présent: étudiant universitaire</li>
</ul>
<article>
<article id="competences">
<h3>Mes compétances</h3>
<ol>
<li>HTML & CSS (en procès)</li>
<li>PHP & MySql (avancé)</li>
<li>C (expert)</li>
</ol>
</article>
<article id="formation">
<h3>Ma formation</h3>
<ul>
<li>J'ai appris sur OpenClassroom.</li>
<li>J'ai posé mes questions sur StackOverFlow.</li>
</ul>
</article>
</section>
</div>
</body>
use this below css code with "max-height:100%;"
<style type="text/css">
#font-face {
font-family: 'kinder';
src: url('kindergarten.ttf');
}
/* Eléments principaux de la page */
body
{
background: url('back.jpg');
font-family: 'kinder', Arial, sans-serif;
color: #181818;
}
#bloc_page
{
width: 100%;
margin: auto;
}
/* Header */
header
{
display: flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
#titre
{
display:flex;
flex-direction:row;
align-items:flex-end;
}
#titre div
{
position:absolute;
right: 40px;
top: 25px;
}
/* Body */
aside
{
width: 5%;
max-height:100%;
background: url(ban.jpg);
border-radius: 4px;
word-wrap:break-word;
border:1px solid red;
}
section
{
display:flex;
}
</style>
<body>
<div id="bloc_page">
<header>
<div id="titre">
<h1>Jules Raymond</h1>
<div>
<img src="moi_mini.jpg" alt="Une photo de Jules Raymond" title="Cliquez pour agrandir" />
</div>
</div>
<h3>Etudiant à l'université de Californie-Berkeley</h3>
</header>
<section>
<aside>this is testing</aside>
<article id="experience">
<h3>Mon expérience</h3>
<ul>
<li>De 1992 à 2004: naissance et école primaire</li>
<li>De 2004 à 2010: école secondaire (high scool)</li>
<li>De 2010 jusqu'à présent: étudiant universitaire</li>
</ul>
<article>
<article id="competences">
<h3>Mes compétances</h3>
<ol>
<li>HTML & CSS (en procès)</li>
<li>PHP & MySql (avancé)</li>
<li>C (expert)</li>
</ol>
</article>
<article id="formation">
<h3>Ma formation</h3>
<ul>
<li>J'ai appris sur OpenClassroom.</li>
<li>J'ai posé mes questions sur StackOverFlow.</li>
</ul>
</article>
</section>
</div>
</body>
Set the position of your aside tag to absolute, then change the height and the width to whatever you want or need. (note i made the background red to make it clear that the height changed)
jsfiddle,net/thpgq299
I want to add links for every box but whenever I try to add an "a" tag it messes everything up. What am I missing :-/ ? I have tried a lot of stuff and still can't figure out what wrong. Would appreciate your help.
Thanks
This is how it is supposed to look
http://oi66.tinypic.com/iykcc5.jpg
https://jsfiddle.net/983wga5c/7/
HTML
<div class="fwsmain">
<div class="fwsside side-text"><span>Tinutul Neamtului</span><p class="text">Pentru cei care au fost prima data, tinutul Neamtului a devenit locul in care te intorci cu bucurie. Platoul cu preparate moldovenesti de la Hanul Ancutei, drumetiile pe Ceahlau, fotografiile de la Barajul Bicaz, viata de noapte din Piatra Neamt, zimbrii, cetatea Neamtului, manastiri din top 10 din Romania, Muzeul de masti de la Tincabesti sau casa memoriala a lui Creanga, sunt doar cateva dintre atractiile memorabile din aceasta zona. Si ai cel putin cinci evenimente de traditie pe care nu trebuie sa le ratezi.</p></div>
<div class="fwsside">
<div class="fwsside-flex1">
<div class="fwsitem"><div class="hoverbg"><span>Case memoriale</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Turnul lui Ștefan</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Orașul de sus</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Hai la ski</span></div></div>
<div class="fwsitem fullw"><div class="hoverbg"><span>Trebuie să vezi</span></div></div>
</div></div>
</div>
CSS
.fwsmain{
width: 100%;
display: flex;
flex-wrap: wrap;}
.fwsside {
height: 100%;
width: 50%;}
.side-text{
margin:auto;
padding:0 20px;}
.fwsside-flex1{
height: 100%;
width: 100%;
display:flex;
flex-shrink:1;
flex-grow:1;
flex-wrap:wrap;}
.fwsside-flex1 .fwsitem {
width:50%;
text-align: center;
background-size:cover;
}
.fullw{
width:100% !important;}
.hoverbg:hover {
background:rgba(0, 0, 0, 0.6);
}
.fwsside-flex1 .fwsitem:nth-child(1) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/calistrat-hogas.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(2) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/clopotnita-turn-pnt.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(3) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/telegondola.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(4) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/ski.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(5) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/cucuteni.jpg');
}
.fwsside-flex1 span {
line-height:33.3vh;
margin:auto;
font-size: 33px;
font-weight: bold;
color: #fff;}
It looks like you have to move your class="fwsitem" to your newly added <a> tags because they are now your flexbox container's (.fwsside-flex1) children.
Here is a updated fiddle.
I've run into a bit of a problem while playing around with a flexbox inside an absolute box, which is inside a defined height div (I'll explain along the way).
First off, here's a fiddle to my demo, might be easier to grasp the problem:
https://jsfiddle.net/8ub9tyub/
As you can see, when you hover the block, text appears from below but doesn't quite show fully.
I have a main div (let's call it $main) for the hover part which is 600x250px with an overflow: hidden, and inside it, two divs: title and text (say $title and $text), which appear after one another (regular flow).
$title can sometimes take up two lines, so its height is set to auto.
$text is set to 100% height, positioned in relative and set to display: flex. Inside that is another div ($intro) I positioned in absolute, with a top: 100% (which switches to 0 when hovered) and a align-self: flex-end in order to keep it at the bottom of $main. (this is to keep the text from being stuck to the title - I like it to breathe)
The structure goes like this, basically:
<div class="main">
<div class="title">I'm a title!</div>
<div class="text">
<div class="intro"><p>Just a bunch of long paragraphs of text</p></div>
</div>
</div>
Now, as you can see on my demo, $text's height is set to 100%, but I expected the height to be $main minus $title's heights, but here it seems to be just $main's height, which makes the $text block overflow, and so when I hover the block to make the text appear, it locks the bottom outside $main and cuts off part of the text.
Would anyone have a clue has to how I can make $text have the expected height, knowing I can't predict $title's height (and thus can't use calc(), at least as for as I know) and I don't want to use JavaScript in any way?
I've gone through and reworked the code without using any heights for the block text or the title text and only using Flex. If you use display: flex; only on the container that will contain the flexible items within it, then tell each item how to be flexible (ie. flex-grow: 1;), you'll get the result you're looking for. Here's a link to a fiddle I put together using your initial code and just reworking the code. Let me know if you have any questions or need clarification on anything.
body {
font-family: 'Bitter', Georgia, serif;
width: 673px;
}
a { color: #161616; text-decoration: none; }
* { box-sizing: border-box; }
.home_post_new * { transition: .5s all; }
.home_post_new {
background-position: right center;
background-repeat: no-repeat;
width: 100%;
height: 250px;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.home_post_new_text {
float: right;
display: flex;
flex-direction: column;
width: 600px;
height: 100%;
background: hsla(0,0%,100%,0);
color: #fff;
position: relative;
}
.home_post_new:hover .home_post_new_text {
background: hsla(0,0%,0%,.33);
}
.home_post_new_block {
flex-grow: 2;
position: relative;
top: 250px;
width: 100%;
padding: 16px 16px 32px;
font-size: .9em;
line-height: 125%;
text-shadow: 0 1px 0 hsla(0,0%,0%,.75), 0 0 5px hsla(0,0%,0%,.75);
}
.home_post_new:hover .home_post_new_block {
top: 0;
}
.home_post_new_title {
flex-grow: 1;
font-family: 'Source Sans Pro', Arial, sans-serif;
font-size: 1.625em;
line-height: 1.333em;
width: 100%;
padding: 4px 8px 16px;
text-shadow: 0 1px 0 hsla(0,0%,0%,.75), 0 0 1px hsla(0,0%,0%,.75), 0 1px 5px hsla(0,0%,0%,.75);
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
}
.home_post_new_more {
position: absolute;
right: 0;
bottom: -50%;
padding: 4px 8px;
font-family: 'Source Sans Pro', Arial, sans-serif;
color: #fff;
text-shadow: 0 1px 0 hsla(0,0%,0%,.75), 0 0 5px hsla(0,0%,0%,.75);
border-style: solid;
border-width: 1px 0 0 1px;
border-color: currentColor;
border-radius: 0;
border-top-left-radius: 2px;
text-transform: uppercase;
letter-spacing: 1px;
background: hsla(0,0%,0%, .5);
}
.home_post_new_more:hover {
color: #009884;
cursor: pointer;
}
.home_post_new:hover .home_post_new_more {
bottom: 0;
}
.home_post_new_meta {
width: calc(100% - 600px);
height: 100%;
text-align: center;
color: #009884;
}
.home_post_new_date {
background: #009884;
color: #eee;
padding: 24px 0 0;
height: 50%;
}
.home_post_new_date_day {
font-size: 250%;
font-weight: bold;
}
.home_post_new_date_month {
font-family: 'Source Sans Pro', Arial, sans-serif;
text-transform: uppercase;
font-size: 150%;
border-top: 1px solid #eee;
display: inline-block;
margin-top: 8px;
padding-top: 4px;
}
.home_post_new_date_comments {
color: currentColor;
display: inline-block;
border-radius: 50%;
border-bottom-right-radius: 0;
width: 42px;
height: 42px;
margin-top: 32px;
padding: 12px 4px;
border: 1px solid currentColor;
margin-top: calc(50% - 4px);
}
.home_post_new_text:after {
clear: both;
overflow: auto;
zoom: 1;
}
<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2014/11/fetch_ifl.jpg);">
<a class="home_post_new_text" href="#">
<div class="home_post_new_title">[Test] inFAMOUS : First Light</div>
<div class="home_post_new_block">
<p>Après les aventures de Delsin, voici inFAMOUS : First Light, qui propose de jouer dans la peau d’un personnage secondaire de Second Son : Fetch. Une aventure qui est, à l’instar de Festival of Blood pour inFAMOUS 2, une extension ne nécessitant pas le jeu de base. Même ville, différents pouvoirs (enfin, pas vraiment), nouvelle histoire et un mode de jeu en plus… De quoi s’amuser un peu ! Mais qu’est-ce que ça vaut ? Voyons cela.</p>
</div>
</a>
<div class="home_post_new_more">Lire la suite →</div>
<div class="home_post_new_meta">
<div class="home_post_new_date" title="30 novembre 2014">
<div class="home_post_new_date_day">30</div>
<div class="home_post_new_date_month">NOV</div>
</div>
2
</div>
</div>
<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2014/11/monumentvalley.jpg);">
<a class="home_post_new_text" href="#">
<div class="home_post_new_title">[Test] Monument Valley</div>
<div class="home_post_new_block">
<p>Profitant d’un crédit de 3€ offert par Amazon sur leur App Shop, je me suis laissé tenter par Monument Valley, ayant entendu du bien du jeu et étant assez intrigué son style. Au pire, je ne perdais rien dans l’affaire… Après plusieurs courtes séances, j’ai terminé le jeu et j’ai donc pu forger un avis assez complet dessus, malgré le fait que Monument Valley soit un « petit jeu », mais il ne faut pas négliger son ambition et potentiel pour autant. </p>
</div>
</a>
<div class="home_post_new_more">Lire la suite →</div>
<div class="home_post_new_meta">
<div class="home_post_new_date" title="28 octobre 2014">
<div class="home_post_new_date_day">17</div>
<div class="home_post_new_date_month">NOV</div>
</div>
37
</div>
</div>
<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2014/11/interstellar.jpg);">
<a class="home_post_new_text" href="#">
<div class="home_post_new_title">[Séance ciné] Interstellar</div>
<div class="home_post_new_block">
<p>Alors comme ça le prochain long-métrage de Christopher Nolan est sorti ? La science-fiction, c’est mon truc, ça ! Je me suis évité tout spoiler possible sur ce film, cette critique en fera autant. J’ai eu le plaisir de voir Interstellar en IMAX, ma première séance dans ce format d’ailleurs, ce qui ne m’a pas déçu. Bon allez, on va voir tout ça, 3… 2… 1… décollage !</p>
</div>
</a>
<div class="home_post_new_more">Lire la suite →</div>
<div class="home_post_new_meta">
<div class="home_post_new_date" title="28 octobre 2014">
<div class="home_post_new_date_day">11</div>
<div class="home_post_new_date_month">NOV</div>
</div>
37
</div>
</div>
<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2014/11/johnwick.jpg);">
<a class="home_post_new_text" href="#">
<div class="home_post_new_title">[Séance ciné] John Wick</div>
<div class="home_post_new_block">
<p>Encore un film qui est sorti de nulle part pour moi, John Wick a attiré mon attention, notamment grâce à la présence de l’immortel Keanu Reeves sur l’affiche. Malgré la minuscule salle (vous savez, celle pour 40 personnes qu’on paie aussi cher que les énormes salles…), j’ai bien pu me mettre dans le film. Chargez vos fusils, on va voir ce que ça donne.</p>
</div>
</a>
<div class="home_post_new_more">Lire la suite →</div>
<div class="home_post_new_meta">
<div class="home_post_new_date" title="28 octobre 2014">
<div class="home_post_new_date_day">28</div>
<div class="home_post_new_date_month">OCT</div>
</div>
37
</div>
</div>
<div class="home_post_new" style="background-image: url(http://geekometric.com/wp-content/uploads/2013/12/tlou_goodies.jpg);">
<a class="home_post_new_text" href="#">
<div class="home_post_new_title">[Avis de passage] Goodies The Last of Us : Press Kit, figurine…</div>
<div class="home_post_new_block">
<p>Bon, c'est un arrivage qui date un peu, mais je tenais à vous présenter quelques goodies tirés de The Last of Us, non seulement parce que j'adore ce jeu mais parce que ces chouettes objets sont plutôt réussis, et étant donné qu'ils ne sont vus que par mes petits yeux, pourquoi ne pas vous en faire profiter un peu également ? Et ce n'est certainement pas un moyen de faire du contenu en attendant que je fasse mes tests de jeux PS4, je vous assure ! Bon j'ai pris un paquet de photos, c'est cadeau.</p>
</div>
</a>
<div class="home_post_new_more">Lire la suite →</div>
<div class="home_post_new_meta">
<div class="home_post_new_date" title="28 octobre 2014">
<div class="home_post_new_date_day">28</div>
<div class="home_post_new_date_month">OCT</div>
</div>
3
</div>
</div>
So let me get this straight you have:
<div class='main'>
<div class='title'>
<div class='text'></div>
</div>
</div>
And setting the height of div text to 100% sets it to the height of main even though it's inside div title. I think the problem might be that you did not specify the height of .title in your CSS. If you do not specify the height of the title div, then the text division will take on the height of the main div.
Again, just a guess but check for that.