Dev Faq
0
votes

Comment puis-je faire un élément div qui utilise le côté gauche (1/4)?

Je suis nouveau dans le codage HTML / CSS et j'essaie de créer un site Web. Je veux isoler le haut, le menu de gauche et sur la droite est un ticker d'informations qui met à jour toutes les x secondes.

Je l'ai fait avec: xxx

et dans CSS: < / p> xxx

Je ne sais pas comment le faire, que c'est tout le côté gauche "comme 1/4 de l'écran", et ma question est, quels numéros (%) i besoin de mettre dans le code CSS que c'est comme ça. À l'heure actuelle, il semble vraiment foiré: d

Mon site Web: https : //www.guwamiwa.de/~nb.marxer/Test/

8 commentaires

Bienvenue dans la pile Overflow Joma! Je ne comprends pas exactement quelle est votre endresulte désirée. Pourriez-vous partager une image / dessin de l'état actuel et une image / dessin démontrant quel résultat final devrait ressembler?

De plus, si vous avez un bon site où vous avez expliqué comment vous pouvez faire des boîtes sur un site, comme je ne trouve pas de bonnes explications ... une boîte laissée qui va tout le site, une partie centrale et une partie de la même manière que gauche

Je pense que vous devriez changer de ... par

... . Dans votre CSS, changez de côté {...} par .aside {...}

@Joma, je suggère de vérifier W3schools .

@ Bassie-c imgur.com/a/0gsrcc6 pour l'état actuel aller sur mon site avec le lien la boîte de question

@ María avec ce qu'il n'est pas coincé à droite, c'est "dans la zone de texte par défaut normale"

@Joma, une image réelle de l'État actuel serait vraiment géniale, car un site externe pourrait changer, ce qui pose des problèmes de référence future à cette question.

imgur.com/a/wimw7kl Donc, comme celui-ci, il était d'abord: D

4 Réponses :

0
votes

Je suggère de diviser votre corps en quatre parties (en utilisant

div> code> éléments). Le haut sera pour votre en-tête (ou simplement utiliser pour cela) et les trois restants auront largeur: 25% code>, largeur: 50% code>, largeur: 25 % code>. Assurez-vous d'ajouter des frontières à la DIV mais ajoutez des éléments dont vous avez besoin à l'intérieur de la Div. Exemple:

p> 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Your Site</title>
  <style>
        html {
      background: #ebfefe;
      height: 100%;
    }
    
    body {
      height: 100%;
      {
        .header {
          padding: 25px;
          width: 100%;
        }
        .right-panel {
          float: left;
          width: 25%;
          background-color: blue;
          height: 100%;
        }
        .left-panel {
          float: left;
          width: 25%;
          background-color: blue;
          height: 100%;
        }
        .root {
          float: left;
          display: block;
          width: 50%;
          background-color: antiquewhite;
          height: 100%;
        }
  </style>

</head>

<body>
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="left-panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="root">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="right-panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>

</html>

7 commentaires

Hey, merci beaucoup pour votre aide <3 Si je pose mon esprit sur un plan, je ne pense pas aux autres: D Vous savez comment faire la boîte "Infinit" sur le Botom? comme "ouvert"? Donc, la couleur ne finit pas?

Vous pouvez faire la hauteur 100% pour HTML, le corps et les divs.

Sry mais je ne sais pas vraiment quoi faire avec ça: d imgur.com/a/m7uqfhy <- - Mes 3 boîtes ( Guwamiwa.de/~nb.marxer/test < - Si vous voulez voir ce que mon web ressemble à RN) :)

Et en quelque sorte, la boîte rouge ne touche pas la droite pensant

Votre page a div.alles qui contient toutes les autres divs. Je vous suggère de vous débarrasser de cela et cela rendra votre vie plus facile

Si cela aide s'il vous plaît considérer un +1 :)

Vous en avez déjà donné un, mais "Merci pour les commentaires! Les votes exprimés par ceux qui ont moins de 15 réputations sont enregistrés, mais ne modifient pas le score post publié publiquement." :)

0
votes

Vous pouvez essayer CSS float code> et largeur code> pour ajuster les colonnes. Ci-dessous l'exemple: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column-left {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.column-right {
  float: left;
  width: 75%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column-left" style="background-color:#aaa;width:25%;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column-right" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

1 commentaires

THX pour votre aide <3 Maintenant, comment puis-je faire une boîte "infini" pour la hauteur ↓? Comme je le veux être limité pour le sommet mais "ouvert" sur le bas? Ou n'est-ce pas important et j'ai juste besoin de le faire aussi longtemps que le texte?

0
votes

Le code ci-dessous est une représentation de base de la manière dont un menu est effectué en utilisant float dans le CSS. Vous pouvez voir le

  • dans le code HTML juste essayer d'ajouter un autre
  • , il sera automatiquement Ajustez dans le menu sur le côté droit, copiez ce HTML et CSS et essayez de comprendre.

    la balise

      dans lequel il existe une liste de
    • est Float: droite , où comme le
    • 's sont float: gauche; . Dans ce cas, le menu est aligné à droite, tout le nouveau
    • 's sera aligner sur le côté gauche du
    • 0 commentaires
    0
    votes

    Donc, j'ai vérifié ce que vous vouliez, cela vient donc de la base, faites-le exécuter le code ci-dessous et vous comprendrez. Cette structure la plus élémentaire d'une page et il a ce que vous voulez

    Si vous voulez savoir comment un menu est effectué, vérifiez mon autre réponse https://stackoverflow.com/a/54101305/10751060

    fichier html xxx

    < FORT> fichier CSS xxx

    0 commentaires

    Articles qui pourrait vous intéresser :

    Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
    Select2 ne s'affiche pas correctement dans le mode bootstrap
    Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
    Comment puis-je définir un format pour les nombres d'entrée dans Blazor