Autor Wątek: Zagnieżdżenie div, kilka elementów w jednej linii  (Przeczytany 2797 razy)

Offline LizarD

  • Użytkownik

# Styczeń 15, 2017, 16:28:04
Cześć,  mam swoje trudne początki z css ale muszę zrobić kilka rzeczy i zabieram się do tego na sztywno...

1. Tekst przylega do lewej krawędzi (długość tekstu jest różna), z prawej jest mała ikona a następnie input, więc text-algin: left i right jednocześnie ? Zostaje jeszcze chceckbox, ma odstawać od prawej strony tyle żeby przylegał do początku input.
Ale Czy takie ułożenie nie lepiej mi zrobić jako listy ? Każda linijka z inputem to lista ?
---------------------------------------------------------
tekst |                                       | input |  ikona |
tekst        |                                | input |  ikona |
tekst    |                                    | input |  ikona |
tekst       |                                 | input |  ikona |
tekst |                                       | check |           |
---------------------------------------------------------

2.Wysokość tego całego diva wynosi 130px po prawej stronie obrazka jest napis tylko że jak go dodaję to jest albo na górze albo na dole a nie po środku, kolejnym elementem jest pasek nawigacyjny którego wysokość jest mniejsza niż wysokość obrazka ale zajmuję resztę szerokości strony. Lista ? Jak wstawić obiekt zajmujący szerokość_strony - (obrazek_szerokość + napis_szerokość) = szerokość_paska nawigacyjnego

<div>
           <img...>
           <a> napis </a>
          <nav>...
</div>

---------------------------------------------------------------------------------------------
                 |                            |                     pasek nawigacyjny                    |
                 |                            |---------------------------------------------------------|
    IMG     |   napis               |                                                                             |
                 |                            |                                                                             |
                 |                            |                                                                            |
---------------------------------------------------------------------------------------------

3. Mam sobie diva z z-index ustawionym aby div był zawsze widoczny ( okienko dialogowe ), wyświetlam w nim zwykły tekst i czy jest możliwość aby rozmiar tego diva zmieniał się zależnie od długości tego tekstu ? Nie chce żeby ucinało mi tekst bądź on wystawał tylko aby rozmiar diva w którym wyświetlam tekst mi się automatycznie zmienił.


Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline Rakieta

  • Użytkownik

# Styczeń 17, 2017, 20:46:09
Dawaj od razu na JS Fiddle. Czytanie i zrozumienie takich opisów to większa męka i strata czasu jak sama pomoc i propozycja rozwiązania :)

Offline LizarD

  • Użytkownik

# Styczeń 21, 2017, 02:51:25
Co do punktu 1: https://jsfiddle.net/adriansikora344/0tpuwstu/ i teraz czy to jest dobrze zrobione ? Czy każda linijka zawierająca ikone input label powinna być osobnym dive'm ? Jak widać tekst (label) nie jest po środku (po osi Y) input'ów
« Ostatnia zmiana: Styczeń 21, 2017, 03:54:59 wysłana przez LizarD »

Offline Rakieta

  • Użytkownik

# Styczeń 22, 2017, 12:58:21
<fieldset> jak sam nazwa wskazuje, służy do oddzielenia grupy pól. Czyli np. Imie, Nazwisko, Płeć | Ulubiona gra, ulubiony film, ulubione imie

Brakuje <form>, bez tego to nie jest formularz.

Tak, lepiej sobie podzielić na div - choćby po to by nie wpisywać<br/><br/>. <br/> czyli złamanie linii stosujemy tylko raz kiedy rzeczywiście w tekście chcemy złamać
linię

Aby utworzyć nowy akapit stosujemy <p></p>

Osobiście zrobiłbym to tak:
<div>
  <div float:left, width: 50%>label</div>
  <div float: left, width: 50%>input, ikona</div>
</div>

Czyli mobile-first - kiedy ekran będzie za mały divom dajemy 100% i w ten sposób z float: left jeden podchodzi pod drugiego (label na górze, input poniżej). Ale to Cię raczej w tej chwili nie obchodzi :)

Offline LizarD

  • Użytkownik

# Styczeń 23, 2017, 20:05:32
O tak : https://jsfiddle.net/adriansikora344/oa0rLskx/ ?

Poprawiłem na tak: https://jsfiddle.net/adriansikora344/8ug9asjk/ Tylko jest takie pytanie które mnie mi nie daje spokoju, przez które mam problemy też w innych miejscach... W drugiem linku, jest tam napis jako label i jak mam teraz poprawić tego label żeby był na środku po osi X i osi Y div'a w którym się znajduje ?

