Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Pozycjonowanie obrazu
Otto
post 2.04.2010, 20:10:31
Post #1





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

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

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...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 17)
Pawel_W
post 2.04.2010, 20:12:20
Post #2





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

position: relative smile.gif

EDIT:
albo inaczej,
http://www.kurshtml.boo.pl/css/relatywne,pozycjonowanie.html

Ten post edytował Pawel_W 2.04.2010, 20:12:55
Go to the top of the page
+Quote Post
luck
post 2.04.2010, 20:29:32
Post #3





Grupa: Zarejestrowani
Postów: 317
Pomógł: 58
Dołączył: 6.11.2005

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

A ja myślę, że
Kod
position: absolute;
winksmiley.jpg


--------------------
extraweb.pl
Go to the top of the page
+Quote Post
Pawel_W
post 2.04.2010, 20:30:19
Post #4





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

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

Ten post edytował Pawel_W 2.04.2010, 20:30:42
Go to the top of the page
+Quote Post
Otto
post 2.04.2010, 20:34:07
Post #5





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

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

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
Go to the top of the page
+Quote Post
pedro84
post 2.04.2010, 20:38:41
Post #6





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Ja tam pozycjonowania relatywnego nie widzę. Może ślepy jestem. Dla elementów, które chcesz obniżyć:
Kod
position:relative;
top:27px;


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
Otto
post 2.04.2010, 20:42:47
Post #7





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

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

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


Ten post edytował Otto 2.04.2010, 20:44:49
Go to the top of the page
+Quote Post
Pawel_W
post 2.04.2010, 20:43:40
Post #8





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

z samego .jpg nie wywnioskujemy co zrobiłeś źle, pokaż ten kod po zmianie
Go to the top of the page
+Quote Post
krzysztof_kf
post 2.04.2010, 20:44:49
Post #9





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

data i logo 2 ? to są te grafiki kture tak się dzieje ?
Go to the top of the page
+Quote Post
Otto
post 2.04.2010, 20:48:42
Post #10





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

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

Oznakowanie
Go to the top of the page
+Quote Post
Pawel_W
post 2.04.2010, 20:50:05
Post #11





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

powiedz mi, czemu tego nie zrobisz jako jednej grafiki? chyba że ja czegoś nie rozumiem...
Go to the top of the page
+Quote Post
Otto
post 2.04.2010, 20:53:09
Post #12





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

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

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...
Go to the top of the page
+Quote Post
Pawel_W
post 2.04.2010, 20:58:45
Post #13





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

no to ustaw pozycjonowanie relatywne dla headera a resztę sobie na sztywno absolutnie wypozycjonuj...
Go to the top of the page
+Quote Post
Otto
post 2.04.2010, 21:03:47
Post #14





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

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

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
Go to the top of the page
+Quote Post
luck
post 2.04.2010, 21:05:48
Post #15





Grupa: Zarejestrowani
Postów: 317
Pomógł: 58
Dołączył: 6.11.2005

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

A teraz patrz post #3 smile.gif


--------------------
extraweb.pl
Go to the top of the page
+Quote Post
mortus
post 2.04.2010, 21:09:49
Post #16





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

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.
Go to the top of the page
+Quote Post
Pawel_W
post 2.04.2010, 21:24:44
Post #17





Grupa: Zarejestrowani
Postów: 1 675
Pomógł: 286
Dołączył: 15.06.2009
Skąd: Wieliczka

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

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
Go to the top of the page
+Quote Post
luck
post 2.04.2010, 21:28:19
Post #18





Grupa: Zarejestrowani
Postów: 317
Pomógł: 58
Dołączył: 6.11.2005

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

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


--------------------
extraweb.pl
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: Przełącz na: Standardowy · 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: 19.07.2025 - 10:05
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn