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.
<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%;
}
}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
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”.
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/
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.
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ää.
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!
Aihe on jo aika vanha, joten et voi enää vastata siihen.