Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Przesunięcie tekstu
Mefiuu
post 11.10.2009, 14:50:42
Post #1





Grupa: Zarejestrowani
Postów: 369
Pomógł: 18
Dołączył: 23.11.2008

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


Witam. Mam taki problem. Otóż chciałbym przesunąć tekst w danym divie tak, aby zaczynał się np. 20px od lewej i 100 px od góry. Mam taki kod:

index.php
Kod
<div id="tresc">
TREŚĆ
</div>


a tu style.css:
Kod
#tresc {

    width: 900px;
    height: auto;
        background: url(images/news.png);
    overflow: hidden;
    float: left;

}


nie wiem jaką komendę dodać aby przesunąć w prawo cały tekst i trochę do dołu. Sprawdzałem margin-left i top , oraz padding ale one przesuwają wszystko.
Go to the top of the page
+Quote Post
Zosiek
post 11.10.2009, 15:00:07
Post #2





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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


Stwórz dodatkowy div w środku np. teresc_inner i tam staw margin-left i top
  1. <div id='tresc'>
  2. <div id='tresc_inner'>
  3. asdadsa
  4. </div>
  5. </div>

  1. #tresc {
  2.  
  3. width: 900px;
  4. height: auto;
  5. background: url(images/news.png);
  6. overflow: hidden;
  7. float: left;
  8.  
  9. }
  10. #tresc_inner {
  11. margin-left: 20px;
  12. margin-top: 100px;
  13. }


Ten post edytował Zosiek 11.10.2009, 15:01:31


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
athei
post 11.10.2009, 15:11:35
Post #3





Grupa: Zarejestrowani
Postów: 389
Pomógł: 141
Dołączył: 11.04.2009

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


Tekst umieszczaj w paragrafie <p>.
Go to the top of the page
+Quote Post
Mefiuu
post 11.10.2009, 15:32:25
Post #4





Grupa: Zarejestrowani
Postów: 369
Pomógł: 18
Dołączył: 23.11.2008

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


niestety to nie przesunęło tekstu.
Go to the top of the page
+Quote Post
Zosiek
post 11.10.2009, 15:37:04
Post #5





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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


Ale co. <p> czy dodatkowy div.


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
Mefiuu
post 11.10.2009, 16:11:44
Post #6





Grupa: Zarejestrowani
Postów: 369
Pomógł: 18
Dołączył: 23.11.2008

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


dodatkowy div, bo to że dodam znacznik <p> to mi tylko przeniesie bodajże do następnej linii i będzie traktowane jako nowy paragraf , tak ? a mi chodzi o przesunięcie tekstu o daną wartość w prawo i w dół.
Go to the top of the page
+Quote Post
Zosiek
post 11.10.2009, 16:15:03
Post #7





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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


U mnie działa nawet sprawdziłem ze stylami w divie
  1. <div id='tresc'>
  2. <div style="margin-left:80px; margin-top:150px">
  3. Teraz dla diva tego ^ dać id i w pliku CSS dać swoje marginesy
  4. <div>
  5. </div>


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
Mefiuu
post 11.10.2009, 20:27:04
Post #8





Grupa: Zarejestrowani
Postów: 369
Pomógł: 18
Dołączył: 23.11.2008

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


  1. <div id="tresc">
  2. <div id="tresc_inner">
  3. STRONA GŁÓWNA
  4. </div>
  5. </div>


Kod
#tresc {
       width: 900px;
       height: 135px;
       background: url(images/tytul.png);
       clear: both;

}

#tresc_inner {
    margin-left: 20px;
    margin-top: 150px;
}


W prawo przesuwa się i owszem, w dół jednak ani o piksel.
Go to the top of the page
+Quote Post
Zosiek
post 11.10.2009, 20:47:38
Post #9





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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


Podaj cała strukturę twojej strony i css

Wkleiłem u siebie to co ty masz i działa.

Ten post edytował Zosiek 11.10.2009, 20:52:20


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
Mefiuu
post 12.10.2009, 18:33:09
Post #10





Grupa: Zarejestrowani
Postów: 369
Pomógł: 18
Dołączył: 23.11.2008

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


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  4. <title>Samochody używane</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  6. <meta name ="description" content="Samochody używane" />
  7. <meta name="keywords" content="samochody, auta, używane" />
  8. <meta http-equiv="content-language" content="pl" />
  9. <meta name="author" content="Mefiuu & Raf199" />
  10. <meta name="generator" content="Notatnik SP" />
  11. <link rel="Stylesheet" type="text/css" href="style.css" />
  12. </head>
  13.  
  14.  
  15. <div id="dokument">
  16. <div id="logo">
  17. LOGO
  18. </div>
  19. <div id="podlogo">
  20. PODLOGO
  21. </div>
  22. <div id="menu">
  23. MENU
  24. </div>
  25. <div id="bokmenu">
  26. BOK MENU
  27. </div>
  28. <div id="tytul">
  29.  
  30. <div id="tytul_inner">
  31.  
  32. STRONA GŁÓWNA
  33. </div>
  34.  
  35. </div>
  36. <div id="tresc">
  37. <p>TREŚĆ</p>
  38. </div>
  39. <div id="stopka">
  40. STOPKA
  41. </div>
  42.  
  43. </div>
  44. </body>
  45. </html>
  46.  


  1. body {
  2. background:#ffffbb url('grafika/bg.png') repeat-x scroll top left;
  3. margin:0;
  4. padding:0;
  5. padding-top:30px;
  6. font-family:Arial, Helvetica, sans-serif;
  7. }
  8.  
  9.  
  10.  
  11. #dokument {
  12.  
  13. width: 900px;
  14. height: auto;
  15. margin: auto;
  16.  
  17.  
  18. }
  19.  
  20. #logo {
  21.  
  22. width: 900px;
  23. height: 183px;
  24. background: url(images/logo.png);
  25. float: left;
  26. text-indent: -2000000px;
  27. overflow: hidden;
  28.  
  29. }
  30.  
  31. #podlogo {
  32. width: 900px;
  33. height: 44px;
  34. background: url(images/podlogo.png);
  35. float: left;
  36. text-indent: -2000000px;
  37. overflow: hidden;
  38. }
  39.  
  40. #menu {
  41.  
  42. width: 700px;
  43. height: 79px;
  44. float: left;
  45. background: url(images/menu.png) repeat;
  46. text-indent: 20px;
  47.  
  48. }
  49.  
  50. #bokmenu {
  51.  
  52. height: 79px;
  53. width: 200px;
  54. float: right;
  55. background: url(images/bokmenu.png);
  56. text-indent: -2000000px;
  57. }
  58.  
  59. #tytul {
  60. width: 900px;
  61. height: 135px;
  62. background: url(images/tytul.png);
  63. clear: both;
  64.  
  65. }
  66.  
  67. #tytul_inner {
  68. margin-left: 20px;
  69. margin-top: 150px;
  70. }
  71.  
  72.  
  73. #tresc {
  74.  
  75. width: 900px;
  76. height: auto;
  77. background: url(images/news.png);
  78. overflow: hidden;
  79. float: left;
  80. text-indent: 30px;
  81.  
  82. }
  83.  
  84.  
  85.  
  86.  
  87. #stopka {
  88.  
  89. width: 900px;
  90. height: 25px;
  91. background: url(images/stopka.png);
  92. clear: both;
  93. text-indent: -2000000px;
  94.  
  95.  
  96.  
  97. }
  98.  


mniej więcej, a raczej dokładnie tak.
Go to the top of the page
+Quote Post
Zosiek
post 12.10.2009, 18:57:12
Post #11





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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


  1. #logo {
  2.  
  3. width: 900px;
  4. height: 183px;
  5. background: url(images/logo.png);
  6. float: left;
  7. text-indent: -2000000px;
  8. overflow: hidden;
  9.  
  10. }

Jeśli wywalisz
Kod
float: left;
to zadziała nie wiem dlaczego to koliduje
to samo jak dasz pozycje static (możesz pokombinować z tym jeśli nie chcesz wywalać floata:
  1. position: relative; top: 200px; /* Ze static też float koliduje*/



--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
Mefiuu
post 12.10.2009, 19:00:55
Post #12





Grupa: Zarejestrowani
Postów: 369
Pomógł: 18
Dołączył: 23.11.2008

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


usunięcie komendy float:left rzeczywiście pomogło, z tym, że przesunęło mi także obrazek tego diva i zrobiło "lukę" której ja nie chcę
Go to the top of the page
+Quote Post
Zosiek
post 12.10.2009, 19:06:38
Post #13





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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


Pobaw się komendą (dla tego diva lub fotki)
position:
Polecam książkę
http://helion.pl/ksiazki/csswit.htm
dla position (absolute etc.) możesz zdać top:Xpx; i right, left, top.)


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
Mefiuu
post 12.10.2009, 19:10:54
Post #14





Grupa: Zarejestrowani
Postów: 369
Pomógł: 18
Dołączył: 23.11.2008

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


ale dla tego diva z tą treścią czy dla tego logo co pisałeś ?
Go to the top of the page
+Quote Post
Zosiek
post 12.10.2009, 19:13:39
Post #15





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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


Dla diva z logo (albo samej fotki dla tego diva). Możesz też dać z powrotem float i bawić się position na tym divie z treścią tongue.gif


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
Mefiuu
post 12.10.2009, 19:17:21
Post #16





Grupa: Zarejestrowani
Postów: 369
Pomógł: 18
Dołączył: 23.11.2008

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


ok , pobawię się, ale mimo efektu końcowego dostajesz ode mnie pomógł winksmiley.jpg
Go to the top of the page
+Quote Post
Zosiek
post 12.10.2009, 19:19:52
Post #17





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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


Thx Nmzc. Cała przyjemność po mojej stronie. Pamiętaj, że nikt nie może za ciebie robić wszystkiego smile.gif To forum jest po to aby naprowadzać a nie dawać gotowce smile.gif. Uważam temat do zamkniećia tongue.gif


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 27.05.2020 - 07:28