Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]kłopot z posklejaniem grafik
Forum PHP.pl > Forum > Przedszkole
Majzel
21.02.2010, 18:44:39
Witam, mam kłopot z posklejaniem grafik bo mi się rozjeżdzają, taki mam kod w budowie:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>szablon</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  5. </head>
  6. <body>
  7. <div id="kontener">
  8. 	<div id="logo">	
  9. 		<img src="images/grafika_01.jpg" width="980" height="291" alt="" />		
  10. 		<img src="images/grafika_02.jpg" width="980" height="3" alt="" />	
  11. 	</div>
  12. 	<div id="lewa" style="float: left;">
  13. 		<img src="images/grafika_03.jpg" width="53" height="1306" alt="" />	
  14. 	</div>
  15. 	<div id="menu" style="float: left;">
  16. 		<img src="images/grafika_04.jpg" width="172" height="70" alt="" /><img src="images/grafika_05.jpg" width="105" height="70" alt="" /><img src="images/grafika_06.jpg" width="168" height="70" alt="" /><img src="images/grafika_07.jpg" width="131" height="70" alt="" /><img src="images/grafika_08.jpg" width="126" height="70" alt="" /><img src="images/grafika_09.jpg" width="172" height="70" alt="" />
  17. 	</div>
  18. 	<div id="prawa">
  19. 		<img src="images/grafika_10.jpg" width="53" height="1306" alt="" />
  20. 	</div>
  21. 	<div id="srodek" style="float: right;">
  22. 				<img src="images/grafika_11.jpg" width="874" height="25" alt="" />
  23. 	</div>
  24. </div>
  25.  
  26. </body>
  27. </html>
[HTML] pobierz, plaintext

i zaciąłem się na 11 grafice, czyli tym divie o id srodek. Mógłby ktoś mi pomóc gdzie wsadzić tą grafikę bo kombinuje i nic nie wychodzi, tutaj link do stronki:
http://polskareprezentacja.ugu.pl/jednosc/
Mam jeszcze pytanie, czy dobrze to ogólnie robię? chodzi o kod - kodowanie i jakieś tam szczegóły braku deklaracji czy osobnego arkusza css to nie o to mi chodzi bo to wiem.
Kshyhoo
21.02.2010, 19:25:18
A dlaczego nie dasz grafik jako tło w stylach?
DiH
21.02.2010, 19:51:38
Możesz w stylach, na końcu, pod wszystkimi innymi definicjami dopisać: 
[CSS] pobierz, plaintext 
  1. div { 
  2. padding:0; margin:0 
  3. }
  4. img { 
  5. margin:0; padding: 0 
  6. }
[CSS] pobierz, plaintext
i sprawdzić, czy coś się zmieni.

P. S. Za wielkość loga (198 KB?) należy Ci się chłosta.
Majzel
21.02.2010, 20:06:59
Cytat
A dlaczego nie dasz grafik jako tło w stylach?

no dobrze to wiem, może potem, ale dalej nie wiem co jest nie tak z tym rozmieszczeniem.
DiH dodałem ten kod i nic :/
To co jest nie tak w końcu ?
Narutooo
21.02.2010, 20:11:44
Cytat(DiH @ 21.02.2010, 19:51:38 ) *
Możesz w stylach, na końcu, pod wszystkimi innymi definicjami dopisać: 
[CSS] pobierz, plaintext 
  1. div { 
  2. padding:0; margin:0 
  3. }
  4. img { 
  5. margin:0; padding: 0 
  6. }
[CSS] pobierz, plaintext
i sprawdzić, czy coś się zmieni.

P. S. Za wielkość loga (198 KB?) należy Ci się chłosta.



Szczerze to sie na /*****/ znocie
Zamiast pomóż koledze to nabijacie bezsensowne posty a tu chłopak sie niecierpliwi bo
robi z jakimś dobrym grafikiem stronke zapewno.
Ale wy nie pomagacie
tylko niepotrzebnie piszecie
lepiej pomyślcie zanim napiszecie exclamation.gif
PozdRo !
Kshyhoo
21.02.2010, 20:13:35
Cytat(Narutooo @ 21.02.2010, 20:11:44 ) *
Szczerze to sie na /*****/ znocie
Zamiast pomóż koledze to nabijacie bezsensowne posty a tu chłopak sie niecierpliwi bo
robi z jakimś dobrym grafikiem stronke zapewno.
Ale wy nie pomagacie
tylko niepotrzebnie piszecie
lepiej pomyślcie zanim napiszecie exclamation.gif
PozdRo !

questionmark.gif

