Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Pozycjonowanie obrazu
Forum PHP.pl > Forum > Przedszkole
Otto
2.04.2010, 20:10:31
Witam mam pewien problem mianowicie buduje szablon w którym jest dużo grafiki jako jego elementów i niestety gdy próbuję ustawić jeden obraz by znajdował się 27px niżej działa ale wszystkie kolejne obrazy także przesuwają się niżej. Streszczając chodzi mi o przesuniecie jednego obrazu aby nie miało to wpływu na inne.

Dodam że szukałem po internecie i niestety nie znalazłem...
Pawel_W
2.04.2010, 20:12:20
position: relative smile.gif

EDIT:
albo inaczej,
http://www.kurshtml.boo.pl/css/relatywne,pozycjonowanie.html
luck
2.04.2010, 20:29:32
A ja myślę, że
Kod
position: absolute;
winksmiley.jpg
Pawel_W
2.04.2010, 20:30:19
Cytat(luck @ 2.04.2010, 21:29:32 ) *
A ja myślę, że
Kod
position: absolute;
winksmiley.jpg

pozycjonowaniem absolutnym chcesz przesuwać coś o pare px niżej? powodzenia smile.gif

sama nazwa wskazuje które do czego służy smile.gif
Otto
2.04.2010, 20:34:07
Niestety to nie działa dla przykładu pokaże w obrazkach

Ma wyglądać tak a wygląda tak

Zaznaczyłem na czerwono przejścia miedzy obrazkami, jak widać dwa środkowe(dolne duże) są za wysoko o 27px i najeżdżają na dwa obrazki (górne małe) a oto kod

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Szablon</title>
  4. 	<link rel="Stylesheet" type="text/css" href="style.css" />
  5. </head>
  6. <body>
  7. <div id="header">
  8. 	<div id="01"><div>
  9. 	<div id="slogan"><div>
  10. 	<div id="logo1" ><div>
  11. 	<div id="data"><div>
  12. 	<div id="logo2"><div>
  13. 	<div id="04"><div>
  14. </div>
  15. ...
[HTML] pobierz, plaintext


oraz

[HTML] pobierz, plaintext 
  1. html, body {
  2. 	background-color: #fff;
  3. 	color: #000;
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7.  
  8.  
  9. /* header */
  10.  
  11. #header {
  12. width: 990px;
  13. }
  14.  
  15. #01 {
  16. background-image: url(Obrazki/pociete_01.jpg);
  17. width: 55px;
  18. height: 247px;
  19. }
  20.  
  21. #slogan {
  22. background-image: url(Obrazki/slogan.jpg);
  23. width: 526px;
  24. height: 27px;
  25. margin-left: 55px;
  26.  
  27. }
  28.  
  29. #logo1 {
  30. background-image: url(Obrazki/logo1.jpg);
  31. width: 526px;
  32. height: 220px;
  33.  
  34. }
  35.  
  36. #data {
  37. background-image: url(Obrazki/data.jpg);
  38. width: 350px;
  39. height: 27px;
  40. margin-left: 526px;
  41. }
  42.  
  43. #logo2 {
  44. background-image: url(Obrazki/logo2.jpg);
  45. width: 350px;
  46. height: 220px;
  47. }
  48.  
  49. #04 {
  50. background-image: url(Obrazki/pociete_04.jpg);
  51. width: 59px;
  52. height: 247px;
  53. margin-left: 350px;
  54. }
  55.  
[HTML] pobierz, plaintext
pedro84
2.04.2010, 20:38:41
Ja tam pozycjonowania relatywnego nie widzę. Może ślepy jestem. Dla elementów, które chcesz obniżyć:
Kod
position:relative;
top:27px;
Otto
2.04.2010, 20:42:47
Nie ma bo usunełem gdyż jeszcze bardziej to mieszało a oto wynik:

http://img28.imageshack.us/img28/5937/wyglada2.jpg

