Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][CSS] Problem z wypozycjonowaniem elementów na stronie
nighttrain
post
Post #1





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 2.06.2010

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

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...
Go to the top of the page
+Quote Post
askone
post
Post #2





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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

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


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
nighttrain
post
Post #3





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 2.06.2010

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

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


Ten post edytował nighttrain 13.04.2011, 12:26:32
Go to the top of the page
+Quote Post
askone
post
Post #4





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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

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


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
nighttrain
post
Post #5





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 2.06.2010

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

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...
Go to the top of the page
+Quote Post
askone
post
Post #6





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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

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


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
nighttrain
post
Post #7





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 2.06.2010

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

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?
Go to the top of the page
+Quote Post
askone
post
Post #8





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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

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ź


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
nighttrain
post
Post #9





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 2.06.2010

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

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?
Go to the top of the page
+Quote Post
askone
post
Post #10





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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

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


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 04:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn