Dwa divy w artylule

[Hansolo]

Witam,

mam takie pytanko, dwie kolumny w art. (2 div)

<div class="block pink float"></div>
<div class="block blue float"></div>
i css

.block {
width: 50%;
height: 50%;;
}
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }


jak zrobic ze przy wąskim oknie drugi div pójdzie pod pierwszego ?

[siristru]

1. Albo korzystasz z media query break points: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

2. Albo korzystasz z Bootstrapa (tego domyślnego w Joomli czyli 2.3.2):

<div class="row-fluid">
<div class="span6"></div>
<div class="span6"></div>
</div>

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Albo zaimplementujesz Bootstrap 4.

http://getbootstrap.com/docs/4.1/getting-started/introduction/

[Hansolo]

(mam Bootstrapa w templatce)
ale chodzi o prosta tabelkę w 1 artykule Joomli, dwie kolumny-dwa divy, ktore normalnie sa jako dwie komuny równolegle (lewa i prawa) a przy zwężeniu okna, jeden div idzie pod drugi i tyle,
a mam po zwężeniu okna dwa kolumny rownolegle i cienkie (a tak nie chce)
tabelka:

<div style="width: 50%; height: auto; margin: 10px auto; float: left; padding-right: 8px;">
<p>aaaaaaa aaaaaaaaaa aaaaa</p></div>
<div style="width: 50%; height: auto; margin: 10px auto; float: right; padding-left: 8px;">
<p>bbbbbbb bbbbbbbbbb bbbbb</p></div>

jak wpisze zamiast width: 50% np. 400px div prawy idzie pod lewego i o to mi chodzi, ale sa uciete,
chodzi o prosta tabelkę na divach 1 artykule,

[Bazyl]

<div class="row-fluid">
<div class="span6">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="span6">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>

[siristru]

2. Albo korzystasz z Bootstrapa (tego domyślnego w Joomli czyli 2.3.2):

<div class="row-fluid">
<div class="span6"></div>
<div class="span6"></div>
</div>

To jest twoje rozwiązanie, to jest prosta tabelka.
Rozwiązuje sprawę prosto i elegancko - nic nie trzeba więcej pisać. Żadnego css inline.

[Hansolo]

ale to nic nie daje,
chodzi mi o to:

- normalny wygląd:
9485

- i po zwężeniu okna przeglądarki:
9486

[Bazyl]

Link do strony!!!

[siristru]

Jaka nic nie daje znaczy, że na stronie nie używasz Bootstrapa... albo używasz innej wersji niż 2.3.2.
Tak jak pisze Bazyl, bez linka do strony to możemy sobie... :P

[Hansolo]

Bootstrap 3, prosze jest link (https://www.amlegalkancelaria.pl/en/practice-areas-amlegal-law-office)

[Bazyl]

Możesz tam pokzaać tan kod:

<div class="row-fluid">
<div class="span6"></div>
<div class="span6"></div>
</div>

Bo go nie ma

[Hansolo]

bo nie dzialal, ale juz dalem ponownie, prosze,
ale wtedy dwie kolumny - divy zawsze sa jeden pod drugim,

[Bazyl]

Teraz jest ;-)

Nie cierpię bootstrapa i zaufałem odpowiedzi @siristru ;-)

Zamiast span6 wstaw col-xs-6.
Sam jestem ciekaw...

[Hansolo]

dalem ta klase i no nie ma, sa dwie kolumny po zwerzeniu nadal obok siebie tzn divy..,

[siristru]

Bootstrap 3 używa innych klas: https://getbootstrap.com/docs/3.3/css/

Zatem będzie to:


<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-6">Kolumna 1</div>
<div class="col-sm-12 col-lg-6">Kolumna 2</div>
</div>
</div>

Na tabletach wzwyż będą dwie kolumny, na komórce jedna pod drugą.

- - - Updated - - -

Tutaj na komórce: http://prntscr.com/lnocnm
Tutaj na kompie: http://prntscr.com/lnod1g

[Hansolo]

jest, dziala :) dzieki Panowie :),


