Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS] Modyfikacja pliku css
Forum PHP.pl > Forum > Przedszkole
nighttrain
23.05.2011, 11:02:03
Witam

Chciałbym poprosić o pomoc w modyfikacji pliku css mojej strony, otóż kiedyś, gdy tworzyłem stronkę robiłem wszystko i testowałem pod monitorem 22 calowym, w obecnej chwili sprawdziłem to na ekranie laptopa i panel logowania tzn obrazek po lewej i formularz po prawej od niego widziany normalnie na dużym monitorze, na laptopie o ekranie około 15,5 cala obrazek prawie sie chowa w formularz po prawej, mecze sie, aby jakos to ustawic, ale nie moge dosc co zmienic w pliku css, aby to gralo na malych ekranach jak i na duzych. Bardzo prosilbym o pomoc

Oto kod strony:
[PHP] pobierz, plaintext 
  1. <?php
  2. ob_start();
  3. session_start();
  4. session_register("zalogowany");
  5.  
  6. if(empty($_SESSION["zalogowany"]))$_SESSION["zalogowany"]=0;
  7.  
  8. mysql_connect("localhost", "root", "haslo")or die("Nie można nawiązać połączenia z bazą");
  9. mysql_select_db("users")or die("Wystąpił błąd podczas wybierania bazy danych");
  10.  
  11. function ShowLogin($komunikat=""){
  12. 	echo "$komunikat<br>";
  13.         echo "<div id='login'>";
  14.         echo "<h2>Panel logowania<small>zaloguj</small></h2>";
  15. 	echo "<form action='index.php' method=post>";
  16.         echo "<label for='name'>Login: </label>";
  17. 	echo "<input type=text name=login><br>";
  18.         echo "<label for='pwd'>Hasło: </label>";
  19. 	echo "<input type=text name=haslo><br>";
  20. 	echo "<input type=submit id='submit' value='Login'>";
  21. 	echo "</form>";
  22.         echo "</div>";
  23. 	//echo "Jeśli nie jesteś zarejestrowany, <a href='rejestruj.php'>tu znajdziesz formularz</a>";
  24. }
  25.  
  26. ?>
  27. <!DOCTYPE html
  28. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  29. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  30. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  31. <head>
  32.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  33.         <link href="css/default.css" rel="stylesheet" type="text/css" />
  34. 	<title>Strona główna</title>
  35. </head>
  36. <body>
  37. <div id="obrazek">
  38.     <img src="images/page.large.png" alt="" />
  39. </div>
  40. <?php
  41. if($_GET["wyloguj"]=="tak"){
  42.     $_SESSION["zalogowany"]=0;
  43.     echo '<script type="text/javascript" src="skrypty_java/wylogowano.js"></script>';
  44. }
  45. if($_SESSION["zalogowany"]!=1){
  46. 	if(!empty($_POST["login"]) && !empty($_POST["haslo"])){
  47. 		if(mysql_num_rows(mysql_query("select * from users where user_login = '".htmlspecialchars($_POST["login"])."' AND user_haslo = '".htmlspecialchars($_POST["haslo"])."'"))){
  48. 			header("refresh:1;url=menu.php");
  49. 			$_SESSION["zalogowany"]=1;
  50. 			}
  51. 		else echo '<script type="text/javascript" src="skrypty_java/loginfailed.js"></script>';
  52. 		}
  53. 	else ShowLogin();
  54. }
  55. else{
  56.  
  57. }
  58. ?>
  59. </body>
  60. </html>
  61. <?php mysql_close(); ?>
[PHP] pobierz, plaintext


teraz plik css:
[PHP] pobierz, plaintext 
  1. body {
  2. font-family: helvetica, arial, sans-serif;
  3. background: #e3e3e3;
  4. margin: 150px auto;
  5. /*margin-left: 150px;*/
  6.  
  7. }
  8.  
  9. #login {
  10.     margin-top: 40px;
  11. text-align: center;
  12. background: #e3e3e3 url(../images/whiteGradient.png) no-repeat top left; 
  13. border: 1px solid #CFCFCF;
  14. height: 360px;
  15. _height: 330px;
  16. width: 705px;
  17. position: absolute;
  18. left: 43%;                      /* manipuluję od lewej dla całego konteneru login - przesuwajka */    
  19. /*margin-left: -352px;
  20. top: 50%;
  21. margin-top: -165px;
  22. -moz-border-radius-bottomright: 30px;
  23. -webkit-border-bottom-right-radius: 30px;
  24. _height: 100%;  IE FIX */
  25. }
  26.  
  27. #obrazek {
  28.     margin-top: 61px;
  29. text-align: center;
  30. height: 360px;
  31. _height: 330px;
  32. width: 705px;
  33. position: absolute;
  34. left: 12.5%;                   /* manipuluję od lewej dla całego konteneru z obrazkiem - przesuwajka */
  35. /*margin-left: -352px;
  36. top: 50%;
  37. margin-top: -165px;
  38. -moz-border-radius-bottomright: 30px;
  39. -webkit-border-bottom-right-radius: 30px;
  40. _height: 100%;  IE FIX */
  41. float:left;
  42. }
  43.  
  44. h2 {
  45. padding: 15px 0 15px 75px;
  46. _padding-left: 38px;
  47. margin-top: 25px;
  48. font-size: 45px;
  49. color: #8B0D00;
  50. border-top: 1px solid #9F9F9F;
  51. text-indent: -70px;
  52. width: 676px;
  53. height: 73px;
  54. position: relative;
  55. left: -23px;
  56. }
  57.  
  58. label {
  59. font-size: 24px;
  60. }
  61.  
  62. input {
  63. width: 40%;
  64. height: 30px;
  65. position: relative;
  66. top: -4px;
  67. font-size: 20px;
  68. padding: 0 .3em;
  69. color: #555555;
  70. }
  71.  
  72. input#submit {
  73. width: 16%;
  74. font-size: 15px;
  75. margin-left: -108px;
  76. }
  77.  
  78. small {
  79. font-size: 16px;
  80. position: relative;
  81. top: -4px;
  82. color: #292929;
  83. }
  84.  
  85. h4 {
  86. color: #5F5F5F;
  87. font-size: 23px;
  88. }
  89.  
  90. h4.alert {
  91. background-Color: #bfbfbf;
  92. width: 80%;
  93. margin-left: auto;
  94. margin-right: auto;
  95. padding: .4em;
  96. border: 1px dotted white;
  97. font-size: 19px;
  98. line-height: 19px;
  99. position: relative;
  100. -moz-border-radius: 2px;
  101. -webkit-border-radius: 2px;
  102. }
  103.  
  104. span.exit {
  105. position: absolute;
  106. top: 0;
  107. right: 0;
  108. background: #6361DF;
  109. color: #292929;
  110. font-size: 10px;
  111. line-height: 14px;
  112. font-weight: bold;
  113. padding: 0 .3em;
  114. cursor: pointer;
  115. border-left: 1px dotted white;
  116. border-bottom: 1px dotted white;
  117. }
[PHP] pobierz, plaintext


Byłbym bardzo wdzięczny, podejrzewam, że trzeba zmodyfikować sekcję login i obrazek.
Z góry dziekuję

pozdrawiam
kokers
23.05.2011, 11:12:06
masz to w wersji online?

na oko to chyba #login i #obrazek mają po width: 705px; czyli razem 1400 px szerokości skoro jest to jeden div obok drugiego jeszcze position absolute. 7Nie wiem jak u ciebie ale u mnie na laptopie szerokość w rozdzialce to 1280px...
nighttrain
23.05.2011, 11:15:28
właśnie nie mam tego w wersji on line bo mam to wewnatrz sieci nieudostępnione, ale zależy mi, aby to się układało dobrze na różne rozdziałki. Podejrzewam też, że lepiej podawać wartości w %.
kokers
23.05.2011, 12:24:02
najpierw musisz sobie zadać pytanie jak chcesz żeby to wyglądało i wziąć pod uwagę różne rozdzielczości.

możesz np ustawić sobie jakiś kontener, nadać mu szerokość optymalną (np. 800px - do formularza logowania specjalnie dużo nie potrzeba, ale wszystko "zależy") i go wyśrodkować (margin:0 auto), a potem w nim zrobić dwa kontenery mniejsze dać jednego na float:left, drugiego float:right. Ale wszystko zależy jaki layout, jak chcesz żeby się wyświetlało.

Jeśli chcesz żeby był elastyczny to wychodzisz od najmniejszej możliwej rozdzielczości i potem ewentualnie dla tych z większą rozdzielczością coś zmieniasz.

Poczytaj poradniki, tutoriale jak zrobić stronę która będzie wyglądała dobrze w każdej rozdzielczości.
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.