Dzięki za pomoc w rozwiązaniu poprzedniego problemu ale mam kolejny ale tym razem nie serwisowy tylko programistyczny. Mam 3 obrazki obok siebie i panel z tekstem obok tych zdjęć i podczas zmiany rozmiaru okna przeglądarki właśnie ten panel najeżdża mi na zdjęcia.
0
0
Bootstrap, poczytaj sobie o grid.
0
Ok dzięki ale na razie wolę ogarnąć zwykłego html i CSS
1
Daj jakiś kod, bo bez tego będzie naprawdę ciężko :P
0
Ok. Postaram się podesłać jak najszybciej
0
Chcę zrobić coś takiego
0
Zobacz ten post: https://4programmers.net/Forum/1582018
Może dzięki poradzie w nim zawartej jakoś uda się posunąć sprawę do przodu.
0
Tu jest ko html'a
<div class="poj">
<section id="deals">
<section class="sale-item">
<img src="gz.jpg" />
<p>Gzyms wewnętrzny LG 23-1</p>
</section>
<section class="sale-item">
<img src="gz2.jpg" />
<p>Gzyms wewnętrzny LG 23-1</p>
</section>
<section class="sale-item">
<img src="gz3.jpg" />
<p>Gzyms wewnętrzny LG 23-1</p>
</section>
</section>
<div class="advantage">
<div class="adw-row">
<div class="new">Nowości</div>
</div>
<div class="header-class">
Najnowszy design
</div>
<div class="header-class-two">
Gzymsy led,listwy sufitowe,bonie
</div>
<div class="home-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>
a tutaj kod css
.poj
{
width:100%;
display:flex;
justify-content: space-between;
flex-flow:row-wrap;
}
#deals
{
width:50%;
display:flex;
justify-content: space-between;
flex-flow:row-wrap;
}
.sale-item
{
margin:2rem 0;
display:flex;
flex-flow:column;
align-items:center;
}
.sale-item > img
{
order:-1;
align-self:center;
height:auto;
padding:0 2rem;
}
.sale-item p
{
font-family:Arial;
font-size:13px;
color:#000000;
}
.advantage
{
width:35%;
background:#EBECED;
}
.adw-row
{
margin:2rem 3rem;
}
.new
{
text-transform:uppercase;
font-family:Arial;
font-weight:700;
background:#000000;
color:#ffffff;
padding:5px 5px;
text-align:center;
}
.header-class
{
padding:0 3rem;
text-transform:uppercase;
font-weight:700;
font-family:Arial;
font-size:1.5rem;
}
.header-class-two
{
padding:0 3rem;
text-transform:uppercase;
font-family:Arial;
color:lightgray;
font-size:1.1rem;
}
.home-text
{
padding: 2rem 3rem 0;
font-family:Arial;
color:lightgray;
min-height:140px;
font-size:1.2rem;
}
a tu są zdjęcia do tego projektu
0
A czy możesz wrzucić to na http://jsfiddle.net? Tak będzie nam łatwiej.
0
Czemu nie
0
Już się robi
2
Kod nie jest moim zdaniem optymalny, ale w celu rozwiązania Twojego problemu, tak na szybko – dodaj flex-wrap: wrap; w tej regule:
#deals {
width: 50%;
display: flex;
justify-content: space-between;
flex-flow: row-wrap;
flex-wrap: wrap;
}
PS. Domyślna wartość wrap to nowrap, czyli – nie zawijać (oczywiście zakładając, że jest ustawione display: flex;). Tutaj dokładniej: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
@cerrato nie masz mi za złe?
0
A jest jakiś inny sposób na rozwiązanie tego problemu. Nie mówie że to jest złe ale to chodzi mi głównie o css
0
chodzi mi głównie o css
No ale przecież flex to jest CSS...
0
próbowałem z float ale nie chce za bardzo działać
0
cerrato napisał(a):
chodzi mi głównie o css
No ale przecież
flexto jest CSS...
no dobra. A może ty byś lepiej napisał bo masz większe doświadczenie
0
piotrek1998 napisał(a):
próbowałem z float ale nie chce za bardzo działać.
Ok. Tylko w którym miejscu dać float. Bo problem polega głównie na tym że podczas zmiany rozmiaru okna przeglądarki te 3 zdjęcia zamiast zmniejszać się wraz ze zmianą rozmiaru okna przeglądarki nie zmieniają swoich rozmiarów tylko są stałe nie zmieniają się pozostają w tym samym miejscu. I chodzi mi o to żeby te zdjęcia zmieniały swój rozmiar jak zmieniam rozmiar okna przeglądarki
0
piotrek1998 napisał(a):
cerrato napisał(a):
chodzi mi głównie o css
No ale przecież
flexto jest CSS...
no dobra. A może ty byś lepiej napisał bo masz większe doświadczenie.
Chodzi o brak responsywności 3 zdjęć które sie wyświetlają obok siebie. Zmieniam rozmiar okna przeglądarki to one pozostają niezmienne to znaczy ich wysokość się nie zmienia. Kumasz o co chodzi czy nie do końca ?
2
W następującej regule należy dodać width: 33%; (ogólnie chodzi o to, by szerokość elementu <img> była zależna od rozmiaru strony lub któregoś swojego kontenera):
.sale-item>img {
order: -1;
align-self: center;
height: auto;
padding: 0 2rem;
width: 33%;
}
Opcjonalnie można usunąć flex-wrap: wrap; – wtedy zmniejszanie się będzie zawsze działać. Jeśli się tego nie usunie, to wydaje się, że zawijanie ma pierwszeństwo przed zmniejszaniem, więc najpierw będzie się zawijać, a potem – w przypadku braku miejsca – zdjęcia będą się zmniejszać. Czy jest istotne, żeby zawijało się i zmniejszało naraz?
UPDATE: Ponieważ prosiłeś, by przyjrzał się, co można lepiej napisać, przyjrzałem się, ale wyszło na to, że postanowiłem HTML zrobić prawie od nowa. CSS starałem się dopasować tak, by było z grubsza tylko to, co sam ustawiłeś. Dzięki temu, mam nadzieję, wynik jest zbliżony do tego, co było, ale kod jest napisany inaczej (mam nadzieję, że lepiej, ale sam siebie nie mogę oceniać). Całą stronę potraktowałem jako landing page dla sklepu.
W poście partiami wyjaśnię, co zrobiłem (w kolejności: najpierw kod, potem komentarz), a cały kod w jednej części zobacz tutaj: https://jsfiddle.net/y4ofhLdg/149/ Kod podzieliłem bez wycinania czegokolwiek – tak, że jeśli usunąć poniższe komentarze, to kod będzie w całości, jak na JSFiddle.
Kod HTML
Uwagi ogólne: Uznałem, że całość strony (poza poniżej opisanym kontenerem, rzecz jasna) powinna zostać podzielona na dwa bloki: nagłówek – treść umieszczona w elemencie <header> – oraz treść główna – umieszczona w elemencie <main>. Tutaj więcej informacji: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main Ponadto, zdefiniowałem dla wszystkich elementów atrybut class – moim zdaniem łatwiej wtedy nimi zarządzać i kod jest mniej podatny na zmiany. Jednak, jeśli chcesz, możesz dla niektórych elementów usunąć class, a wstawić id (tylko nie zapomnij potem w kodzie CSS tego również zmienić).
<div class="container">
Wprowadzenie kontenera (lub nawet kilku) na całość zawartości elementu body, tak jak i Ty miałeś, jest całkiem w porządku moim zdaniem – umożliwia zastosowanie bardziej skomplikowanego układu elementów dla całej strony.
<header class="advantage">
<h2 class="new-products-title">
Nowości
</h2>
Uznałem, że tekst "Nowości" jest podtytułem, toteż ustawiłem go jako nagłówek drugiego poziomu <h2>. (A jeśli usunąć style CSS, domyślne style nadal pozwalają mu zachować charakter nagłówka, czy też podtytułu). Zmieniłem też nazwę klasy na bardziej intuicyjną wg mnie ("new-products-title"), ale możesz wrócić do poprzedniej ("new").
<h1 class="subtitle1">
Najnowszy design
</h1>
Uznałem, że tekst "Najnowszy design" jest tytułem, toteż ustawiłem go jako nagłówek pierwszego poziomu <h1>. (A jeśli usunąć style CSS, domyślne style nadal pozwalają mu zachować charakter nagłówka, czy też podtytułu). Zmieniłem też nazwę klasy na bardziej intuicyjną wg mnie ("subtitle1"), ale możesz wrócić do poprzedniej ("header-class").
<h2 class="subtitle2">
Gzymsy led, listwy sufitowe, bonie
</h2>
Vide komentarz do tekstu "Nowości" wyżej. Zmieniłem też nazwę klasy na bardziej intuicyjną wg mnie ("subtitle2"), ale możesz wrócić do poprzedniej ("header-class-two").
<p class="home-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</header>
<main>
<section class="deals">
<ul class="sale-items-list">
<li class="sale-item">
<picture>
<img src="https://4programmers.net/Forum/Download/23050" />
</picture>
<p>Gzyms wewnętrzny LG 23-1</p>
</li>
<li class="sale-item">
<picture>
<img src="https://4programmers.net/Forum/Download/23050" />
</picture>
<p>Gzyms wewnętrzny LG 23-1</p>
</li>
<li class="sale-item">
<picture>
<img src="https://4programmers.net/Forum/Download/23050" />
</picture>
<p>Gzyms wewnętrzny LG 23-1</p>
</li>
</ul>
Uznałem, że skoro elementów jest 3 oraz wykazują cechy listy, to należy umieścić je w elemencie ul – czyli nieuporządkowana lista. Na pierwszy rzut oka może to trochę komplikować układ strony (tzn. jego zarządzanie z poziomu CSS), ale ogólnie, myślę, powinno się okazać, że dzięki temu łatwiej nim zarządzać (od razu wiadomo, co jest listą, a co jej elementem itd.). Ponadto, element <img> umieściłem w elemencie <picture> – dzięki temu jest więcej możliwości zmiany obrazka w zależności od potrzeb; więcej szczegółów: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture Chciałem również umieścić element <picture> wraz z opisem, czyli elementem <p>, w elemencie <figure>, ale koniec końców nie jestem pewien, czy ma to sens w tym przypadku – poczytaj i sam zdecyduj: https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element
</section>
</main>
</div>
Kod CSS
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
Ustawienie właściwości margin elementu body na 0 ma sens o tyle, że domyślnie body ma pewien margines (5px?). Osobiście zawsze go usuwam, bo nie lubię domyślnych marginesów w body, ale jeśli Ty wolisz go mieć, to możesz usunąć deklarację tej właściwości. Czcionkę ustawiłem dla wszystkich elementów na stronie taką samą – myślę, że o to Ci chodziło – oraz dodałem część Helvetica, sans-serif. Ta dodana część jest potrzebna o tyle, że nie wszystkie platformy mogą obsługiwać czcionkę Arial ("platforma" tutaj to urządzenie+system operacyjny+przeglądarka). Jeśli wolisz mieć jedynie obsługiwaną czcionkę Arial, nawet w przypadku jej braku – można usunąć.
.container {
display: flex;
flex-direction: row-reverse;
}
Układ całości treści (tutaj: elementów <header> oraz <main>) jest, tak jak i u Ciebie, określony przez model flexbox. Dodałem deklarację właściwości flex-direction ustawioną na row-reverse, a nie na samo row dlatego, ponieważ tutaj układ elementów jest odwrócony (tj. nagłówek jest na prawo, a zawartość na lewo) w stosunku do zazwyczaj używanego układu elementów na stronie (nagłówek jest na lewo/na górze, a zawartość na prawo). Tzn. przynajmniej ja tak to widzę.
.advantage {
/* Zamiast "width: 35%" możesz też ustawić "flex-basis: 0" */
width: 35%;
padding: 0 3rem;
background-color: #EBECED;
}
Tak jak napisałem w komentarzu w kodzie. Właściwość flex-basis określa rozmiar domyślny elementu, zanim dostępna wolna przestrzeń zostanie rozłożona między elementy. Nie jest to w moim odczuciu intuicyjne, więc myślę, że warto o tym poczytać: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Usunąłem padding z poszczególnych dzieci kontenera .advantage (nie wiem, co ta nazwa znaczy, więc taką zostawiłem), a umieściłem go właśnie tutaj – myślę, że tak jest bardziej intuicyjnie, ale jeśli Ty myślisz inaczej, możesz usunąć stąd tę deklarację i ustawić padding dla każdego elementu osobno.
.new-products-title,
.subtitle1,
.subtitle2 {
text-transform: uppercase;
}
Ustawiłem właściwość text-transform dla tytułu oraz obu podtytułów, ponieważ wydaje mi się, że takie było Twoje zamierzenie – wszystkie tytuły i podtytuły powinny być pisane wielkimi literami.
.new-products-title {
background-color: #000000;
color: #ffffff;
padding: 5px 5px;
text-align: center;
margin-top: 2rem;
margin-bottom: 2rem;
}
Zmieniłem właściwość background na background-color, bo nie było innych właściwości – ale jeśli Ty chcesz mieć background, to będzie to w zasadzie to samo pod względem interpretacji w przeglądarce (tak myślę).
.subtitle1 {
font-size: 1.5rem;
padding-top: 0;
padding-bottom: 0;
}
Jako że przeniosłem deklarację właściwości padding-left oraz padding-right do elementu poziom wyżej (tj. do .advantage), to tutaj należało rozdzielić padding na deklaracje właściwości padding-top oraz padding-bottom.
.subtitle2 {
color: lightgray;
font-size: 1.1rem;
padding-top: 0;
padding-bottom: 0;
}
Jako że przeniosłem deklarację właściwości padding-left oraz padding-right do elementu poziom wyżej (tj. do .advantage), to tutaj należało rozdzielić padding na deklaracje właściwości padding-top oraz padding-bottom.
.home-text {
color: lightgray;
font-size: 1.2rem;
padding-top: 2rem;
padding-bottom: 0;
}
Jako że przeniosłem deklarację właściwości padding-left oraz padding-right do elementu poziom wyżej (tj. do .advantage), to tutaj należało rozdzielić padding na deklaracje właściwości padding-top oraz padding-bottom.
.deals {
/* Nie jestem przekonany, czy deklaracja "width: 50%" ma sens na tej stronie */
width: 50%;
}
Jak napisałem w komentarzu – jeśli ma sens wg Ciebie, to w porządku.
.sale-items-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
padding-left: 0;
}
Dodałem deklarację list-style: none, by nie były wyświetlane kropki (bullet points) przy elementach listy. Dodałem też deklarację padding-left: 0, bo domyślnie lista posiada lewy padding (nie sprawdzałem, ile). Obie deklaracje z powodzeniem możesz usunąć, jeśli Ci nie odpowiadają.
.sale-items-list p {
font-size: 13px;
/* Usunąłem "color: #000000", bo taki jest domyślnie */
}
Jak napisałem w komentarzu. Kolor możesz dodać – np. jeśli będzie potrzeba nadpisać go, bo planujesz, że będzie ustawiany w innym miejscu.
.sale-items-list>li {
display: flex;
align-items: center;
/* Zamieniłem "flex-flow" na "flex-direction" */
flex-direction: column;
margin: 2rem 0;
width: 20vw
margin: 0 2rem;
}
Nie musi być tutaj użyty flexbox koniecznie w mojej ocenie, ale też w porządku, jeśli jest. Właściwość flex-flow zmieniłem na flex-direction, ponieważ jest to skrót dla dwóch właściwości, a Ty miałeś jedną wartość column – moim zdaniem lepiej będzie wyglądać, jeśli użyje się konkretnej właściwości do konkretnej wartości.
Teraz istotna sprawa: określiłem tutaj szerokość elementu listy jako 20vw. 1vw to jednostka CSS określająca jedną setną szerokości obszaru viewport ("vw" -> viewport width). Czyli – 20vw to 20% szerokości obszaru viewport. Możesz określić ją jakkolwiek inaczej – w przypadku zdjęć/obrazków – oraz ich kontenerów – osobiście wolałbym nawet ustawiać jednostki bezwzględne (np. px czy in) niż względne (np. vw czy rem). Ale wybierz sam, co będzie najlepsze dla tego typu listy z obrazkami.
.sale-item img {
/* Przeniosłem "padding: 0 2rem" do deklaracji ".sale-items-list>li",
bo tak jest lepiej w moim odczuciu */
width: 20vw;
max-width: 200px;
/* Nie uwzględniłem "order: -1", którą to deklarację Ty ustawiłeś
– myślę, że nie ma ona zastosowania obecnie, skoro jest
"flex-direction: column"; nie uwzględniłem także "align-self: center",
bo wydaje mi się, że nie robiłoby to różnicy – ale jeśli zauważszy,
że robi, to możesz dodać tę deklarację, gdzie potrzeba */
}
Dodałem deklarację właściwości max-width, żeby zdjęcia nie rosły w nieskończoność. ;) Ponownie, możesz ustawić jednostki jakie chcesz, także nie musi być to wartość 200. Może być 300px, może być 100px, może być 5in – co uznasz, że będzie wyglądało dobrze na takiej liście obrazków. Co do order: -1 oraz align-self: center – tak, jak napisałem w komentarzu.
Uwagi końcowe
Mam nadzieję, że nie ma nigdzie nieścisłości ani błędów. Niemniej, jest bardzo prawdopodobne, że miejscami zrobiłem inaczej, niż sam zamierzałeś, albo też pomyliłem się co do tego, co było u Ciebie wcześniej zrobione (jako że zmieniłem układ HTML, trudno było przenieść CSS jeden do jednego). Jeśli masz jakieś uwagi, pisz.