Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Elastyczne projektowanie, Pomoc w nauce responsive design
Diesel
post
Post #1





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 9.10.2013

Ostrzeżenie: (0%)
-----


(IMG:http://biokultura.home.pl/design/9r1k.jpg)
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 (IMG:style_emoticons/default/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.

Ten post edytował Diesel 12.12.2013, 22:56:34
Go to the top of the page
+Quote Post
fate
post
Post #2





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


http://forum.php.pl/index.php?s=&showt...t&p=1080176
Go to the top of the page
+Quote Post
--gitbejbe--
post
Post #3





Goście







http://www.responsivegridsystem.com/

pobierz paczkę przygotowanych do tego stylów i naucz się z nich korzystać : ) polecam, to chyba najlepsza praktyka
Go to the top of the page
+Quote Post
Diesel
post
Post #4





Grupa: Zarejestrowani
Postów: 36
Pomógł: 0
Dołączył: 9.10.2013

Ostrzeżenie: (0%)
-----


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źć :|

(IMG:http://img29.imageshack.us/img29/8619/v07x.jpg)

  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.  


  1. <!doctype html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Fundacja BioKultura</title>
  5. <link rel="Stylesheet" type="text/css" href="responsive.css" />
  6.  
  7. </head>
  8. <body>
  9. <header>header</header>
  10.  
  11. <section id='main'>
  12. <article>article</article>
  13. <nav>nav</nav>
  14. <aside>aside</aside>
  15. </section>
  16.  
  17.  
  18. </body>
  19. </html>


Ten post edytował Diesel 12.12.2013, 22:57:30
Go to the top of the page
+Quote Post
mar1aczi
post
Post #5





Grupa: Zarejestrowani
Postów: 731
Pomógł: 141
Dołączył: 9.05.2011
Skąd: śląskie

Ostrzeżenie: (0%)
-----


Np:
  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>

  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. }

Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 15.10.2025 - 21:26