Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Pozycjonowanie elementów
Forum PHP.pl > Forum > Przedszkole
Eldiane
29.04.2013, 11:58:37
Witam, mam taką oto stronę:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<title>Baza danych biblioteki</title>
  4. 	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. 	<style type="text/css">
  6. 		body{
  7. 			background-color: #C4E1E6;
  8. 			margin: 0px;
  9. 		}
  10. 		a{
  11. 			color: black;
  12. 			font-size: 15px;
  13. 		}
  14. 		.menu{
  15. 			background-color: white;
  16. 			width: 10%;
  17. 			height: 60%;
  18. 			position: absolute;
  19. 			top: 20%;
  20. 			left: 7%;
  21. 		}
  22. 		.image{
  23. 			float: left;
  24. 		}
  25. 		.image1{
  26. 			position: relative;
  27. 			top: 15px;
  28. 		}
  29.  
  30. 	</style>
  31. </head>
  32. <body>
  33. <?php
  34. session_start();
  35. if(!isset($_SESSION['prawid_uzyt'])){
  36. 	include 'wylog.php';
  37. }
  38. else{
  39. 	?>
  40. 		<div class="image">
  41. 			<img src="images/book_elem/UpLeftCorn.png"></img>
  42. 		</div>
  43. 		<div class="image1">
  44. 			<img src="images/book_elem/Up.png"></img>
  45. 		</div>
  46. 		<div class="menu">
  47. 			<a href="wylog.php">Wylogowanie</a>
  48. 		</div>
  49. 	<?php
  50. }
  51. ?>
  52. </body>
  53. </html>
[HTML] pobierz, plaintext


I tutaj pojawia się moje pytanie, jeżeli ustawie dwa elementy a mianowicie div'a "image" i div'a "image1" to pomiędzy nimi tworzy się uporczywa przerwa, próbowałem ustawić atrybut padding na 0 px, ale bez efektu.



Można prosić o jakąś poradę?
Z góry dziękuje

Eldiane
lobopol
29.04.2013, 12:06:50
Jakbyś dał to online byłoby łatwiej, a tak to obstawiam białe znaki między img w tych divach daj img w nich float left, albo lepiej wywal te znaczniki i daj tła tym divom
Eldiane
29.04.2013, 12:28:17
oto link do strony http://kolonaukowejazz.hitowy.pl/

Twoje rozwiązania sprawdzę jak będę miał chwilkę, no chyba że jeszcze jesteś w stanie coś wyczarować i podpowiedzieć oneeyedsmiley02.png
in5ane
29.04.2013, 12:51:22
Nie coś takiego:
[HTML] pobierz, plaintext 
  1. 		<div class="image">
  2. 			<img src="images/book_elem/UpLeftCorn.png"></img>
  3. 		</div>
  4. 		<div class="image1">
  5. 			<img src="images/book_elem/Up.png"></img>
  6. 		</div>
[HTML] pobierz, plaintext

Tylko coś na wzór tego:
[HTML] pobierz, plaintext 
  1. <img src="upleftcorn.png" style="float: left;" /><img src="up.png" />
[HTML] pobierz, plaintext

Nie potrzebnie ładujesz to w DIV'y, po drugie znacznik <img> nie ma zamknięcia, dlatego domyka się go slash'em na końcu (albo bez tego slash'a), ale coś takiego, jak </img> nie istnieje.
Arcioch
29.04.2013, 12:52:49
To nie jest powodowane przez CSS tylko przez to że masz źle wycięte zdjęcie UpLeftCorn.png smile.gif
in5ane
29.04.2013, 13:07:17
Cytat(Arcioch @ 29.04.2013, 13:52:49 ) *
To nie jest powodowane przez CSS tylko przez to że masz źle wycięte zdjęcie UpLeftCorn.png smile.gif

Ja nie zerknąłem na to, ale tak czy siak, źle pisze. Trzeba go troszkę nakierować.
viking
29.04.2013, 13:12:51
Ty też źle piszesz smile.gif Zamykanie w takie sposób img, link i br było kiedyś zwykłym hackiem. Natmiast w XML self-closing tag jest czymś oczywistym i nic nie boni zapisywać mi np
<div id="test"/>
Eldiane
29.04.2013, 13:16:21
Zastosowałem się do rad i poprawiłem znaczniki <img>, ale jak już jestem przy temacie pozycjonowania to może zapytam o jeszcze jedną rzecz, a mianowicie jak rozciągnąć pasek "up.png" na całą szerokość strony bez powiększania jego rozmiarów, bo jeżeli dam właściwości width atrybut 100% to obrazek rozciągnie się i powiększy a nie o taki efekt chodzi, czy może lepiej zająć się samym obrazkiem i dopasować go do strony?

http://kolonaukowejazz.hitowy.pl/

Cytat(Arcioch)
To nie jest powodowane przez CSS tylko przez to że masz źle wycięte zdjęcie UpLeftCorn.png


Faktycznie jeden mały pikselik a wiele potrafi zmienić, dzięki za to że w ogóle ktoś to zauważył smile.gif
in5ane
29.04.2013, 13:24:13
Zrób sobie w takim wypadku coś innego. Zrób DIV'a i daj mu background img z repeatem w poziomie. Obrazek zrób normalnej wysokości i szerokości 1px. Nadaj szerokość dla DIV'a (czyli na width: 100%). Voila.
Eldiane
29.04.2013, 13:34:07
Cytat(in5ane @ 29.04.2013, 14:24:13 ) *
Zrób sobie w takim wypadku coś innego. Zrób DIV'a i daj mu background img z repeatem w poziomie. Obrazek zrób normalnej wysokości i szerokości 1px. Nadaj szerokość dla DIV'a (czyli na width: 100%). Voila.



Zastosowałem się do rad ale niestety pewnie znów coś źle napisałem, zawsze pojawiają się problemy przy pozycjonowaniu a chciałbym w końcu zamknąć sprawę i porządnie się tego nauczyć.

Oto strona : http://kolonaukowejazz.hitowy.pl/

dodałem pustego Diva, nadałem mu atrybuty takie jakie powinny być
[CSS] pobierz, plaintext 
  1. .images{
  2. 	background-image:url('images/book_elem/Up.png')
  3. 	background-repeat:repeat-x;
  4. 	width:100%;
  5. 	height:1px;
  6. }
[CSS] pobierz, plaintext


oraz sam Div:
[HTML] pobierz, plaintext 
  1. <div class="images">	
  2. </div>
[HTML] pobierz, plaintext
in5ane
29.04.2013, 13:37:00
Atrybut height nie 1px, a tyle ile ma rzeczywiście wysokość pixeli. Ale tak czy siak ja w ogóle przestałem rozumieć, co Ty chcesz osiągnąć.
Eldiane
29.04.2013, 13:46:11
Dzięki twoim radom w końcu się udało a efekt o jaki chodzi wygląda tak:
http://kolonaukowejazz.hitowy.pl/

Teraz pomęczę się nad resztą obramowania, ale chyba mniej więcej jeśli chodzi o pozycjonowanie to tak ma to wyglądać? Te div'y mają zostać puste?
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.