jeszcze ma pytanko co do menu, jesli mozecie pomoc,
Mobilne menu wyskakuje przy malym juz oknie, jak zrobic zeby wlaczalo sie jedna wczesniej czyli przy zwężeniu okna juz ok. 1280px zamiast normalnego menu ktore jest juz za dlugie
(a pozycje moge dodawac jeszcze a juz jest ciasno)

pomożecie może?

[siristru]

W tym wypadku pokombinuj ze stylami bo "łamanie" menu jest częścią domyślnych ustawień Bootstrapa i ewentualnie je musiał byś modyfikować. Zdecydowanie lepiej będzie albo skomasować menu albo pobawić się stylami (zmniejszyć czcionkę lub paddingi).

[Hansolo]

no wlasnie nie moge zmieniać juz projektu,
moze daloby sie prosto zmienic ze przy juz 1285px wlacza sie Mobile menu a nie przy 768px ?
podejrzewam ze wystarczy zamienić te wartości ale nie moge tego znalesc (css-ach) tzn. jest coś tam jest ale nie dziala,

[Hansolo]

a moze media query uzyc,
bo chodzi wlasciwie o tablety, 1024x768, dalbym klasę do css-a do mediaquery tylko nie moge znaleźć tej odpowiedzialnej za włączenie Mobilnego menu,
Waczam i wylaczam w podglądzie komórkowym w firebugu rózne klasy dotyczace mobilnego menu ale nie moge go wylaczyc,
ktos wie ktore to?

[siristru]

Tutaj masz rozwiązanie dla różnych wersji Bootstrapa, między innymi dla 3.x

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

[Hansolo]

tylko ze wtedy znika przy (max-width: 1200px) menu a nie pojawia sie te mobilne,
mobilne pojawia sie dopiero przy max-width: 767px czyli miedzy 767px a 1200px - nie ma zadnego menu, a do 1200px chce mobile,

[siristru]

To coś źle zrobiłeś. Zobacz sobie demko: https://www.bootply.com/120604

[Hansolo]

ale nie chce od nowa robic menu pod bootstrapa, tylko szukam ccsa odpowiedzianego zeby 768 do 1200px bylo menu mobline,
a wystarczy moze prze mediaQ ?:

@media only screen and (min-device-width : 1200px) {
{ tu klasa poujawniania sie tylko mene mobilnego}
link (https://www.amlegalkancelaria.pl/en/amlegal-law-office)

tylko ze juz 24h siedze nad jej szukaniem, nie wiem, nie umiem tego poprawic na tablety,

[Hansolo]

nie umiem zaimplementować tego https://www.bootply.com/120604
na mojej stronie, jesli przy 767px zwężając myszka okno robi sie kolaps menu na mobilne (na PC) to znaczy sie ze wystarczy ta wartość zmienić na np 1200px
tylko ze to mi nie dziala, moze nie te klasy, sam nie wiem,
w template.css w lini 957 jest:

@media (max-width: 767px) {
.collapse-button .bd-menuitem-26:not(.bd-mega-item) > .bd-grid-item > a,
.collapse-button .bd-menuitem-26:not(.bd-mega-item) > .bd-grid-item > a:link,
.collapse-button .bd-menuitem-26:not(.bd-mega-item) > .bd-grid-item > a:visited {
text-transform: none;
}

moze ktos mi pomoze inny?

[siristru]

text-transform: none; nie ma żadnego związku z kolapsem menu :)

Masz rozwiązanie na tacy... nie umiesz go zastosować... oznacza to, że musisz się nieco podszkolić... kropla drąży skałę.
Rozwiązanie działa na 100% - masz nawet działający przykład.

Dajemy wędkę - nie rozdajemy ryb :D

[Hansolo]

Nie chce przerabiać całego menu od nowa, sądzę ze wystarczy dodać czy zmienić któraś classe, ale już nie wiem którą, przecież to menu robi kolaps przy 768px, a chce żeby robilo przy 1280px już, tyle.
Siedzę już nad tym 3 dni, ok chyba ten szczegół komuś zlecę,
Pozdrawiam,