Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html/css]position:absolute problem z div'em
Forum PHP.pl > Forum > Przedszkole
hiszpaniec
6.05.2007, 14:59:05
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
Daimos
6.05.2007, 16:43:07
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
hiszpaniec
6.05.2007, 22:20:17
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.
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.