• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Mam problem z CSS i divami - początkujący

VPS Starter Arubacloud
0 głosów
155 wizyt
pytanie zadane 21 lipca 2022 w HTML i CSS przez NetSavage Nowicjusz (120 p.)

Witam mam taki problem, chce sobie zrobic taki login panel natomiast zrobilem divy, jakos je tam umodelowalem w css lecz chcialbym dowiedziec sie jak najlepiej je spozycjonowac. Jak to napisac w css zeby manewrowac tymi inputami po czarnym boxie? jak ulozyc kod zeby klasa .box miala pierwszenstwo nad .container np? jakies rady? Pozdrawiam

 

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Koulen&family=PT+Sans+Narrow:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title> CSS Login Screen Tutorial </title>
</head>
  <body>
<div class="container">
    <div class="logo">
        
    </div>
    <div class="box">
<label for="user">Account:</label>
<input type="text" id="user">
<br>
<label for="pass">Password:</label>
<input type="password" id="pass">
</div>
</div>
</body>
</html>

 

oraz kod CSS

body {
  font-family: 'Amatic SC', cursive;
  font-family: 'Koulen', cursive;
  font-family: 'PT Sans Narrow', sans-serif;
}

.container {
  margin-top: 150px;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 200px;
padding-left: 250px;
height: 200px;
}

label {
  margin-left: -40px;
  color: aliceblue;
  display: block;
  letter-spacing: 2px;
}

input[type=text],input[type=password] {
  position: absolute;
  background-color: aqua;
}

 

2 odpowiedzi

+1 głos
odpowiedź 21 lipca 2022 przez SzkolnyAdmin Szeryf (86,280 p.)
Może napisz dokładniej, co chcesz osiągnąć?

Manipulacje elementami to wykorzystanie FlexBox. Grid lub własności position.

Klasa box nadpisze te własności klasy container, które są zawarte w klasie box, ponieważ jest ona "blizej" elementu, który styluje.
komentarz 21 lipca 2022 przez NetSavage Nowicjusz (120 p.)

Chcialbym zeby obiekt A byl załózmy wypelniony jakims kolorem, to potrafie

ale chcialbym wiedziec jak ukladac input1 i input2 wewnatrz tego obiektu A, czyli np wysrodkowac inputy na samym srodku obiektu A. 

komentarz 21 lipca 2022 przez SzkolnyAdmin Szeryf (86,280 p.)
komentarz 21 lipca 2022 przez PramatycznyJunior Początkujący (420 p.)

@SzkolnyAdmin, a jak ktoś nie korzysta z flex-system, to nie może manipulować? Nie generalizowałbym tego tak. 

komentarz 21 lipca 2022 przez VBService Ekspert (251,210 p.)
edycja 22 lipca 2022 przez VBService

@PramatycznyJunior, ale @SzkolnyAdmin, napisał

FlexBox. Grid lub własności position.

czyli:

  • flex
  • grid
  • position

w podanym przez niego linku jest jeszcze omówiony

  • margin

jak znasz jeszcze jakiś inny sposób, to Ja chętnie, jak i pewnie inni forumowicze, zapoznałbym się z nim. Pozdrawiam. smiley

1
komentarz 21 lipca 2022 przez SzkolnyAdmin Szeryf (86,280 p.)

@PramatycznyJunior, sorry, interpunkcja mi zawiodła.

0 głosów
odpowiedź 21 lipca 2022 przez VBService Ekspert (251,210 p.)
edycja 21 lipca 2022 przez VBService

Próbowałeś użyć position dla input

input[type=text],input[type=password] {
  position: absolute;
  background-color: aqua;
}

i byłeś "blisko", ale żeby pozycja absolutna odnosiła się tylko do wnętrza div-a o klasie container to elementowi o klasie container ustaw position na relative

 

 

przykład (tylko ustawiona stała wysokość dla div.logo)

body {
  font-family: 'Amatic SC', cursive;
  font-family: 'Koulen', cursive;
  font-family: 'PT Sans Narrow', sans-serif;
}

.container {
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  width: 200px;
  height: 200px;
}
.logo {
  background-image: url('https://picsum.photos/100/200/?random=1');
  background-position: center center;
  background-size: cover;
  height: 100px;
}
label, input {
  margin: 0 1em;
}
label {
  color: aliceblue;
  display: block;
  letter-spacing: 2px;
}
input[type="text"],
input[type="password"] {
  background-color: aqua;
}

 

przykład (ustawiony position)

body {
  font-family: 'Amatic SC', cursive;
  font-family: 'Koulen', cursive;
  font-family: 'PT Sans Narrow', sans-serif;
}

.container {
  position: relative;
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  width: 200px;
  height: 200px;
}
.box {
  position: absolute;
  bottom: 1em; /* od dołu div-a .container */
}
label, input {
  margin: 0 1em;
}
label {
  color: aliceblue;
  display: block;
  letter-spacing: 2px;
}
input[type="text"],
input[type="password"] {
  background-color: aqua;
}

 

jeśli jednak chcesz "skorzystać" z flex-a lub grid-a, użyj np. linka podanego przez @SzkolnyAdmin.

1
komentarz 22 lipca 2022 przez NetSavage Nowicjusz (120 p.)
dzieki panowie :)

Podobne pytania

0 głosów
1 odpowiedź 306 wizyt
+1 głos
1 odpowiedź 234 wizyt
pytanie zadane 1 maja 2016 w HTML i CSS przez koder12345 Obywatel (1,570 p.)
0 głosów
1 odpowiedź 438 wizyt
pytanie zadane 15 sierpnia 2018 w Sieci komputerowe, internet przez Marcin Ficek Obywatel (1,090 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...