Wed. Sep 27th, 2023

[ANSWERED] html – CSS positioning problem flex-box grid with floating text

By

Nov 20, 2022 block, css, html, position

Solution 1 :

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;
}

Problem :

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><a href="Menu.html">Menu</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="https://grafikart.html">Grafikart</a></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;
}

Comments

Comment posted by fl0645

Hi, sorry i don’t speek english, i would like make with html/css the picture that i have linked here.

Comment posted by fl0645

sorry, i don’t ashieved the fixed goal, i would like make the block align and the text go arround the 200×200 images

Comment posted by Christian

There’s really a lot of stuff in your code blocks, please try to minimize html and css code to a bare minimum to explain your problem.

Comment posted by fl0645

Good evening, thank you for this work, correction, it is simpler as you have solved the problem. I would like to know how to stretch the aside aid which has the green background. Thanks again. to bottom: green aside bar

Comment posted by fl0645

Here is the example of the red zone overflow because the help aside should go to the end of the page

Comment posted by coder-coder.com/build-flexbox-website-layout

I wanted to show the floating text around the images. My example just used one container element in a page layout. You could simply rearrange stuff to remove the green part from it, make the rest smaller and isse a different layout using a sidebar, I recommend this read as a staring point:

Comment posted by stackoverflow.com/questions/31622459/…

Sidebar example:

By

Related Post

[ANSWERED] html – Child div has an offset border

Nov 20, 2022

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022