Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Problemy z kodowaniem strony.
Ulysess
post
Post #1





Grupa: Zarejestrowani
Postów: 695
Pomógł: 65
Dołączył: 27.07.2009
Skąd: Y

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

witam , dla mojej strony został zrobiony layout , layout jest pocięty ale zupełnie nie wiem jak się wziąć najlepiej za kodowanie tego..
Layout wygląda tak:
http://www.kalahir.pl/l.jpg

u siebie mam rozdzielczość 1680 na 1050 i wygląda ok ale standard to chyba 1024 na 768 i tu pojawia się problem otóż własnie na 1024 obrazek wychodzi w bok i pojawia się skrol boczny... co w takiej sytuacji mam zrobić ? css coś wskóram questionmark.gif bo na to że grafik poprawi bym nie liczył...

tlo mam oddzielne i wygląda tak - http://www.kalahir.pl/tlo.jpg
Go to the top of the page
+Quote Post
tehaha
post
Post #2





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

tło dajesz jako css background-image: i problem rozwiązany, a content strony trzymasz w div'ie o szerokości max 1005px, pamiętaj, że dostosowując lay pod 1024px, trzeba zostawić minimum 20px na pasel przewijania
Go to the top of the page
+Quote Post
elmozaur
post
Post #3





Grupa: Zarejestrowani
Postów: 518
Pomógł: 18
Dołączył: 21.07.2008

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

zrob kontener div, wrzuc twoje tlo jako background url, i zmien cssowy parametr overflow
Go to the top of the page
+Quote Post
tehaha
post
Post #4





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

Cytat(Ulysess @ 31.12.2010, 15:47:01 ) *
sęk w tym że to zielone co tam jest ikona facebooka i obok panel wprowadzenia az do online zajmują 1026px...


to dziwne bo jak ja mierze w ps to widzę, że od zielonego do końca menu jest 1007px, ponadto ja bym zakodował tak, żeby kontener miał 994px - czyli od tego boxu z tekstem (wprowadzenie...) do końca brązowego menu, a ten mały zielony boxik z facebookiem dał na position absolute, i wtedy z szerokością 994 nie ma problemów
Go to the top of the page
+Quote Post
tehaha
post
Post #5





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

Cytat
zrobiłem chyba tak jak pisął tehaha


chyba jednak nie
1. miałeś dać szerokość max 1005px, a dla .top dałeś 1026px + 16px marginesu czyli 1042...
2. body daj na 100% width, a szerokość tą 1004px dla jakiegoś diva, który będzie wszystko trzymał
3. przy pozycjonowaniu absolutnym, pozycjonujemy odnośnie kontenera z position:relative, więc dobrze byłoby dla diva trzymającego wszystko nadać taki position


//tragiczny html to tragiczny wynik

Ten post edytował tehaha 31.12.2010, 16:41:00
Go to the top of the page
+Quote Post
tehaha
post
Post #6





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

eh... Ty w ogóle coś kiedyś kodowałeś?

1. Tło przesuwa Ci się, bo musisz background-postion na center, a Ty go nie ustawiłeś więc masz domyślny top left i dlatego się przesuwa
2. Znowu problemem są domyślne wartości, w tym przypadku padding dla body, który powinieneś ustawić na 0,

tak na marginesie to zanim się zaczyna pisać style, najpierw robi się reset - google->css reset

to musisz się trochę pobawić, bo jak to pierwszy raz to jeszcze dużo problemów przed Tobą, na dobry początek:

[HTML] pobierz, plaintext 
  1. html, body{
  2. height:100%;
  3. margin:0;
  4. padding:0;
  5. background:url(images/bg.jpg) top no-repeat;
  6. background-color:#000000;
  7. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Ulysess
post
Post #7





Grupa: Zarejestrowani
Postów: 695
Pomógł: 65
Dołączył: 27.07.2009
Skąd: Y

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

cały czas próbuje i ciężko to idzie..

mam problem już z samym brązowym menu.. na rozdzielczości 1680 na 1050 menu jest za krótkie.. (kończyć się powinno w miejscu gdzie się kończy obok czarne tło zaś na rozdzielczości 1024 na 768 menu jest prawie dobrze wymierzone.. czy da rade tak zrobić aby na każdej grafice było odpowiedniej długości czy trzeba było by przerabiać cały szablon questionmark.gif ..

http://qoooq.pl/
Go to the top of the page
+Quote Post
Kujski
post
Post #8





Grupa: Zarejestrowani
Postów: 104
Pomógł: 14
Dołączył: 28.09.2008
Skąd: W.

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

Daj tu cały kod strony i cały kod css i opisz dokładnie co chcesz tam zrobić.


--------------------
Sukces to droga od jednej porażki do drugiej, bez zmniejszonego entuzjazmu.
Go to the top of the page
+Quote Post
tehaha
post
Post #9





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

skoro nie wiesz jak się zabrać, to poszukaj stron z podobną strukturą i przeanalizuj kod html i css oraz w jaki sposób zostały zakodowane, no bo chyba nie oczekujesz, że ktoś Ci tu szablon cały potnie
Go to the top of the page
+Quote Post
Ulysess
post
Post #10





Grupa: Zarejestrowani
Postów: 695
Pomógł: 65
Dołączył: 27.07.2009
Skąd: Y

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

oczywiście że nie liczę że ktoś to za mnie zrobi.. smile.gif tylko dalej mam parę problemów np znów mam sytuacje że tło się na mniejszej rozdzielczości po prawej stronie nie wyświetla -> a w body mam ustawione:
[CSS] pobierz, plaintext 
  1. 	background-position: center;
  2. 	background:url(graphics/tlo.jpg) top no-repeat;
  3. 	background-color: #000000;
[CSS] pobierz, plaintext


-> http://qoooq.pl/index2.html

Ten post edytował Ulysess 2.01.2011, 00:50:47
Go to the top of the page
+Quote Post
tehaha
post
Post #11





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

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

ale chodzi Ci o to, że tam po prawej jest taki kawałek czarnego paska? bo jeżeli tak, to dlatego że tło jest lekko przesunięte i lewa część wchodzi pod główny box, jak utniesz trochę z lewej to tło to wtedy się wyrówna

jeszcze jedna rada: dla wszystkich div'ów wewnątrz main ustaw float, bo potem jak będziesz miał połowę takich, połowę takich to się wszystko może porozlatywać
Go to the top of the page
+Quote Post
Ulysess
post
Post #12





Grupa: Zarejestrowani
Postów: 695
Pomógł: 65
Dołączył: 27.07.2009
Skąd: Y

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

mam problem z poprawnym wstawieniem tego obramowania na moją strone -> http://qoooq.pl/graphics/ramka_03.png

kod strony wygląda następująco:

[HTML] pobierz, plaintext 
  1. 	<div class="logo"></div>
  2.  
  3. 		<div class="main">
  4. 			<div class="top">
  5. 					<div class="top_l"></div>
  6. 					<div class="top_r"></div>
  7. 			</div>
  8.  
  9. 			<div class="panel">
  10. 					<div class="panel_l"></div>
  11. 					<div class="panel_c"></div>
  12. 					<div class="panel_r"></div>		
  13. 			</div>
  14. 			<div class="content">
  15. 							<div class="up">Górna Ramka
  16. 								<div class="left_frame"></div>
  17. 								<div class="kernel">Treść strony</div>
  18. 								<div class="right_frame"></div>
  19. 							</div>	
  20. 					<div class="rock"></div>
  21. 					<div class="menu">Menu</div>			
  22. 			</div>
  23.  
  24. 		</div>
[HTML] pobierz, plaintext 


[CSS] pobierz, plaintext 
  1. html,body 
  2. { 
  3. 	width: 100%;
  4. 	height:100%;
  5. 	margin: 0px auto;
  6. 	padding: 0px;
  7. 	font-size: 11px;
  8. 	font-family: Tahoma;
  9. 	color: #CDCBAD;
  10. 	text-align: center;
  11. 	background-position: center;
  12. 	background:url(graphics/tlo3.jpg) top no-repeat;
  13. 	background-color: #000000;
  14. 	border: 0px solid red;
  15. 	overflow:auto;
  16. }
  17.  
  18. div.main
  19. {
  20. 	border: 0px solid red;
  21. 	margin: 0px auto;
  22. 	width: 1004px;
  23. 	position: relative;
  24. 	overflow:hidden;
  25. //	background-color: #000000;
  26. }
  27.  
  28. div.logo 
  29. { 
  30. 	margin: 0px auto;
  31. 	height: 128px;
  32. 	width: 390px;
  33. 	background-image: url(graphics/img_02.png);
  34. 	background-repeat: no-repeat;
  35. } 
  36.  
  37. div.top 
  38. { 
  39. 	margin: 0px auto;
  40. 	width: 960px;
  41. 	height: 72px;
  42. 	background-repeat: no-repeat;
  43. }
  44.  
  45. div.top_l
  46. {
  47. 	float: left;
  48. 	width: 46px;
  49. 	height: 72px;
  50. 	position: absolute;
  51. 	background-image: url(graphics/img_05.png);
  52. 	background-repeat: no-repeat;
  53. }
  54.  
  55. div.top_r
  56. {
  57. 	float: left; 
  58. 	width: 994px;
  59. 	height: 72px;
  60. 	background-image: url(graphics/img_06.png);
  61. 	background-repeat: no-repeat;
  62. }
  63.  
  64. div.panel 
  65. { 
  66. 	margin: 0px auto;
  67. 	width: 960px;
  68. //	height: 228px;
  69. 	height: 248px;
  70. 	background-position: center;
  71. }
  72.  
  73. div.panel_l
  74. {
  75. 	float: left; 
  76. 	width: 374px;
  77. 	height: 228px;
  78. 	background-image: url(graphics/img_08.png);
  79. 	background-repeat: no-repeat;
  80. }
  81.  
  82. div.panel_c
  83. {
  84. 	float: left;
  85. 	background-image: url(graphics/img_10.png);
  86. 	background-repeat: repeat-x; 
  87. 	height: 228px; 
  88. 	width: 212px; 
  89. 	background-color: white;
  90. }
  91.  
  92. div.panel_r
  93. {
  94. 	float: left; 
  95. 	width: 374px;
  96. 	height: 228px;
  97. 	background-image: url(graphics/img_12.png);
  98. 	background-repeat: no-repeat;
  99. }
  100.  
  101. div.tresc 
  102. { 
  103. 	float: left;
  104. 	margin: 0px auto;
  105. 	width: 960px;
  106. 	height: 800px;
  107. 	background-position: center;
  108. }
  109.  
  110. div.content
  111. {
  112. 	margin: 0px auto;
  113. 	width: 960px;
  114. 	height: 1900px;
  115. //	background-position: center;
  116. }
  117.  
  118. div.left_frame
  119. {
  120. 	float: left; 
  121. 	width: 6px;
  122. 	height: 324px;
  123. 	background-image: url(graphics/ramka_01.png);
  124. 	background-repeat: repeat-y;
  125. }
  126.  
  127. div.kernel
  128. {
  129. //	background:url(graphics/ramka_03.png) top no-repeat;
  130. 	float: left; 
  131. 	width: 718px;
  132. 	height: 348px;
  133. 	background-image: url(graphics/img_21.png);
  134. 	background-repeat: repeat-y;
  135. 	text-align: justify;
  136. //	padding-top: 5px;
  137. //	padding-left: 5px;
  138. //	padding-right: 5px;
  139. //	padding-bottom: 5px;
  140. //	color: 	#663300;
  141. 	color: 	#000000;
  142. 	font-weight: bold;
  143. 	font-size: 15px;
  144. //	font-family: Andele Mono;
  145. //	font-family: fantasy;
  146. //	font-family: Verdana;
  147. //	font-family: Tahoma;
  148. 	font-family: Monotype Corsiva;
  149. }
  150.  
  151. div.right_frame
  152. {
  153. 	float: left; 
  154. 	width: 6px;
  155. 	height: 324px;
  156. 	background-image: url(graphics/ramka_05.png);
  157. 	background-repeat: repeat-y;
  158. }
  159.  
  160. div.rock
  161. {
  162. 	float: left; 
  163. 	width: 31px;
  164. 	height: 368px;
  165. 	background-image: url(graphics/img_23.png);
  166. 	background-repeat: repeat-y;
  167. 	background-color: #000000;
  168. }
  169.  
  170. div.menu
  171. {
  172. 	float: left; 
  173. 	width: 199px;
  174. 	height: 199px;
  175. 	background-color: #000000;
  176. }
  177.  
  178. div.up
  179. {
  180. 	float: left; 
  181. 	width: 730px;
  182. 	height: 10px;
  183. 	background-color: #000000;
  184. 	background-image: url(graphics/ramka_03.png);
  185. }
[CSS] pobierz, plaintext
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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 16:45
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn