Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Przesunięcie tekstu
Forum PHP.pl > Forum > Przedszkole
Mefiuu
11.10.2009, 14:50:42
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.
Zosiek
11.10.2009, 15:00:07
Stwórz dodatkowy div w środku np. teresc_inner i tam staw margin-left i top
[HTML] pobierz, plaintext 
  1. <div id='tresc'>
  2. <div id='tresc_inner'>
  3. asdadsa
  4. </div>
  5. </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext
athei
11.10.2009, 15:11:35
Tekst umieszczaj w paragrafie <p>.
Mefiuu
11.10.2009, 15:32:25
niestety to nie przesunęło tekstu.
Zosiek
11.10.2009, 15:37:04
Ale co. <p> czy dodatkowy div.
Mefiuu
11.10.2009, 16:11:44
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ół.
Zosiek
11.10.2009, 16:15:03
U mnie działa nawet sprawdziłem ze stylami w divie 
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext
Mefiuu
11.10.2009, 20:27:04 
[HTML] pobierz, plaintext 
  1. <div id="tresc">
  2. <div id="tresc_inner">
  3. STRONA GŁÓWNA
  4. </div>
  5. </div>
[HTML] pobierz, plaintext


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.
Zosiek
11.10.2009, 20:47:38
Podaj cała strukturę twojej strony i css

Wkleiłem u siebie to co ty masz i działa.
Mefiuu
12.10.2009, 18:33:09 
[HTML] pobierz, plaintext 
  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. <head>
  5. <title>Samochody używane</title>
  6. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  7. <meta name ="description" content="Samochody używane" />
  8. <meta name="keywords" content="samochody, auta, używane" />
  9. <meta http-equiv="content-language" content="pl" />
  10. <meta name="author" content="Mefiuu & Raf199" />
  11. <meta name="generator" content="Notatnik SP" />
  12. <link rel="Stylesheet" type="text/css" href="style.css" />
  13. </head>
  14.  
  15. <body>
  16.  
  17. <div id="dokument">
  18.                    <div id="logo">
  19.                    LOGO
  20.                    </div>
  21.                    <div id="podlogo">
  22.                    PODLOGO
  23.                    </div>
  24.                    <div id="menu">
  25.                    MENU
  26.                    </div>
  27.                    <div id="bokmenu">
  28.                    BOK MENU
  29.                    </div>
  30.                    <div id="tytul">
  31.  
  32. 			<div id="tytul_inner">
  33.  
  34. 		                   STRONA GŁÓWNA
  35.               		</div>
  36.  
  37. 		   </div>
  38.                    <div id="tresc">
  39.                    <p>TREŚĆ</p>
  40.                    </div>
  41.                    <div id="stopka">
  42.                    STOPKA
  43.                    </div>
  44.  
  45. </div>
  46. </body>
  47. </html>
  48.  
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  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.  
[CSS] pobierz, plaintext


mniej więcej, a raczej dokładnie tak.
Zosiek
12.10.2009, 18:57:12 
[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext

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:
[CSS] pobierz, plaintext 
  1. position: relative; top: 200px; /* Ze static też float koliduje*/
[CSS] pobierz, plaintext

Mefiuu
12.10.2009, 19:00:55
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ę
Zosiek
12.10.2009, 19:06:38
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.)
Mefiuu
12.10.2009, 19:10:54
ale dla tego diva z tą treścią czy dla tego logo co pisałeś ?
Zosiek
12.10.2009, 19:13:39
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
Mefiuu
12.10.2009, 19:17:21
ok , pobawię się, ale mimo efektu końcowego dostajesz ode mnie pomógł winksmiley.jpg
Zosiek
12.10.2009, 19:19:52
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
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.