Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [html/css]position:absolute problem z div'em
hiszpaniec
post 6.05.2007, 14:59:05
Post #1





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 6.01.2007

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

W pliku HTML zależy mi na osiągnięciu danej odległości pól formularza od lewej krawędzi diva, ale stałej odległości, więc na pomoc przychodzi pozycjonowanie absolutne. Lecz po ustawieniu parametru 
[HTML] pobierz, plaintext 
  1. position: absolute; left:400px
[HTML] pobierz, plaintext
dla inputa pole zatwierdź wystaje poza diva, w którym umieszczony jest cały input.
Oto cały HTML i CSS:
[HTML] pobierz, plaintext 
  1. <body>
  2. 	<div id="baner"></div>
  3. 	<div id="menu">
  4. 		<ul>
  5. 			<li><a href="index.php">Strona Główna</a></li>
  6. 			<li><a href="register.php">Rejestracja</a></li>
  7. 			<li><a href="login.php">Logowanie</a></li>
  8. 			<li><a href="upload.php">Upload</a></li>
  9. 			<li><a href="logout.php">Wyloguj</a></li>
  10. 		</ul>	</div>
  11. 	<div id="content">
  12. 		<form action="verifylogin.php" method="post" onsubmit="if (sprawdz(this)) return true; return false">
  13. 			<p>Podaj login : <input type="text" name="login" /><br /><br />
  14. 			Podaj hasło : <input type="password" name="pass" /><br /><br />
  15. 			<input type="submit" value="zatwierdź" /></p>
  16. 		</form>
  17. 	</div>
  18.  
  19. </body>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. /*założenia wstępne*/
  2. html,body {
  3. height: 100%;
  4. width: 100%;
  5. margin: 0px;
  6. background-color: #bfbfbf;
  7. font-family: Arial;
  8. }
  9. html, body, p, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, img, a, table {
  10. padding: 0;
  11. margin: 0;
  12. border: none;
  13. }
  14. #baner {
  15. height: 200px;
  16. width: 100%;
  17. background-repeat: no-repeat;
  18. background-position: center top;
  19. background-image: url(../gfx/baner.jpg);
  20. }
  21. #menu {
  22. float: left;
  23. height: 350px;
  24. width: 140px;
  25. background-repeat: no-repeat;
  26. background-position: left top;
  27. background-image: url(../gfx/menu.jpg);
  28. }
  29. #menu ul {
  30. font-size: 14px;
  31. font-weight: bold;
  32. padding-left: 20px;
  33. }
  34. #menu li {
  35. padding-top: 15px;
  36. }
  37. #content {
  38. background-color: gray;
  39. padding-left: 200px;
  40. }
  41. #content input {
  42. width: 150px;
  43. position: absolute; left: 400px;
  44. }
  45. #content button {
  46. width: 150px;
  47. }
  48. .verification {
  49. display: inline;
  50. }
  51. #content div.form {
  52. float: right;
  53. }
  54. #content button.form {
  55. float: left;
  56. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Daimos
post 6.05.2007, 16:43:07
Post #2





Grupa: Zarejestrowani
Postów: 1 319
Pomógł: 118
Dołączył: 26.11.2003
Skąd: Lublin

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

jezeli pozycjonujesz absolutnie, to ten div nie istnieje w innych warstwach (moze rozumiesz moje myslenie biggrin.gif)
jest on odrebnym, absolutnie wypozycjonowanym divem, dlatego tak sie dzieje
musisz sprobowac inaczej go przesunac, margin-left


--------------------
scriptun.com. Startup z poradnikami do gier ttp.zone i ttpzone.pl
Go to the top of the page
+Quote Post
hiszpaniec
post 6.05.2007, 22:20:17
Post #3





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 6.01.2007

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

Ale jeżeli zrobię margin: left to wtedy zależnie od treści inputy będa przesunięte. Tam gdzie będzie napis przed inputem "imię" input będzie o ileś miał odstęp od tego napisu a jak dam napis w 2 lini adres zamieszkania to ten input będzie dalej przesunięty względem tego pierwszego, a na tym właśnie mi zależy.

Ten post edytował hiszpaniec 6.05.2007, 22:21:32
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Wersja Lo-Fi Aktualny czas: 14.07.2025 - 01:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn