Keskustelu: Nettisivujen teko: Lomakesivun luonti

Vipe26 [22.06.2018 17:00:35]

Olen yrittänyt saada luoduksi yksinkertaista lomakesivua. Haasteita ilmenee jatkuvasti siinä, että en saa koko sivun taustaväriä ja lomakepohjan taustakuvaa onnistuneesti sivulle samaan aikaan. Sivun loppuun tulee myös kuvallinen hakupainike, jonka asettelu menee toistuvasti pieleen.

Millaisella koodinpätkällä tämän ratkaisisi? Esimerkkikuva on tässä.

Metabolix [22.06.2018 17:20:52]

Vaikea sanoa, mikä siinä voisi mennä pieleen. Tässä kuitenkin ovat mainitsemasi asiat eli taustaväri ja taustakuva sekä kuvallinen keskitetty hakupainike.

<!DOCTYPE html>
<style>
form {
	background: #adfab7 url("taustakuva.png") repeat-x bottom left;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgAQMAAACYU+zHAAAABlBMVEUAFv+t+rf+NDw3AAAAgklEQVQY03XPsY3CQABE0Wc5INwS3ALhZW6JkADJ7oCWKIUSTLbBaocAn06AbqKXTPBlnz88frHOL3QlyTWaQ1KHqMbkZlFZwmyjdCYbY9sxNIo76hfOHGw4feFIUfHzhvZ6TTouTLJyYZaNziKdGCIx5FYiWcfURHIve2lbPpL/xROds4gu83WMugAAAABJRU5ErkJggg==');
}
input {
	margin: 1em;
}
fieldset.submit {
	border: 0;
	text-align: center;
}
fieldset.submit button {
	border-radius: 8px;
	background: #adfab7;
	border-color: #adfab7;
}
</style>
<form>
<input><br>
<input><br>
<input><br>
<fieldset class="submit">
<button type="submit"><img alt="Hei!" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAIAAAAt/+nTAAABB0lEQVRYw+1YSw7EIAitxmP0QN33nK7HA3mKrmZhYgyGKVJkZDKk6aKxyIPH8+Pi9dosm9+Mm0kA536YBFDibt+WAIC4BSrQ+1qlByiRYfnQhxqwyGJOU0sPjD2dV5OL0ZHEf5kAasI+T0PPKxh5W7c6Pqh1mxQnf20lDjrMnpR+EoBF9H6YQud+lGcRhFgNPaPVYk7lsdEDIoFKqe2YCqml+QkJl5DRPk3EhfLpQhZzIu6dZCvZevMKxJjKw/+ZeEEZLcwWrDtFZITPA4xtcB/lUEx0kMDtXArRVxL2MI3zgKwKAXo7katF2Z7B3LY0q9+dlbtR0CQVgBkZxSrszN1OT+mBL9ob25+QInJa4TIAAAAASUVORK5CYII="></button>
</fieldset>
</form>

The Alchemist [23.06.2018 10:44:53]

Jos ongelma on asettelun kanssa, niin tee ensin html-rakenne, jossa on vain toimiva, kuvanmukainen gridi, ja sitten voit helposti pudotella syötekentät soluihin.

Lomakkeella olevan buttonin tekemiseen ei tarvitse kuvatiedostoja ja se pitäisi takoa myös huonon kurssinvetäjän päähän. Toteutukseen riittää yksinkertainen taustaväri ja border-radius-sääntö.

Kuvatiedostojen käyttäminen nappeina on muutenkin nykyaikana aivokuollut idea, eikä sitä tekniikkaa pitäisi opettaa lainkaan html:n alkeiskurssilla.

(Metabolixin esimerkin vastaisesti opettaja odottanee nappulan olevan <input type="image">.)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    form {
      background:
        linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
        linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px) 0 64px;
      background-color: #708090;
      background-size: 64px 128px;
      border: 10px solid #faf;
    }

    .header {
      background-color: #faf;
      overflow-y: hidden;
    }

    form > div > div {
      border: 3px dashed blue;
      padding: 15px;
      width: 100%;
    }

    form > div > div + div {
      margin-left: -3px;
    }

    form > div + div > div {
      margin-top: -3px;
    }
  </style>
</head>
<body>
  <form>
    <div class="header"><h1>Otsikko</h1></div>
    <div style="border: 3px dashed blue; padding: 15px;">
      Eka rivi
    </div>
    <div style="display: flex">
      <div>
        Syötekenttä 1
      </div>
      <div>
        Syötekenttä 2
      </div>
     </div>
     <div style="display: flex">
      <div>
        Syötekenttä 3
      </div>
      <div>
        Syötekenttä 4
      </div>
    </div>
    <div style="display: flex">
      <div>
        Syötekenttä 5
      </div>
      <div>
        Syötekenttä 6
      </div>
    </div>
    <div style="padding: 30px">
      <center>
        <button type="button" style="padding: 10px; width: 100px">moi</button>
      </center>
    </div>
  </form>
</body>
<html>

Esimerkki on tarkoituksella kirjoitettu sotkuiseksi, jottei se päädy sellaisenaan kotitehtävän vastaukseksi. Vähintään pitäisi siirtää kaikki css-tyylittely style-tagin sisälle head-osioon, keskittää sisältö center-tagien sijaan css:llä ja monimutkaiset nuolinotaatiot korvata asiallisilla css-luokilla.

Metabolix [23.06.2018 13:49:45]

The Alchemist kirjoitti:

(Metabolixin esimerkin vastaisesti opettaja odottanee nappulan olevan <input type="image">.)

Näin oletinkin, mutta button vastaa paremmin tarvetta juuri mainitsemistasi syistä.

Vastaus

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

Kirjautuminen