Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS] Problem z wypozycjonowaniem elementów na stronie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
nighttrain
13.04.2011, 12:03:11
Witam

Mam mały problemik, otóż chciałbym, aby inputy oraz submity znalazły się na obrazku, wychodzi mi tak, że obrazek jest na środku, a inputy i submit układa się po lewej stronie...
Czy mógłby ktoś zobaczyć i pomóc?
Oto zdjęcie jak to wygląda:


oto kawałek kodu z index php:
[PHP] pobierz, plaintext 
  1. <div id="login_form">
  2. <h1>Login</h1>
  3. <?php
  4. function ShowLogin($komunikat=""){
  5. 	echo "$komunikat<br>";
  6. 	echo "<form action='index.php' method=post>";
  7. 	echo "<input type=text name=login><br>";
  8. 	echo "<input type=password name=haslo><br>";
  9. 	echo "<input type=submit value='Zaloguj!'>";
  10. 	echo "</form>";
  11. 	echo "Jeśli nie jesteś zarejestrowany, <a href='rejestruj.php'>tu znajdziesz formularz</a>";
  12. }
  13. ?>
  14. </div>
[PHP] pobierz, plaintext


a to plik .css:
[PHP] pobierz, plaintext 
  1. body {
  2. background-color: #f0f0f0;
  3. margin: 0;
  4. padding: 0;
  5. font-family: arial;
  6. }
  7.  
  8. #login_form {
  9.     width:300px;
  10.     height: 200px;
  11.     background: #f0f0f0 url(graphics/login_bg.jpg) repeat-x;
  12.     border: 1px solid white;
  13.     margin: 250px auto 0;
  14.     padding: 1em;
  15.     -moz-border-radius: 3px;
  16.     -webkit-border-radius: 3px;
  17.     padding: 7px  5px  0  5px;
  18. }
  19.  
  20. h1,h2,h3,h4,h5 {
  21.     margin-top: 0;
  22.     font-family: sans-serif;
  23.     text-align: center;
  24. }
  25.  
  26. input[type=text], input[type=password] {
  27.   display:block;
  28.   margin: 0 0 1em 0;
  29.   width: 280px;
  30.   border: 5px;
  31.   -moz-border-radius: 1px;
  32.   -webkit-border-radius: 1px;
  33.   padding: 1em;
  34. }
  35.  
  36. input[type=submit], forma a {
  37.   border: none;
  38.   margin-right: 1em;
  39.   padding: 6px;
  40.   border: 5px;
  41.   text-decoration: none;
  42.   font-size: 20px;
  43.     -moz-border-radius: 4px;
  44.     -webkit-border-radius: 4px;
  45.   background: #348075;
  46.   color: white;
  47.   box-shadow: 0 1px 0 white;
  48.     -moz-box-shadow: 0 1px 0 white;
  49.     -webkit-box-shadow: 0 1px 0 white;
  50. }
  51.  
  52. /* podświetlenie przycisku po najechaniu na niego */
  53. input[type=submit]:hover {
  54.     background: #287368;
  55.     cursor: pointer;
  56. }
[PHP] pobierz, plaintext


Szczerze to kodzik css skopiowałem z jakieś stronki...
askone
13.04.2011, 12:20:45
Hej
Cytat
[PHP] pobierz, plaintext 
  1. <div id="login_form">
  2. <h1>Login</h1>
  3. <?php
  4. function ShowLogin($komunikat=""){
  5. 	echo "$komunikat<br>";
  6. 	echo "<form action='index.php' method=post>";
  7. 	echo "<input type=text name=login><br>";
  8. 	echo "<input type=password name=haslo><br>";
  9. 	echo "<input type=submit value='Zaloguj!'>";
  10. 	echo "</form>";
  11. 	echo "Jeśli nie jesteś zarejestrowany, <a href='rejestruj.php'>tu znajdziesz formularz</a>";
  12. }
  13. ?>
  14. </div>
[PHP] pobierz, plaintext


W powyższym fragmencie kodu masz część kodu html i definicję procedury ShowLogin. Definicja procedury to nie to samo co jej wywołanie... Pytanie brzmi w którym miejscu ją wywołujesz?? Bo odnoszę wrażenie że gdzieś poza
[PHP] pobierz, plaintext 
  1. <div id="login_form">
  2. ....
  3. </div>
[PHP] pobierz, plaintext


ps. Swoją drogą co to za sposób, że statyczny kod HTML ubierasz w funkcję PHP, zamiast go po prostu zdefiniować jako HTML...

Pozdrawiam
nighttrain
13.04.2011, 12:22:53
a mógłbyś pokazać jak by to wyglądało "bez ubierania w PHP"?

