Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Wyrównanie przycisków na całą szerokość

HTML  Założony przez  dorman.

15.04.2018, 11:40 (Ten post był ostatnio modyfikowany: 15.04.2018, 11:44 przez dorman.)
#1
Cześć, znowu mam problem. Chciałbym, aby przyciski były na całą szerokość szarego tła. Jak to zrobić? Demo: Klik! Ma być zgodne z tym: Klik2. Dzięki.
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.


15.04.2018, 11:47
#2
Div o klasie grid-container ma ustawiony padding o wartości .625rem z lewej i prawej, więc masz 3 rozwiązania.
1) Usuń tę klasę
2) Przenieść buttony poza nią
3) Nadaj elementowi z buttonami ujemny margines po lewej i prawej, który będzie równy paddingowi z grid-container, a konkretnie:
.button-group {
  margin-left: -.625rem;
  margin-right: -.625rem;
}
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
15.04.2018, 12:00 (Ten post był ostatnio modyfikowany: 15.04.2018, 12:02 przez dorman.)
#3
Jeśli usunę klasę grid-container, to panel będzie na całą szerokość strony, a chciałbym żeby był na środku. Po przeniesieniu przycisków poza tą klasę, robią się na całą szerokość strony, czego nie chcę. Przyciski mają być takiej samej szerokości jak panel. Mógłbym najwyżej podpiąć przyciski pod klasę i dodać oddzielną szerokość, ale po coś jest framework.. Wolę nie zmieniać klasy button_group, bo jest z CSS frameworku i będzie tylko dla jednego elementu na stronie (panelu). Jakieś inne rozwiązania? 
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.


15.04.2018, 13:12
#4
Do diva z .button-group dodaj klase grid-margin-x
15.04.2018, 13:28 (Ten post był ostatnio modyfikowany: 15.04.2018, 13:30 przez dorman.)
#5
Działa, ale w między czasie trochę zmodyfikowałem kod pod stylizowanie, więc jakbyś mógł: Demo2. Byłbym wdzięczny. :) Podzieliłem jedynie przyciski na dwie kolumny. Mają być złączone, tak jak jest.
Przy okazji, czym różnią się cell small, cell medium i cell large?  Chodzi o urządzenia mobilne?
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.


15.04.2018, 13:52
#6
To stwórz diva nadrzędnego który obejmie grid grid-x z buttonami z klasą grid-margin-x

small-*, large-* określa ilość kolumn jakie zajmie dany element na danej rozdzielczości ekranu. Domyśly grid ma 12 kolumn czyli np.
<div class="small-12 large-6"> left</div>
<div class="small-12 large-6"> right </div>
na ekranach mniejszych niż 1024px bedzie wyglądało to tak

left
right

a powyżej tej szerokości tak:

left right

tutaj masz stronę z dokumentacją tego https://foundation.zurb.com/sites/docs/m...ia-queries
15.04.2018, 14:41
#7
A jak zrobić żeby przyciski leżały na samym dole szarego tła?
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.


15.04.2018, 15:08
#8
Nie wiem czy jest taka możliwość bez nadpisania klasy buttona/edycji, poszukaj w dokumentacji.
15.04.2018, 15:46 (Ten post był ostatnio modyfikowany: 15.04.2018, 15:58 przez dorman.)
#9
Nie wiem czy coś znajdę. Mam teraz kilka pytań.
1. Dlaczego muszę tworzyć oddzielnego div'a grid-margin-x, zamiast podpiąć go pod istniejącego grid-x, który jest w przyciskach? (tylko tak działa)
2. jeśli chcę, żeby kolumna miała zawartość poziomo bez przewijania do następnego wiersza na wszystkich ekranach, mam używać cell small-* ?  Np. chcę, aby miejsca na tekst w panelu były takie jak jest w demie, a nie w jednej linii.
3. Czy SASS jest wymagany do tego frameworku?
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.


15.04.2018, 16:13
#10
1. Bo ktoś tak zaprojektował.
2. Kompletnie nie rozumiem. Narysuj to jakoś albo lepiej opisz.
3. Nie koniecznie. Możesz używać wyłącznie skompilowanego już css
15.04.2018, 16:24 (Ten post był ostatnio modyfikowany: 15.04.2018, 16:24 przez dorman.)
#11
(15.04.2018, 13:52)Matslom napisał(a): na ekranach mniejszych niż 1024px bedzie wyglądało to tak

left
right

a powyżej tej szerokości tak:

left right

W pytaniu 2 chodziło mi o to, czy używając cell small-12  zawartość będzie w jednej linii na wszystkich ekranach, a nie 
left
right
?
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.


15.04.2018, 17:34
#12
Tak, będzie.
Wystarczy wybrać opcję emulacji urządzeń w dev toolsach przeglądarki lub zmniejszyć/zwiększyć okno przeglądarki aby zobaczyć jak strona się strona zachowuje na różnych rozdzielczościach
16.04.2018, 14:06 (Ten post był ostatnio modyfikowany: 16.04.2018, 15:12 przez dorman.)
#13
Dzięki za odpowiedzi. Przywróciłem przyciski tak jak były w Demo1. Przyciski są dobrze ułożone, jednak problem pojawia się z obramowaniem. Zrobiłem tak: Podgląd. Ta fioletowa linia to obramowanie, która ma odgradzać przyciski. Jednak jak widać na zdjęciu przerwa jest za duża i obramowanie 1px nie wystarcza, a więcej nie dam. Prawie idealna sytuacja była w Demo2, tylko problemem było danie przycisków na sam koniec szarego tła. Jakieś pomysły?
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.


16.04.2018, 18:35
#14
Masz 1px marginesu z prawej strony w lewym buttonie, musisz go usunąć. BTW używaj dev toolsow wtedy bedziesz widział co dzieje się na stronie.
17.04.2018, 13:48
#15
No właśnie używam. Zrobiłem tak w HTML:
<div class="expanded button-group grid-margin-x">
 <a class="button custom">One</a>
 <a class="button custom">Two</a>
</div>
CSS:
.custom {
margin:0;
}
Nie działa. >: (
Cytat:It's all about the details.
---------------
PW tylko forum, nie mejl.





Użytkownicy przeglądający ten wątek:

1 gości