Offline Rakieta

  • Użytkownik

# Styczeń 24, 2017, 18:47:42
W drugiem linku, jest tam napis jako label i jak mam teraz poprawić tego label żeby był na środku po osi X i osi Y div'a w którym się znajduje ?

Na to nie ma jednej odpowiedzi. W tej sytuacji po prostu dajesz padding/margines z góry i z dołu jaki cię interesuje.

Jeśli chcesz by był na środku to nic trudnego - text-align: center. Ale to musisz od razu zakładać, że ten label będzie wyśrodkowany i nie możesz obok niego wrzucać kolejnego tekstu "Niepoprawny adres e-mail", bo wtedy obliczony środek będzie w innym miejscu, prawda? :)

Offline Xion

  • Moderator
    • xion.log

# Styczeń 25, 2017, 18:01:29
Cytuj
Na to nie ma jednej odpowiedzi.
Ahem.

Offline Rakieta

  • Użytkownik

# Styczeń 25, 2017, 19:27:07
Flexbox nie jest od tego, żeby teraz opierać na nim wszystkie elementy strony, nawet głupi label formularza.

- Tam gdzie możesz zastosować padding, stosujesz padding (100% zgodności, zero rozbieżności między przeglądarkami),
- --- line-height (100%),
- display table (98%)
- display flexbox (82%, 12% użytkowników może mieć problemy przez różną interepretacje przeglądarek, bugi i inne).

Dane z caniuse, w rzeczywistości % mogą być niższe.

Jak już uczymy to uczmy "jak należy", a nie "co się da" :) Na moim telefonie flexbox nie działa.

---

Do mojego poprzedniego posta dodam jeszcze, że "niepoprawny adres e-mail" można dać jako absolute i wtedy nie będzie problemu z obliczaniem środka. To tak dla jasności :)

Offline LizarD

  • Użytkownik

# Styczeń 31, 2017, 11:42:08
Dobra, powoli chyba rozumiem. Pewne moje problemy zniknęły jak na spokojnie do tego siadłem, w celu analizy to mógłby ktoś rzucić okiem na https://jsfiddle.net/adriansikora344/xxkrjhLd/1/ czy ja to już w miarę poprawnie zrobiłem ?

Online lethern

  • Użytkownik

  • +1
# Styczeń 31, 2017, 16:52:52
Po mojemu: https://jsfiddle.net/hcfof07k/3/
-button z reguły skraca się do btn, nie but
-"display" zamiast "float" do układania w rząd
-"hr" do zrobienia linii
-zbędne bordery 0px -rozumiem że mogły być eksperymentem, ale poszły w nicość
-class zamiast id-ków, nie ma tu żadnego powodu żebyś stosował id do łączenia ze stylami
-niepotrzebne, z mojego punktu widzenia, opakowanie inpuptów i buttona w divy. Jeśli jest jakiś powód, to o nim nie wiedziałem (mógłbyś np. chcieć wrzucić do diva label+input)
[edit]z tym hr to nie "poprawka" tylko "propozycja". PS nie czytałem wątku
« Ostatnia zmiana: Styczeń 31, 2017, 23:47:28 wysłana przez lethern »

Offline Rakieta

  • Użytkownik

# Styczeń 31, 2017, 23:31:50
Nie mam niestety na tyle czasu więc nie wrzucę na JSfiddle. To co napisał lethern z jedną poprawką:

- "hr" służy do tworzenia linii poziomej w tekście (czytelność, formatowanie), nie jako ozdoba, więc zamiast hr lepszy będzie border-top i padding-top dla <label>


Kiedy tworzysz menu nie stosujesz float, tylko np. display: inline-block (czyli blok w linii).

Sam "label" służy chyba do nazewnictwa inputów (<label for="nazwainputa">), natomiast aby nazwać grupę inputów użyjemy <legend>nazwa</legend>.

Offline LizarD

  • Użytkownik

# Luty 01, 2017, 00:02:12
Po mojemu: https://jsfiddle.net/hcfof07k/3/
-"display" zamiast "float" do układania w rząd
Czemu ? Wszędzie w tutorialach podają żeby używać float. Co jest przewagą display ?

-zbędne bordery 0px -rozumiem że mogły być eksperymentem, ale poszły w nicość
Tylko eksperyment

-class zamiast id-ków, nie ma tu żadnego powodu żebyś stosował id do łączenia ze stylami
Mógłbyś to rozwinąć ? Podobno takie łączenie wykorzystuje się gdy styl ma być użyty tylko dla konkretnego div'a, elementu a tak w tym wypadku jest.