tak wyglada caly plik:
[PHP] pobierz, plaintext 
  1. <?php
  2. session_start();
  3. session_register("zalogowany");
  4. if(empty($_SESSION["zalogowany"]))$_SESSION["zalogowany"]=0;
  5.  
  6. mysql_connect("localhost", "root", "qazwsx12")or die("Nie można nawiązać połączenia z bazą");
  7. mysql_select_db("users")or die("Wystąpił błąd podczas wybierania bazy danych");
  8. ?>        
  9. <!DOCTYPE html 
  10. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  11. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  12. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  13. <head>
  14.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  15.         <link href="logowanie.css" rel="stylesheet" type="text/css" />
  16. </head>
  17. <body>
  18. <div id="login_form">
  19. <h1>Login</h1>
  20. <?php
  21. function ShowLogin($komunikat=""){
  22. 	echo "$komunikat<br>";
  23. 	echo "<form action='index.php' method=post>";
  24. 	echo "<input type=text name=login><br>";
  25. 	echo "<input type=password name=haslo><br>";
  26. 	echo "<input type=submit value='Zaloguj!'>";
  27. 	echo "</form>";
  28. 	echo "Jeśli nie jesteś zarejestrowany, <a href='rejestruj.php'>tu znajdziesz formularz</a>";
  29. }
  30. ?>
  31. </div>
  32. <?php
  33. if($_GET["wyloguj"]=="tak")
  34.     {
  35.     $_SESSION["zalogowany"]=0;
  36.     echo "Zostałeś wylogowany z serwisu";
  37.     }
  38.  
  39. if($_SESSION["zalogowany"]!=1){
  40. 	if(!empty($_POST["login"]) && !empty($_POST["haslo"])){
  41. 		if(mysql_num_rows(mysql_query("select * from users where user_login = '".htmlspecialchars($_POST["login"])."' AND user_haslo = '".htmlspecialchars($_POST["haslo"])."'"))){
  42. 			echo "Zalogowano poprawnie. <a href='mainbaza.php'>Przejdź na stronę główną</a>";
  43. 			$_SESSION["zalogowany"]=1;
  44. 			}
  45. 		else echo ShowLogin("Podano złe dane!!!");
  46. 		}
  47. 	else ShowLogin();
  48. }
  49. else{
  50. ?>
  51. Gratulacje! Zalogowałeś się pomyślnie! Możesz przejśc teraz do innych podstron, np. do <a href="mainbaza.php">tej</a>
  52. <br><a href='index.php?wyloguj=tak'>wyloguj się</a>
  53. <?php
  54. }
  55. ?>
  56. </body>
  57. </html>
  58. <?php mysql_close(); ?>
[PHP] pobierz, plaintext
askone
13.04.2011, 12:42:51
A więc tak:
  • w linii 45 masz błąd - W jakim celu robisz echo ShowLogin, skoro już w funkcji masz echo?
  • usuń znacznik zamykający </div> z linii 31
  • w linii 48 przed zamknięciem warunku if dodaj echo "</div>";
  • w linii 51 dodaj przed tekstem </div>
  • Aby zamienić tę funkcję z PHP na statyczny kod HTML trzebaby przerobić logikę jaka została w Twoim kodzie zaimplementowana


Wyjaśnienie:
Modyfikacje w linii 48 służą zamknięciu div login_form w przypadku logowania, modyfikacja w linii 51 służy zamknięciu tego diva w przypadku gdy już user zostanie zalogowany. Mam nadzieję, że wszystko napisałem dobrze i że będzie działać

ps. Dlaczego po zalogowaniu nie robisz automatycznego przekierowania usera na stronę dla zalogowanych tylko wyświetlasz link?

Pozdrawiam
nighttrain
13.04.2011, 12:57:06
ok, działa, ale powiedz mi jeszcze jak wyrównać przycisk do inputów? bo w tej chwili jest bardziej wysunięty na lewo do ramki...
askone
13.04.2011, 13:06:21
Jedynym "winowajcą" może być ustawienie prawego marginesu dla przycisku na wartość 1em przy jednoczesnym ustawieniu tego samego dla inputów na 0. Wyzeruj wartość tego atrybutu dla przycisku powinno być ok.

Pozdrawiam
nighttrain
14.04.2011, 08:38:16
ok, troszkę musiałem nagimnastykować się, ale zrobiłem smile.gif A powiedz mi jakbym chciał obok tego kontenera np wstawić linię pionową i obok niej dalej po lewej zdjecie tej samej długości w pionie?
askone
14.04.2011, 08:52:30
Div login_form musiałby mieć ustawiony styl:
[CSS] pobierz, plaintext 
  1. float: left
[CSS] pobierz, plaintext

Wtedy dajesz za tym divem drugi a w nim obrazek, jako linię pionową wykorzystaj jego lewą krawędź
nighttrain
14.04.2011, 09:08:58
Teraz wyszło tak, że obrazek mam w rogu po lewej, a form_login przy lewej krawędzi na środku, pomógłbyś? Co mam wpisać w css do obrazek_form?
askone
14.04.2011, 10:14:52
Popatrz na ten prosty przykład i postaraj się ustawić podobnie u siebie:
[CSS] pobierz, plaintext 
  1. .centered {
  2. margin: 100px auto;
  3. width: 410px;
  4. }
  5. #login_form {
  6. border: 1px solid red;
  7. width: 200px;
  8. height: 300px;
  9. float: left;
  10. }
  11. #drugi {
  12. border: 1px solid yellow;
  13. margin: auto, 0;
  14. width: 200px;
  15. height: 300px;
  16. float: left;
  17. }
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <div class="centered">
  2. <div id="login_form">
  3. test
  4. </div>
  5. <div id="drugi">
  6. drugi
  7. </div>
  8. </div>
[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.