CONNEXION
  • RetourJeux
    • Tests
    • Soluces
    • Previews
    • Sorties
    • Hit Parade
    • Les + attendus
    • Tous les Jeux
  • RetourActu
    • Culture Geek
    • Astuces
    • Réalité Virtuelle
    • Rétrogaming
    • Toutes les actus
  • RetourHigh-Tech
    • Actus JVTECH
    • Bons plans
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTECH
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch
    • Xbox Series
    • Overwatch 2
    • FUT 23
    • League of Legends
    • Genshin Impact
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • PS4
  • One
  • Switch
  • Wii U
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Etoile Abonnement RSS

Sujet résolu : Je suis coincé, je ne sais pas comment faire

DébutPage précedente
1
Page suivantePage suivante
Routalaoueche Routalaoueche
MP
Niveau 2
12 octobre 2020 à 10:17:33

J'ai crée une div globale de 960 px qui me sert à centrer en largeur tout le contenu de la body de ma page web. Pour cela, j'ai appliqué une class à ma div globale qui est : .globale {margin: 0 auto; }

A l'intérieur de cette div globale, j'ai ajouté une autre div de 100 px qui float à gauche et une autre div de 100 px qui float à droite. J'ai crée une troisième div de 100 px qui s'intercale entre les deux. Mais elle se place à gauche de la première div qui float à gauche.

Comment faire pour qu'elle se centre en largeur entre les deux div ?

Scorpionnocrag Scorpionnocrag
MP
Niveau 9
12 octobre 2020 à 10:45:49

Bonjour ?

Du code peut être ?

Routalaoueche Routalaoueche
MP
Niveau 2
12 octobre 2020 à 11:01:13

Up

Marav Marav
MP
Niveau 28
12 octobre 2020 à 15:07:09

Oui il nous faudrait un peu de code :) Il faut que t'ai une bonne raison d'utiliser float comme par exemple avec pas mal de texte, sinon je ne conseille pas vraiment cette propriété, pour du positionnement il faudrait se tourner sur des solutions plus modernes et puissantes comme flexbox.

Marav Marav
MP
Niveau 28
12 octobre 2020 à 16:28:08

Bon t'es en plein troll, tant pis.

Routalaoueche Routalaoueche
MP
Niveau 2
12 octobre 2020 à 16:31:39

J'ai trouvé ! C'est bel et bien un float qu'il faut utiliser pour les div à gauche et à droite, quand à la troisième div, pour qu'elle s'intercale entre les deux premières, il suffisait de placer une .class { margin: 0 auto;}. J'ai dû aussi remplacer la valeur 960px par 80%. De cette façon, si on redimensionne la fenêtre, la largeur de la div globale s'adapte à la largeur du navigateur et le contenu s'adapte aussi à la largeur. Voici le code :

<!DOCTYPE html>
<html>
<head lang="fr">
	<meta charset="utf-8">
	<link href="styles.css" type="text/css" rel="stylesheet">
	<title>Float</title>
</head>
<body>
	<header class="global">
			<div class="jaune dimensions gauche"></div>
			<div class="rouge dimensions droite"></div>
			<div class="vert dimensions centre"></div>
	</header>
</body>
</html>
* {border: 0;}
.global {width: 80%; background: black; margin: 0 auto;}
.gauche {float: left;}
.droite {float: right;}
.centre {margin: 0 auto;}
.jaune {background: yellow;}
.rouge {background: red;}
.vert {background: green;}
.dimensions {width: 100px;height: 30px;}

Ce que je cherchais à faire c'est trouver un moyen pour que chaque case (jaune, verte et rouge) représente l'emplacement d'objets comme le logo dans la case jaune, les réseaux sociaux dans la case verte et la recherche, connexion et inscription dans la case rouge. Ensuite, en fonction de la largeur de la fenêtre du navigateur, ces différentes objets se positionnent automatiquement sans que j'ai à définir leur position, seulement celle de leur div qui les contient. Voici concrètement des captures écran :

Largeur totale du navigateur :
https://www.noelshack.com/2020-42-1-1602512868-capture.png

Largeur réduite du navigateur :
https://www.noelshack.com/2020-42-1-1602512905-capture1.png

Pseudo supprimé
Niveau 4
12 octobre 2020 à 19:35:36

Tu devrais regarder du côté des Flexbox en CSS.

Quelque chose comme ;

Display: flexbox;
justify-content: space-around; (Ou space-between je sais plus)
align-items: center;(Les centre dans la hauteur)

EDIT: Marav avait déja parler de Flexbox, déso'

Message édité le 12 octobre 2020 à 19:40:02 par
DébutPage précedente
1
Page suivantePage suivante
Répondre
Prévisu
?
Victime de harcèlement en ligne : comment réagir ?
Infos 0 connecté(s)

Gestion du forum

Modérateurs : Thymotep
Contacter les modérateurs - Règles du forum

Sujets à ne pas manquer

La vidéo du moment