Problème CSS sur le forum Programmation - 18-06-2018 12:29:59

Liste des sujets

Problème CSS

Monekro

Niveau 13

18 juin 2018 à 12:29:59

Bonjour,

Je suis pas très à l'aise en web. Et j'aime pas le design.

Je voudrai faire un site web divisé en trois parties comme suit :
Avec en bleu la partie importante de mon site, en vert une partie moins importante, et en orange une carte.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Gestionnaire des baux</title>
    
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body class="dx-viewport">
      <main>
         <section id="proprietaire" >
            <div class="demo-container">
                <div id="gridContainerProprietaire" class="part1"></div>
            </div>
         </section>
         <section class="row" class="part2">
            <article id="gridContainerTerrain" class="column1"></article>
            <article class="column2"><div id="map"></div></article>
         </section>
       </main>
       <script src="map.js"></script>
   </body>
</html>

.part1 {
    height: 75vh;
    padding-left: 20px;
    padding-right: 20px;
    background-color: blue;
}
.column1 {
   float: left;
   width: 75vw;
   height: 25vh;
   background-color: green;
}
.column2 {
   float: left;
   width: 25vw;
   height: 25vh;
   background-color: coral;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
#map {
   height: inherit;
   width: inherit;
}

Comme ça c'est parfait, seulement, dès que j'ajoute des composants, ça déplace la partie orange en bas... Je ne comprends pas du tout pourquoi. Si on organise des trucs en CSS et que ça modifie tout dès qu'on ajoute des données, je ne comprends pas l'utilité du CSS...

Obtenu (que ça vire les couleurs d'arrière-plan c'est pas grave, c'est pour tester) :

Quelqu'un a une solution (de préférence simple) pour faire une interface simple, juste un truc divisé en trois parties. J'ai fais tous les trucs en lien avec la partie bleue, sans avoir de problème visuel. Et j'obtenais bien le résultat attendu :

Merci d'avance à m'aider à comprendre mon problème.

darkepsylon

Niveau 10

18 juin 2018 à 14:11:35

Si tu veux pas te faire chier utilise bootstrap.
Sinon tu peux faire ça simplement avec les balise table tr td en html

darkepsylon

Niveau 10

18 juin 2018 à 14:12:05

Je suis sur téléphone du coup je peux pas te donner d'exemple pour le moment : s

Monekro

Niveau 13

18 juin 2018 à 15:41:19

J'avais oublié la méthode avec les table. Ça m'a l'air d'être le plus simple. J'avais lu sur un forum d'utiliser ça : .row:after { content: ""; display: table; clear: both; }

Je comprends pas l'intérêt, pourquoi ne pas simplement utiliser une <table> ?

Quel est l'avantage d'utiliser Bootstrap pour ce genre de choses ? (J'ai jamais utilisé bootstrap).

Je suis sur téléphone du coup je peux pas te donner d'exemple pour le moment

Je suis pas pressé, je compte continuer le projet dans une semaine ou deux.

Merci beaucoup en tout cas.

20_cent_2017

Niveau 10

18 juin 2018 à 18:32:09

Utilise flex

fanof_banni

Niveau 12

18 juin 2018 à 23:58:14

Le 18 juin 2018 à 15:41:19 Monekro a écrit :
Quel est l'avantage d'utiliser Bootstrap pour ce genre de choses ? (J'ai jamais utilisé bootstrap).

Bootstrap ça sert à faire du style rapidement et simplement.
C'est du css pré-maché que t'applique en attribuant différentes classes aux élément de ta page.
Tu fais un tableau, tu rajoutes les classes "table" et "table-hover" et hop t'as tout de suite un tableau mis en forme dont les lignes sont foncées au survol du curseur.
Evidemment en terme de style ça reste très limité et générique.

Le point le plus intéressant de Bootstrap c'est le système de grille.
Une grille bootstrap fait 12 colonnes, et l'ont peut pour chaque élément de la page indiquer sa taille (entre 1 et 12 colomnes) via des classes.
Il est possible d'appliquer plusieurs classe de taille pour que l'élément s'adapte à la taille du navigateur.


<div class="col-lg-3 col-md-6"></div>

Cette div fera 3 colomnes (25%) de large sur un navigateur de 992px de large et plus.
6 colomnes (50%) sur un navigateur de 768px+.
Et 12 colomnes (100%) sur un navigateur inférieur à 768px.

Si tu souhaites que ton site soit consultable sur mobile, tu dois le rendre "responsive", c'est à dire faire varier la taille/la position des éléments pour qu'ils restent lisibles même sur une plus petite surface d'affichage.

C'est possible de faire de la mise en forme en foutant tout son contenu dans des tables, c'est comme ça qu'on faisait avant la démocratisation du css, mais c'est une mauvaise pratique, des outils comme bootstrap, flex ou grid sont là pour ça.

Use et abuse des outils d'inspection de ton navigateur, ils permettent de voir facilement l'espace occupé par chaque élément, les margin, padding et border appliqués... (préférence personnelle pour chrome sur ce point)
Pour rappel, un navigateur applique un style de base (et ce style varie d'un navigateur à l'autre), ce n'est pas parce que tu n'as pas appliqué de margin sur un élément qu'il n'y en a pas.

dark_drow

Niveau 15

20 juin 2018 à 16:04:01

Oui euh oublie les tables, c'est pour les sites des années 2000 (et encore).
Les tableaux sont relativement merdique en html.
Utilise flex ou bootstrap avec les grilles.

Perso j'ai commencé le CSS avec flex et ce tutoriel, http://flexboxfroggy.com/#fr et vraiment ça m'a énormément aidé. Maintenant je passe doucement sur Bootstrap après environ 1an et demi de CSS sans framework

Monekro

Niveau 13

06 juillet 2018 à 00:09:01

Merci à tous pour votre aide.

J'ai regardé le site proposé par dark_drow, et je suis tombé sur un truc similaire : http://cssgridgarden.com/#fr
Du coup j'ai fais tous leurs tutos, et je l'ai mis en place sur mon site. Et ça marche quand il n'y a pas de données.

Le problème, c'est que je ne veux pas avoir à scroller pour descendre sur la page. Je veux qu'on utilise le truc pour scroller dans le div, fourni par le script tiers que j'utilise. Donc je suis obligé d'utiliser 75vh / 25 vh dans le css pour bloquer la taille de l'écran (je ferai peut-être du responsive plus tard, pas sûr). Je suppose que je serai obligé de faire la même chose avec une flexbox... ? Si j'ajoute des bordures ou des margin, il y a aussi forcément les scrolls qui apparaissent sur le bas et la droite...

Aide à l'achat Mac
Macintosh
Création de Jeux
Programmation
Création de sites web
Linux
Internet
Steam Deck
Hardware

La vidéo du moment

News culture

50 664 spectateurs

Réunis une 7ème fois, Spielberg et Scorsese viennent d'adapter une oeuvre culte en série sur Apple TV

Scorsese et Spielberg redonnent vie à une œuvre culte sur Apple TV

Toutes les news culture