Masz dla tego obrazka style="float: right;", to czego się spodziewasz?
Majzel
21.02.2010, 20:23:57
no tak, ale jak dam left to tylko zmieni się to, że go do lewej strony dosunie, nie wiem w jaki sposób umieścić ten obrazek między divem lewym(id lewy) a divem prawym(id prawy) a pod menu(id menu), position absolute odpada bo wtedy będzie to różnie wyglądało pod różnymi rozdzielczościami.
Kshyhoo
21.02.2010, 20:30:11
To Ty chcesz umieścić go między 3 a 10 ?
Majzel
21.02.2010, 20:36:33
tak między 3 a 10 grafiką - jeżeli dobrze Cie zrozumiałem, tutaj zaznaczyłem na czerwono gdzie ma być div http://img13.imageshack.us/img13/7226/divb.jpg
mortus
21.02.2010, 20:38:11
Spróbuj tak:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>szablon</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  5. </head>
  6. <body>
  7. <div id="kontener">
  8. 	<div id="logo">	
  9. 		<img src="images/grafika_01.jpg" width="980" height="291" alt="" />		
  10. 		<img src="images/grafika_02.jpg" width="980" height="3" alt="" />	
  11. 	</div>
  12. 	<div id="lewa" style="float: left;">
  13. 		<img src="images/grafika_03.jpg" width="53" height="1306" alt="" />	
  14. 	</div>
  15.         <div id="srodek">
  16.              <div id="menu" style="float: left;">
  17.                   <img src="images/grafika_04.jpg" width="172" height="70" alt="" />
  18.                   <img src="images/grafika_05.jpg" width="105" height="70" alt="" />
  19.                   <img src="images/grafika_06.jpg" width="168" height="70" alt="" />
  20.                   <img src="images/grafika_07.jpg" width="131" height="70" alt="" />
  21.                   <img src="images/grafika_08.jpg" width="126" height="70" alt="" />
  22.                   <img src="images/grafika_09.jpg" width="172" height="70" alt="" />
  23.              </div>
  24.              <div style="clear: both;"></div>
  25.              <div id="tresc">
  26. 	          <img src="images/grafika_11.jpg" width="874" height="25" alt="" />
  27. 	     </div>
  28. 	</div>
  29. 	<div id="prawa">
  30. 		<img src="images/grafika_10.jpg" width="53" height="1306" alt="" />
  31. 	</div>
  32. </div>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext

I zalecenia pozostają:
- style wrzuć do pliku css,
- obrazki wstaw jako background dla div-ów,
- zmień piłkarza ;P
Osobiście zmieniłbym jeszcze kodowanie na UTF-8.
Kshyhoo
21.02.2010, 20:41:48
No to może tak (zaznaczony na zielono ;p):
[HTML] pobierz, plaintext 
  1. <div id="kontener">
  2. 	<div id="logo">	
  3. 		<img src="images/grafika_01.jpg" width="980" height="291" alt="" />		
  4. 		<img src="images/grafika_02.jpg" width="980" height="3" alt="" />	
  5. 	</div>
  6. 	<div id="lewa" style="float: left;">
  7. 		<img src="images/grafika_03.jpg" width="53" height="1306" alt="" />	
  8. 	</div>
  9. 	<div id="menu" style="float: left;">
  10. 		<img src="images/grafika_04.jpg" width="172" height="70" alt="" /><img src="images/grafika_05.jpg" width="105" height="70" alt="" /><img src="images/grafika_06.jpg" width="168" height="70" alt="" /><img src="images/grafika_07.jpg" width="131" height="70" alt="" /><img src="images/grafika_08.jpg" width="126" height="70" alt="" /><img src="images/grafika_09.jpg" width="172" height="70" alt="" />
  11. 	</div>
  12. 	<div id="srodek" style="float: left; border: 1px solid #00ff00; position:    position: absolute; bottom: 0;;">
  13. 		<img src="images/grafika_11.jpg" width="874" height="25" alt="" />
  14. 	</div>
  15. 	<div id="prawa">
  16. 		<img src="images/grafika_10.jpg" width="53" height="1306" alt="" />
  17. 	</div>
  18. </div>
[HTML] pobierz, plaintext

Ale daj to tak, łatwiej się operuje:
[CSS] pobierz, plaintext 
  1. #kontener { 
  2.         border: 1px solid #00ff00;
  3. 	position: relative;
  4. 	width: 1024px;
  5. 	height: auto;
  6. 	min-height: 50px;
  7. 	background:url(grafika.png);
  8. 	background-repeat: no-repeat;
  9. 	margin: 0 auto;
  10. }
[CSS] pobierz, plaintext
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.