Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Przesuwający się header oraz footer przy zmianie rozdzielczości
Forum PHP.pl > Forum > Przedszkole
krzesik
10.04.2014, 21:14:41
Witam, mam problem przy zmianie rozdzielczości z serwisem, przesuwa mi się się nagłówek oraz stopka w prawo (tak jakby zachowywały nadar zadany margines) nie mogę tego znaleść w css, pomocy.
[HTML] pobierz, plaintext 
  1. .header
  2. {
  3. 	height:140px;
  4. 	background:url('head.png') no-repeat;
  5. 	width:1200px;
  6. 	margin:auto;
  7. 	margin-top:10px;
  8.     display:block;
  9. }
  10. .header span
  11. {
  12. 	display:block;
  13. 	font-size:70px;
  14. 	font-family:Arial, Helvetica, sans-serif;
  15. 	color:#ffffff;
  16. 	padding-top:25px;
  17. 	margin-left:50px;
  18. }
  19. .foot
  20. {
  21. 	width:1200px;
  22. 	margin:auto;
  23. 	margin-bottom:30px;
  24. 	text-align:left;
  25.     font-size:12px;
  26.     color:#ffffff;
  27.     height:89px;
  28.     padding-left:50px;
  29. 	padding-top:25px;
  30. 	background:url('foot.png') no-repeat center;
  31. }
  32. .foot a,.foot
  33. {
  34. 	color:#cccccc;
  35. }
  36. .foot:hover a,.foot:hover
  37. {
  38. 	color:#dddddd;
  39.  
  40. }
  41. .foot a:hover
  42. {
  43. 	color:#ffffff;
  44.     margin-left:50px;
  45. }
  46. body
  47. {
  48. 	background:#000000 url('bg.jpg') top center no-repeat fixed;
  49. 	font-family:Verdana, Geneva, sans-serif;
  50. 	margin:0px;
  51. 	padding:0px;
  52. }
  53.  
[HTML] pobierz, plaintext
trueblue
10.04.2014, 21:17:15
Ustawiłeś na sztywno 1200px dla .header i .foot
Przy mniejszej rozdzielczości będą wypychać szerokość na prawo.
krzesik
11.04.2014, 07:09:22
więc mam ustawić na auto; ?

ma ktoś jeszcze jakieś pomysły?
mar1aczi
11.04.2014, 07:39:14
Pokaż jak masz to poskładane w htmlu.
krzesik
11.04.2014, 20:01:28 
[HTML] pobierz, plaintext 
  1. ......
  2. <body>
  3.     <div class="site">
  4.         <div class="header">
  5.             <span><img src="logo.png" alt="Logo" /></span>
  6.         </div>
  7.         <div class="clean"></div>
  8.         <div class="content">
  9.             <div class="menu_v">
  10.             <div class="menu_v_top">Menu</div>
  11.             <hr />
  12.             <div class="menu_v_ctn">
  13.                 <p align="right">
  14.                 <a href="wyloguj.php"><font color="red">Wyloguj</font></a>
  15.                 </p>
  16. .......
  17. .......
  18.             </div>
  19.             </div>
  20.             <div class="content_ctn">
  21.                                 <h2>Panel Administracyjny</h2>
  22. <div class="paragraphe">
  23. <br />
  24. .................
  25. .................
  26.  
  27. .................
  28.  
  29. </div>
  30.             </div>
  31.         </div>
  32.         <div class="clean"></div>
  33.  
  34.         <div class="foot">
  35. napis w stopce
  36.         </div>
  37.  
  38.     </div>
  39. </body>
  40. </html>
  41.  
  42.  
  43.  
  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.