Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Elementin kohdistaminen

Sivu 1 / 1

somefckr [11.03.2019 21:45:49]

Lainaa #

Nyt tarvisi hieman apua kyseisenlaisessa ongelmassa.
Tarkoituksena siirtää tuo Good afternoon -elementti kuvan B mukaiseen kohtaan.
Sen olisi tarkoitus myös pysyä siinä, vaikka ikkunan kokoa muutettaisiinkiin.

https://imgur.com/jAtHIDV

<body>
  <h4 class="greeting">Good afternoon</h4>
  <div class="location">
    <h1 class="location-city">Location</h1>
    <canvas class="icon" width="64" height="64"></canvas>
  </div>
  <div class="temperature">
    <div class="content">
      <div class="degree-section">
        <h2 class="temperature-degree">0</h2>
        <span>°C</span>
      </div>
      <div class="temperature-description">It's friggin cold</div>
    </div>
  </div>
  </div>
  <script src="skycons.js"></script>
  <script src="./script/script.js"></script>
</body>
body {
    color: #555659;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.location {
    border-radius: 5px;
    justify-content: space-around;
    -webkit-box-shadow: 0px 134px 155px 7px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 134px 155px 7px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 134px 155px 7px rgba(0, 0, 0, 0.05);
}

.location, .temperature {
    height: 30vh;
    max-width: 800px;
    min-height: 200px;
    width: 50%;
    display: flex;
    align-items: center;
}

.temperature {
    flex-direction: column;
}

.content {
    margin: auto;
}

.degree-section {
    display: flex;
}

.degree-section span {
    line-height: 20px;
    margin: 5px;
    font-size: 20px;
}

.degree-section h2 {
    font-size: 35px;
}

.greeting {
    padding: 5px;
    padding-right: 20px;
    background-color: rgb(127, 255, 212);
    margin-bottom: -15px;
}

@media only screen and (max-width: 900px) {
    .location, .temperature {
        width: 90%;
    }
}

morderca [11.03.2019 23:51:25]

Lainaa #

En ole ihan hetkeen leikkinyt CSS:llä, joten voi olla huono tai "vanha" tapa toteuttaa, mutta väitän, että toimii.

Eli tuohon greeting classille annat vain tyylitiedostossa:

position: absolute;
  top: 0px;
  left: 10px;

Ymmärtääkseni tämä toteuttaa haluamasi

Metabolix [12.03.2019 01:27:51]

Lainaa #

Elementti on keskellä, koska ulommalle elementille on asetettu ”align-items: center”. Näin flex-asettelun kanssa oikea korjaus on kai asettaa sisemmälle elementille ”align-self: start”.

somefckr [12.03.2019 08:43:13]

Lainaa #

Ongelma on nyt varmaankin koko layoutin rakenne, ehkä on parempi ratkaista tämä luomalla uusi.

morderca kirjoitti:

En ole ihan hetkeen leikkinyt CSS:llä, joten voi olla huono tai "vanha" tapa toteuttaa, mutta väitän, että toimii.

Eli tuohon greeting classille annat vain tyylitiedostossa:

position: absolute;
  top: 0px;
  left: 10px;

Ymmärtääkseni tämä toteuttaa haluamasi

Tämä siirtää tuon elementin vasempaan sivun ylänurkkaan.

Metabolix kirjoitti:

Elementti on keskellä, koska ulommalle elementille on asetettu ”align-items: center”. Näin flex-asettelun kanssa oikea korjaus on kai asettaa sisemmälle elementille ”align-self: start”.

Tämä taas siirtää tuon elementin nykyisestä kohdasta vasempaan sivun laitaan, pitäen y-akselin samana.

Otan tietystin vastaan vinkkejä miten tuo tulisi rakentaa.

Joka tapauksessa tein tuosta tapauksesta jsfiddleen esimerkin:
https://jsfiddle.net/_null/5bc3yxq9/1/

Metabolix [12.03.2019 11:11:39]

Lainaa #

Mallikuvassasi elementti on lähes vasemmassa reunassa ja mitään selviä linjoja ei ole merkitty, joten kerro tavoitteesta selvemmin.

Jos tavoitteena on saada elementti linjaan tuon koodista löytyvän 800px:n maksimileveyden kanssa, voisit asettaa maksimileveyden suoraan ympäröivälle elementille (bodylle tai tarvittaessa ylimääräiselle diville), jolloin vasen reuna olisi haluamassasi kohdassa. Koodisi lopussa olevan leveystarkastuksen ja 90%:n voi myös toteuttaa tällöin helpommin.

Esimerkiksi seuraavin muutoksin sivu toimii:

html {
    display: flex;
    justify-content: center;
}
body {
    width: 800px;
    min-width: 50%;
    max-width: 90%;
}

.location, .temperature {
    /* POIS: max-width: 800px; */
    /* POIS: width: 50%; */
    width: 100%;
}
.greeting {
    align-self: start;
}
/*
POIS:
@media only screen and (max-width: 900px) {
    .location, .temperature {
        width: 90%;
    }
}
*/

P.S. Helpottaisi antaa kysymys kokonaisena nettisivuna eli esim. tässä doctypen ja style-lohkon kanssa. Silloin voisi helpommin kopioida koodin itselle testattavaksi.

somefckr [12.03.2019 11:56:41]

Lainaa #

Siis tarkoituksena oli saada se linjaan tuon valkoisella taustalla olevan elementin kanssa kuvan mukaisestin.

Ja tuo linkki oli väärä, pahoitteluni.

Mutta, ehkä on parempi kun vain harjoittelen tuota css:ää lisää.

somefckr [13.03.2019 13:26:30]

Lainaa #

Metabolix kirjoitti:

Mallikuvassasi elementti on lähes vasemmassa reunassa ja mitään selviä linjoja ei ole merkitty, joten kerro tavoitteesta selvemmin.

Jos tavoitteena on saada elementti linjaan tuon koodista löytyvän 800px:n maksimileveyden kanssa, voisit asettaa maksimileveyden suoraan ympäröivälle elementille (bodylle tai tarvittaessa ylimääräiselle diville), jolloin vasen reuna olisi haluamassasi kohdassa. Koodisi lopussa olevan leveystarkastuksen ja 90%:n voi myös toteuttaa tällöin helpommin.

Katsoin uudelleen tuota esimerkkiäsi ja sain sen toimimaan halutulla tavalla.
Kiitoksia avusta!

Vastaus

Muista lukea kirjoitusohjeet.
Tietoa sivustosta