Sam "label" służy chyba do nazewnictwa inputów (<label for="nazwainputa">), natomiast aby nazwać grupę inputów użyjemy <legend>nazwa</legend>.
Ogólnie to nie rozumiem czemu legend, czemu nie może być label to jest zwykły napis nawet jako nagłówek który informuje użytkownika po co są te inputy. Mogę przecież napisać tutaj to jako <span> <p> <a> <label> <legend>. Tak samo menu mogę opakować w <nav> tylko co mi to da ?

Online lethern

  • Użytkownik

# Luty 01, 2017, 00:17:28
Cytuj
Wszędzie w tutorialach podają żeby używać float. Co jest przewagą display ?
taa, nawet GMail jest cały jednym wielkim floatem...
display jest dla mnie po prostu bardziej ogarnięty, nie dzieją się losowe rzeczy kiedy mieszasz go z innymi elementami, i przede wszystkim, float nie służy do tego żeby coś wyrównać w jednym wierszu, tylko żeby wyrzucać gdzieś na bok (takie jest moje prywatne odczucie/zdanie)

style pisane pod ID wydają się słabo przenośne, mogą być mało czytelne, itp. Jeśli masz klasę ".input_red_border", to raczej wiesz jak działa i gdzie jej uzyć, choć można się spierać czy lepsze to czy styl o nazwie "#input_address_city" (oczywiście inaczej na to spojrzysz, gdy Twoj projekt będzie mieć więcej niż jedną stronę, więcej niż 2 inputy)

Legend może mieć jakieś plusy, tak samo uzywanie label zamiast span może mieć pewne plusy (szczególnie przy checkboxach). Ale in the end, to czy użyjesz legend, span, label, czy nawet div, nie sprowadzi na Ciebie czarnej klątwy webmasterów.. Rób tak jak Ci wygodnie, jak działa i jak jest w miarę akceptowalnie, a wydaje mi się, że żaden z tych sposobów nie jest na czarnej liście.. o, powtarzam się
« Ostatnia zmiana: Luty 01, 2017, 00:27:36 wysłana przez lethern »

Offline LizarD

  • Użytkownik

# Luty 01, 2017, 00:32:14
taa, nawet GMail jest cały jednym wielkim floatem...
Ironia ? float zakazany ? Mniej kompatybilny z resztą przeglądarek ?

style pisane pod ID wydają się słabo przenośne, mogą być mało czytelne, itp. Jeśli masz klasę ".input_red_border", to raczej wiesz jak działa i gdzie jej uzyć, choć można się spierać czy lepsze to czy styl o nazwie "#input_address_city" (oczywiście inaczej na to spojrzysz, gdy Twoj projekt będzie mieć więcej niż jedną stronę, więcej niż 2 inputy)
Te div'y to będą tylko na tej stronie opcję w menu będą za pomocą JS'a zmieniać zawartość z form na np. zwykły tekst. Po zalogowaniu takiego wyglądu nie będę już potrzebował.

Legend może mieć jakieś plusy, tak samo uzywanie label zamiast span może mieć pewne plusy (szczególnie przy checkboxach). Ale in the end, to czy użyjesz legend, span, label, czy nawet div, nie sprowadzi na Ciebie czarnej klątwy webmasterów.. Rób tak jak Ci wygodnie, jak działa i jak jest w miarę akceptowalnie, a wydaje mi się, że żaden z tych sposobów nie jest na czarnej liście.. o, powtarzam się
Gdzie ja znajdę artykuł na temat tych plusów ?

Offline Rakieta

  • Użytkownik

  • +1
# Luty 01, 2017, 11:40:52
Nie chodzi tu o plusy i minusy tylko o standaryzację, wytyczne W3 czy choćby te MDN. Po drugie po to powstały dodatkowe znaczniki w HTML5 by kod nie był już tylko zlepkiem DIV, tylko reprezentował rzeczywiste zastosowanie (w przyszłości zapewne bedą go wykorzystywać roboty internetowe, jeśli jeszcze tego nie robią)

Możesz pisać jak chcesz, np. całą stronę napisać w DIV i każdy DIV nazywać osobnym ID, choć używają tych samych styli CSS. Tak jak możesz napisać grę stosując tylko instrukcje warunkowe i zmienne, bez klas i obiektów. Ale skoro już się uczysz to warto uczyć się poprawnego kodowania, by później nie uczyć się drugi raz.

Jeśli chodzi o legend a label:
http://www.w3schools.com/html/html_forms.asp
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form
« Ostatnia zmiana: Luty 01, 2017, 11:44:36 wysłana przez Rakieta »