Pozycjonowanie elementów DIV


(andrewi) #1

Witam.
Od kilku lat prowadzę stronę Gminnego Ośrodka Kultury w Książkach - www.gokksiazki.pl . Od jej założenia znacznie zmieniły się standardy jeśli chodzi o wygląd stron, szerokość całkowitą i rozmieszczenie elementów. W związku z tym chciałbym poszerzyć stronę tak, aby zmieścić conajmniej dwa divy z treścią obok siebie - rozrysowałem to na rysunku poglądowym, który można zobaczyć o tutaj - https://1drv.ms/u/s!AixAPVWhFh4fkhdbgwjAlarpIsLq . Pojawił się jednak problem - kompletnie nie wiem jak to zakodować w CSS bo elementy DIV nie dość, że mają różne długości to jeszcze części z nich można rozwijać przez skrypt w JS. Pomożecie mi to jakoś inteligentnie i bezstresowo rozwiązać? :slight_smile:


(GioWDS) #2

Zmieniły się też normy dotyczące projektowania interfejsów stron - zobacz nawet dobreprogramy.
Obecnie chyba, żadna strona nie korzysta z układu [pasek boczny], [treść], [pasek boczny], bo ani to wygodne, ani ładne.
Na Twoim miejscu zacząłbym od przemyślenia jak to ma wyglądać na telefonach, następnie na tabletach i na samym końcu jak na komputerach - przebudowywać stronę i nie dostosować jej do wersji mobilnych to już sadyzm.
Nie jestem pewien czy dobrze zrozumiałem “rysunek”, ale prawdopodobnie wystarczy Ci dowolny grid.


#3

Według mnie Twój nowy wzór z divami, nie jest dobry. Teraz już tak się nie robi. Skopiuj to co masz poniżej i masz grida taki jak chcesz - ale tak się już nie robi,

 <!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.container {
				width: 960px;
				overflow: hidden;
				margin: 0 auto;
			}
			.box {
				width: 25%;
				padding: 2%;
				float: left;
				box-sizing: border-box;
			}
			.col-1 {
				background-color: grey;
				height: 300px;
			}
			.col-2 {
				background-color: yellow;
			}
			.col-2-1 {
				width: 100%;
				height: 100px;
				background-color: white;
				margin-bottom: 15px;
			}
			.col-2-2 {
				width: 100%;
				height: 100px;
				background-color: aqua;
			}
			.col-3 {
				background-color: green;
			}
			.col-3-1 {
				width: 100%;
				height: 100px;
				background-color: white;
				margin-bottom: 15px;
			}
			.col-3-2 {
				width: 100%;
				height: 100px;
				background-color: aqua;
			}
			.col-4 {
				background-color: grey;
				height: 400px;
			}
		</style>

    </head>
    <body>
<div class="container">
	<div class="col-1 box">
		Menu lewe
	</div>
	<div class="col-2 box">
		<div class="col-2-1"></div>
		<div class="col-2-2"></div>
	</div>
	<div class="col-3 box">
		<div class="col-3-1"></div>
		<div class="col-3-2"></div>
	</div>
	<div class="col-4 box">
		Menu prawe
	</div>
</div>
    </body>
</html>

(andrewi) #4

A jak się teraz robi? :slight_smile:


#5

Wejdź na strony które sprzedają szablony strom i pooglądaj np. themeforest.


(sebkor96) #6

Proponowałbym użycie Bootstrap’a w celu odświeżenia witryny zgodnie ze standardami RWD (Responsive Web Design). Framework, który Ci proponuję jest o tyle dobry, że jest popularny i bardzo łatwy w nauce. Jak pojmiesz konwencję siatki i kolumn to już reszta pójdzie z górki. :slight_smile: Obrazki można zastąpić gradientami generowanymi przez przeglądarki:

CSS Gradient Generator

Nawiązując do Twojego pytania, jak się teraz robi strony. Większość nowoczesnych stron dąży do tego aby nagłówek zawierał jak najmniej linków bo wygląda to estetycznie i nie dezorientuje użytkownika. Widzę że menu z lewej jest zależne od opcji wybranej w menu głównym, tu można byłoby użyć dropdown’y - fajne rozwiązanie, które pomoże Ci zaoszczędzić miejsca na stronie. Kolumna z prawej to content nadający się na oddzielne podstrony, nagłówek lub stopkę. W przyszłości pomyślałbym na Twoim miejscu nad użyciem ajax’a do niektórych rzeczy na stronie, ponieważ funkcjonalnością jest troszeczkę w tyle.


https://kursbootstrap.pl/

Jeżeli będziesz potrzebować jakichś konkretnych rad to śmiało pisz PW bo uwielbiam Bootstrap’a i wielę będę mógł Ci doradzić w zakresie pracy z nim. Życzę powodzenia i trzymam kciuki. :slight_smile:


(andrewi) #7

Dzięki za radę, być może skorzystam jak trochę rozluźni mi się grafik. Chciałem iść trochę na łatwiznę i próbowałem z CMS’ami - Joomla, WordPress… ale w każdym czułem się na każdym etapie ograniczany. Szablony, które w teorii były darmowe, jak już jakiś znalazłem, w praktyce okazywały się albo nie do końca przetłumaczone albo zawierające dodatkowe płatne funkcje, które jednak były dla mnie niezbędne. W końcu coś będę musiał w tym temacie podziałać bo mimo że moim zleceniodawcom te strony pasują, to ja mam jednak coraz mniej czasu żeby bawić się html’em z każdą pierdołą :wink:


(sebkor96) #8

Z CMS’ów tylko Wordpress jest “całkiem” elastyczny a rozbudowana i czytelna dokumentacja ułatwiają pracę z tym systemem. Jeżeli nie chcesz używać czyichś rozwiązań to proponuję framework Codeigniter, który może nie jest jakiś super wypasiony, ale super sprawdza się w budowaniu stron takich jakie Ty tworzysz.