Keskustelu: Nettisivujen teko: Dropdown-valikkojen kanssa ongelmia

verkko2022 [06.03.2022 22:52:17]

Kysyn vielä tätä asiaa:

<div class="dropdown">
    <button class="dropbtn">MUUT ASIAT
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <P>Muita asioita!</P>
      <div class="row">
        <div class="column">
            <h3>Yleisiä tietoja</h3>
          <input type = "submit" name = "muuta" value="a.pdf" /><br>
         <input type = "submit" name = "muuta" value="b.pdf" /><br>
         <input type = "submit" name = "muuta" value="c.pdf" /><br>
         </div>
         <div class="column">
          <h3>Tietoja</h3>
         <input type = "submit" name = "muuta" value="Tied.pdf" /><br>
        </div>
        </div>
        </div>
        </div>
        </div>

Tein sivulle tällaisen menun, näitä palikoita on monia. Kuvitellaan, että näitä on kymmenen rinnakkain näytöllä, niin miten voisin saada ne näkymään vaikka siten, että joka kolmannen painikkeen jälkeen rivi vaihtuu alemmaksi. Sen jo huomasin, että <br> ei toimi tässä?

Mod. aloitti uuden aiheen!

verkko2022 [06.03.2022 23:04:13]

Korjaankin heti tätä asiaa. Toivoisin oikeastaan, että kun menen painikkeen "MUUT ASIAT päälle, niin sisältö ei heti aukeaisi, vaan vasta kun painan painiketta.Tämä toimii kyllä muuten oikein hyvin, mutta valikko peittää alla olevat tiedot hiiren mennessä painikkeen yli.

Kiitos.

Metabolix [07.03.2022 08:26:24]

Tuosta kuvauksesta ja koodista ei saa selvää, miten noiden kuuluisi näkyä, joten ei pysty antamaan ratkaisujakaan. Jos palikoiden jako riveille ja sarakkeille kiinnostaa, kannattaa varmaan tutustua flexbox- ja grid-asetteluun. Klikkauksella aukeavan asian voi tehdä details-elementillä tai JS:llä:

onclick="this.parentNode.classList.toggle('auki')"

Muista näyttää myös olennaiset CSS- ja JS-koodit, koska pelkällä HTML:llä ei voi aiheuttaa mainitsemiasi ongelmia.

Uusista kysymyksistä aloita uusi keskustelu.

verkko2022 [07.03.2022 08:58:17]

Kiitos, laitan nyt vielä tähän lisää tietoa tästä valikostani(alla oleva on siis ennen tuota valikkoani, mistä laitoin tietoa jo aiemmin. En millään ymmärrä, miten saisin ongelman ratkaistuksi, tuo button näyttäisi vain värittävän valinnan, valikko aukeaa silti??

<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: white;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: red;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: red;
  padding: 14px 16px;
  background-color: white;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
    color: white;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #d62d20;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
}

.column a {
  float: none;
  color: white;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: red;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}





</style>

verkko2022 [07.03.2022 16:54:05]

Sain jo kuntoon, nyt pärjään:-)

Kiitos

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku