Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Elastyczne projektowanie
Forum PHP.pl > Forum > Przedszkole
Diesel
12.12.2013, 16:36:55

Chciałbym krok po kroku dojść do efektu który zaprezentowałem na powyższym screenie. Ponieważ kodowania dopiero się uczę, proszę Was o lekcje dobrych praktyk i optymalizacje. Liczę że będziecie mi towarzyszyć w drodze od zera do kodera. Z góry serdeczne wielkie podziękowania wszystkim tym, którzy zdecydują poświecić chwilę swego czasu na mój temat graduated.gif


Założenia layoutu:
- elastyczny dla różnych urządzeń
- marginesy okna przeglądarki na 10%
- header na 100% długości i 55px wysokości
Dalej jak widzicie na screenie, podział na trzy kolumny pierwsza i ostatnia o ustalonej szerokości. Środkowa o szerokości płynnej.

PYTANIE:
1. Czy pod headerem tworzyć trzy divy dla każdej z kolumn i w nich umieszczać kolejne moduły takie jak box profilowy, menu(profil,uprawa, przepisy itd..) Czy jest możliwość układania div'ów bez ich zagnieżdżania by nie działy się cyrki przy skalowaniu.
fate
12.12.2013, 18:10:39
http://forum.php.pl/index.php?s=&showt...t&p=1080176
-gitbejbe-
12.12.2013, 19:19:47
http://www.responsivegridsystem.com/

pobierz paczkę przygotowanych do tego stylów i naucz się z nich korzystać : ) polecam, to chyba najlepsza praktyka
Diesel
12.12.2013, 22:55:18
OK, bloki które są na biało udało mi się ładnie wypozycjonować, pytanie jak wypozycjonować bloki które dorysowałem na niebiesko? Nie mogę tego rozgryźć :|



[HTML] pobierz, plaintext 
  1. body {
  2.  
  3. 	background-color: #e4e4e4;
  4. 	margin-left: 10%;
  5. 	margin-right: 10%;
  6. }
  7.  
  8.   #main {
  9.    min-height: 100px;
  10.    margin: 0px;
  11.    padding: 0px;
  12.    display: -webkit-flex;
  13.    display:         flex;
  14.    -webkit-flex-flow: row;
  15.            flex-flow: row;
  16.    }
  17.  
  18.   #main > article {
  19.    height: 500px;
  20.    margin: 4px;
  21.    border-radius: 3px;
  22.    background: #fff;
  23.    -webkit-flex: 3 1 100%;
  24.            flex: 3 1 100%;
  25.    -webkit-order: 3;
  26.            order: 3;
  27.    }
  28.  
  29.   #main > nav {
  30.    height: 300px;
  31.    margin: 4px;
  32.    border-radius: 3px;
  33.    background: #fff;
  34.    -webkit-flex: 230px;
  35.            flex: 230px;
  36.    -webkit-order: 1;
  37.            order: 1;
  38.    }
  39.  
  40.   #main > aside {
  41.    height: 300px;
  42.    margin: 4px;
  43.    border-radius: 3px;
  44.    background: #fff;
  45.    -webkit-flex:  130px;
  46.            flex:  130px;
  47.    -webkit-order: 4;
  48.            order: 4;
  49.  
  50.  
  51.    }
  52.  
  53.   #blok2 {
  54.    height: 110px;
  55.    margin: 4px;
  56.    padding: 5px;
  57.    border-radius: 3px;
  58.    background: red;
  59.  
  60.    -webkit-flex:  90px;
  61.            flex:  90px;   
  62.    -webkit-order: 2;
  63.            order: 2; 
  64.    } 
  65.  
  66.   header {
  67.    display: block;
  68.    margin: 4px;
  69.    height: 50px;
  70.    border-radius: 3px;
  71.    background: #fff;
  72.  
  73.    -webkit-order: 0;
  74.    order: 0; 
  75.    }
  76.  
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>Fundacja BioKultura</title>
  6. 		<link rel="Stylesheet" type="text/css" href="responsive.css" />
  7.  
  8. 	</head>
  9. 	<body>
  10. 		 <header>header</header>
  11.  
  12. 		 <section id='main'>
  13. 			<article>article</article>
  14. 			<nav>nav</nav>
  15. 			<aside>aside</aside>
  16. 		 </section>
  17.  
  18.  
  19. 	</body>
  20. </html>
[HTML] pobierz, plaintext
mar1aczi
13.12.2013, 10:28:20
Np:
[HTML] pobierz, plaintext 
  1. 		 <section id='main'>
  2. 			<article>article</article>
  3. 			<div id="column_left">
  4. 				<nav>nav</nav>
  5. 				<div class="box">
  6. 					<div id="blok1">blok1</div>
  7. 				</div>
  8. 				<div class="box">
  9. 					<div id="blok2">blok2</div>
  10. 					<div id="blok3">blok3</div>
  11. 				</div>
  12. 			</div>
  13. 			<aside>aside</aside>
  14. 		 </section>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. #main #column_left {
  2.    height: 500px;
  3.    margin: 4px;
  4.    border-radius: 3px;
  5.    background: #fff;
  6.    -webkit-flex: 230px;
  7.            flex: 230px;
  8.    -webkit-order: 1;
  9.            order: 1;
  10. }
  11. nav {
  12.    height: 300px;
  13.    margin: 4px;
  14.    border-radius: 3px;
  15.    background: #fff;
  16.    -webkit-flex: 230px;
  17.            flex: 230px;
  18.    -webkit-order: 1;
  19.            order: 1;
  20. }
  21. .box {
  22. 	width: 100%;
  23. }
  24. #blok1 {
  25. 	height: 30px;
  26. 	border-radius: 3px;
  27. 	background: #afd;
  28. 	margin: 4px;
  29. 	border-radius: 3px;
  30. }  
  31. #blok2, #blok3 {
  32. 	float: left;
  33. 	width: 79px;
  34. 	height: 20px;
  35. 	border-radius: 3px;
  36. }
  37. #blok2 {
  38. 	margin: 4px 2px 4px 4px;
  39. 	background: #aac;
  40. }
  41. #blok3 {
  42. 	margin: 4px 4px 4px 2px;
  43. 	background: #32c;
  44. }
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.