Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Jak zakodować taki układ strony głównej
Forum PHP.pl > Forum > Przedszkole
bartus118
5.01.2015, 15:51:38
Witam,

Chciałbym zrobić taki układ strony. Chciałbym żeby było to zawsze dopasowane do rozdzielczości ekranu, ale mi nie wychodzi.
Zaznaczam ze dopiero się uczę i raczkuję. Domyślnię wlaczę żeby bloki 2-5 były linkami do podstron.

Pomożecie?

Czy da się zrobić zeby bloki z zakresu 2-5 nakłądały się na jedynkę?



Boshi
5.01.2015, 15:55:57
Pokaż co masz
bartus118
5.01.2015, 16:23:38
To co mam na teraz:


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Dokument bez tytułu</title>
  6. <link rel="Stylesheet" type="text/css" href="style.css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11. <div id="NAGLOWEK">
  12. TEST1
  13.  
  14. </div>
  15.  
  16.  
  17. <!-- ################################################################################
    #################### -->
  18.  
  19. <div id="ONAS">
  20. TEST1
  21.  
  22. </div>
  23.  
  24. <!-- ################################################################################
    #################### -->
  25.  
  26. <div id="CZLONKOWIE">
  27.  
  28. TEST2
  29. </div>
  30.  
  31. <!-- ################################################################################
    #################### -->
  32.  
  33. <div id="KONCERTY">
  34.  
  35. TEST3
  36. </div>
  37.  
  38. <!-- ################################################################################
    #################### -->
  39.  
  40. <div id="MUZA">
  41.  
  42. TEST4
  43. </div>
  44.  
  45. <!-- ################################################################################
    #################### -->
  46.  
  47. <div id="KONTAKT">
  48. TEST5
  49.  
  50. </div>
  51.  
  52. <!-- ################################################################################
    #################### -->
  53.  
  54.  
  55. </body>
  56. </html>
  57.  
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. html, body {
  5.  
  6. 	background-color: #CCC;
  7. 	margin: 0;
  8. 	padding: 0;
  9. }
  10.  
  11. #NAGLOWEK {
  12.  
  13. 	height:600px;
  14. 	background-color:#300;
  15.  
  16.  
  17. }
  18.  
  19. #ONAS {
  20.  
  21. 	height:200px;
  22. 	float: left;
  23. 	background-color: #0F0;
  24. }
  25.  
  26.  
  27. #CZLONKOWIE {
  28.  
  29. 	height:200px
  30. 	float: left;
  31. 	background-color: #0FC;	
  32.  
  33. }
  34.  
  35. #KONCERTY {
  36.  
  37. 	height:200px
  38. 	float: left;
  39. 	background-color: #330;	
  40.  
  41. }
  42.  
  43. #MUZA {
  44.  
  45. 	height:200px	
  46. 	float: left;
  47. 	background-color: #C03;	
  48.  
  49. }
  50.  
  51.  
  52. #KONTAKT {
  53.  
  54. 	height:200px
  55. 	float: left;
  56. 	background-color: #00C;	
  57.  
  58.  
  59. }
[HTML] pobierz, plaintext
com
8.01.2015, 01:18:27
po pierwsze słowo klucz media queries, skro ma być responsywne wink.gif
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.