[HTML] pobierz, plaintext 
  1. html, body {
  2. 	background-color: #fff;
  3. 	color: #000;
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7.  
  8.  
  9. /* header */
  10.  
  11. #header {
  12. width: 990px;
  13. }
  14.  
  15. #01 {
  16. background-image: url(Obrazki/pociete_01.jpg);
  17. width: 55px;
  18. height: 247px;
  19. }
  20.  
  21. #slogan {
  22. background-image: url(Obrazki/slogan.jpg);
  23. width: 526px;
  24. height: 27px;
  25. margin-left: 55px;
  26.  
  27. }
  28.  
  29. #logo1 {
  30. background-image: url(Obrazki/logo1.jpg);
  31. width: 526px;
  32. height: 220px;
  33. position:relative;
  34. top:27px;
  35.  
  36. }
  37.  
  38. #data {
  39. background-image: url(Obrazki/data.jpg);
  40. width: 350px;
  41. height: 27px;
  42. margin-left: 526px;
  43. }
  44.  
  45. #logo2 {
  46. background-image: url(Obrazki/logo2.jpg);
  47. width: 350px;
  48. height: 220px;
  49. position:relative;
  50. top:27px;
  51. }
  52.  
  53. #04 {
  54. background-image: url(Obrazki/pociete_04.jpg);
  55. width: 59px;
  56. height: 247px;
  57. margin-left: 350px;
  58. }
[HTML] pobierz, plaintext
Pawel_W
2.04.2010, 20:43:40
z samego .jpg nie wywnioskujemy co zrobiłeś źle, pokaż ten kod po zmianie
krzysztof_kf
2.04.2010, 20:44:49
data i logo 2 ? to są te grafiki kture tak się dzieje ?
Otto
2.04.2010, 20:48:42
Oznakowanie
Pawel_W
2.04.2010, 20:50:05
powiedz mi, czemu tego nie zrobisz jako jednej grafiki? chyba że ja czegoś nie rozumiem...
Otto
2.04.2010, 20:53:09
Ponieważ na slogan i data będzie tekst a logo1 będzie linkiem poza tym chce się dowiedzieć jak to zrobić tak jak jest bo się przyda pewnie nie raz to...
Pawel_W
2.04.2010, 20:58:45
no to ustaw pozycjonowanie relatywne dla headera a resztę sobie na sztywno absolutnie wypozycjonuj...
Otto
2.04.2010, 21:03:47
Ok działa a oto jak to wygląda jakby ktoś czasem natrafił podobny błąd

[HTML] pobierz, plaintext 
  1. html, body {
  2. 	background-color: #fff;
  3. 	color: #000;
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7.  
  8.  
  9. /* header */
  10.  
  11. #header {
  12. width: 990px;
  13. position: relative;
  14. top: 0px;
  15. }
  16.  
  17. #01 {
  18. background-image: url(Obrazki/pociete_01.jpg);
  19. width: 55px;
  20. height: 247px;
  21. }
  22.  
  23. #slogan {
  24. background-image: url(Obrazki/slogan.jpg);
  25. width: 526px;
  26. height: 27px;
  27. margin-left: 55px;
  28.  
  29. }
  30.  
  31. #logo1 {
  32. background-image: url(Obrazki/logo1.jpg);
  33. width: 526px;
  34. height: 220px;
  35. position:absolute;
  36. top:27px;
  37.  
  38. }
  39.  
  40. #data {
  41. background-image: url(Obrazki/data.jpg);
  42. width: 350px;
  43. height: 27px;
  44. margin-left: 526px;
  45. position:absolute;
  46. top:-27px;
  47. }
  48.  
  49. #logo2 {
  50. background-image: url(Obrazki/logo2.jpg);
  51. width: 350px;
  52. height: 220px;
  53. position:absolute;
  54. top:27px;
  55. }
  56.  
  57. #04 {
  58. background-image: url(Obrazki/pociete_04.jpg);
  59. width: 59px;
  60. height: 247px;
  61. margin-left: 350px;
  62. position:absolute;
  63. top:-27px;
  64. }
  65.  
  66.  
[HTML] pobierz, plaintext
luck
2.04.2010, 21:05:48
A teraz patrz post #3 smile.gif
mortus
2.04.2010, 21:09:49
Tylko taka mała uwaga. Standardy mówią, że wartość id nie może zaczynać się cyfrą. Czyli nie możesz mieć id="01" i id="04". Poza tym zadeklaruj jakiś doctype, bo w różnych przeglądarkach może to różnie działać, a style ustawiaj już przy ustalonym doctype-ie.
Pawel_W
2.04.2010, 21:24:44
Cytat(luck @ 2.04.2010, 22:05:48 ) *
A teraz patrz post #3 smile.gif

nie mów że z tego co on napisał od razu wywróżyłeś o co dokładnie chodzi czarodziej.gif
luck
2.04.2010, 21:28:19
Cytat(Pawel_W @ 2.04.2010, 22:24:44 ) *
nie mów że z tego co on napisał od razu wywróżyłeś o co dokładnie chodzi czarodziej.gif

Czasami się udaje winksmiley.jpg
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.