Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: background diva left i right
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
seba22
28.02.2009, 19:12:21
Witam,

Mam sobie diva, i chciał bym namalować w nim ikonki cytatu. " "

Logicznym jest że pierwsza ikona powinna być left-top
a druga powinna być right - down

Dzięki temu, czy div by miał 2 linie, czy 50, zawsze miały by odpowiednie pozycje.

http://www.w3schools.com/css/pr_background-position.asp
Czytam to świństwo.

Czy jest jakiś pomysł na to żeby dać w top left i down right ?
Jednocześnie ?

Jakikolwiek logiczny pomysł ?

Bardzo bardzo proszę...
R&R
2.03.2009, 08:00:37
jak to.. chciałbyś namalować sobie ikonki cytatu? Piszesz o rysunkach czy quotemarkach w zapisie kodowym?

Próbowałeś z floatem? tylko najpierw daj ten prawy..
Można wypozycjonować dowony element w dowolnym miejscu strony, tylko najpierw trzeba to zobaczyć...

Zawsze możesz narysować tło diva z cudzysłowami, przekroić i środek wypełnić kolorem..,
- to jakby Ci nie wyszło z pozycjonowaniem cudzysłowów.

Proponowałbym Ci jednak poczytać trochę tych "świństw",
jak się dobrze zastanowić, to style są wszędzie i stosuje się je nie tylko do pozycjonowania, czy kolorowania..

Pozdrawiam i życzę owocnej nauki winksmiley.jpg
rr
erix
2.03.2009, 10:08:41
Cytat
Czy jest jakiś pomysł na to żeby dać w top left i down right ?
Jednocześnie ?

Nie da się. Dla jednego obiektu można nadać wyłącznie jedno tło. Tak samo z pozycjonowaniem - lewe ucho dodaj dla jakiegoś wrappera, a prawe do właściwego obiektu.
seba22
3.03.2009, 11:23:59
A mógł by ktoś doradzić jak to wykonać.
Moja wiedza z zakresu HTML zatrzymała się w czasie odkrycia iż <table z parametrem 0 staje się niewidoczne >

Ja zrobił bym tabelkę na 3 <td> <td> <td>

Pierwszemu valign na top, drugiemu na middle, trzeciemu na bottom.
W pierwszego td img z quote na samą górę, w drugim treść, w trzecim obrazek z quote na sam dół.

Takie coś pozwala mi wykonać moja wiedza.... ale moja wiedza jest przestarzałą.
Pytanie brzmi, czy można to zrobić jakoś lepiej, żeby uzyskać ten sam efekt co z tabelką.

Chyba dawać 3 divy obok siebie to odpada.
R&R
3.03.2009, 17:19:14
Cytat(seba22 @ 3.03.2009, 11:23:59 ) *
A mógł by ktoś doradzić jak to wykonać.
Moja wiedza z zakresu HTML zatrzymała się w czasie odkrycia iż <table z parametrem 0 staje się niewidoczne >

Ja zrobił bym tabelkę na 3 <td> <td> <td>

Pierwszemu valign na top, drugiemu na middle, trzeciemu na bottom.
W pierwszego td img z quote na samą górę, w drugim treść, w trzecim obrazek z quote na sam dół.

Chyba dawać 3 divy obok siebie to odpada.



Widzisz ten obrazek tła " cudzysłów? Posłużę się nim dla przykładu i mam nadzieje, że admini mi za to nie dokopią dry.gif

To jest ten obrazek:



Oczywiście, zakładam z góry, że Ty masz własny winksmiley.jpg

O tabelkach na chwilę zapomnij, choć to zdecydowanie prostrze.. Bawiłeś się kiedyś Photoshopem? Pociąłeś kiedyś grafikę i zapisałeś jako strone html?
To jeśli to zrobisz, to bedzie 95% roboty, pozamieniasz sobie wtedy obrazki w komórkach na background'y, nie zapominając, że taka komórka powinna mieć wymiary danego kawałka obrazka, (pociętego elementu), inaczej grafika się "schowa" a komórka "skurczy" w każdą stronę w którą będzie mogła..

Zrobimy coś innego i zastosujemy div'y

To będzie taka konstrukcja:

[HTML] pobierz, plaintext 
  1. <div class="quote">
  2. 	<div class="quotetop">Top Quote, czyli miejsce z obrazkiem tła</div>
  3.  
  4. 	Główna zawartość diva "quote" bla bla
  5.  
  6. 	<div class="quotebottom">Bottom Quote, czyli miejsce z obrazkiem tła</div>
  7. </div>
[HTML] pobierz, plaintext


Jak widać w powyższym w głównym divie z klasą "quote" umieścimy w górnej części diva z klasą "quotetop" z obrazkiem tła i to zrobimy z divem z klasą "quotebottom", tylko, że na dole głównego diva z klasą "quote".

Dodałem na chwilę bordery do tych dwóch dzivów w środku, żeby pokazać gdzie będą przebiegać divów - górnego i dolnego.

Poniżej dwie fotki obrazujace, jak to może wyglądać. Pierwsza ma kropkowana linię, dla pokazania granicy, a druga już jest czyściutka.
Fotki przed zrobieniem screenów, przeskalowałem do wielkości 80%, żeby mogły się tu wygodnie zmieścić w poście.
Tym nie mniej, załączę na końcu miniaturki z imageshack.us, żeby zademonstrować te fotki nie przeskalowane..

To pierwsza z ustawionym kropkowanym borderem:




A tu już jest czysto i jednolicie:




Konstrukcję podałem na początku..
hmm myśle, że nie ma co się rozdrabniać i nie będę dawał tego po kawałku.. wyszedł z tego niezły "pomocnik" i napewno przyda Ci się w całości.
Linie określające border w stylach zostały wyłączona, możesz je włączyć, żeby widzieć, gdzie co masz, podczas ustawiania itp..

Pisałem to na szybko i w strict'cie a to z powodu głupka IE, i pewne kwestie w stylach i może metodach mogą być kontrowersyjne,
jednak to jest jakieś rozwiazanie i po prostu potraktuj to jako ściągawkę na przyszłość, ok?

Wszystko jest razem, więc wkleję tu od razu cały dokument html:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="pl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  3. 	<head>
  4. 		<title>div test</title>
  5. 		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. <!--
  9. 	body, html {
  10. 		margin: 0 auto;
  11. 		padding: 0;
  12. 		background-color:#000000;
  13. 		font-size: 12px;
  14. 		font-weight: 500;
  15. 		line-height: 1.3em;
  16. 		color: #9acd32;
  17. 		height: 100%;
  18. 		weight: 100%;
  19. 	}
  20. 	.quotetop {
  21. 		background: #DFDFDF url(http://forum.php.pl/style_images/1/css_img_quote.gif) no-repeat top left;
  22. 		/*border-bottom: 1px dotted #000000;*/ // <- to kropkowana granica g&#56202;&#57253;go diva
  23. 		color: #000;
  24. 		font-weight: bold;
  25. 		margin: auto;
  26. 		padding: 4px;
  27. 		height: 26px;
  28. 	}
  29. 	.quote {
  30. 		background: #DFDFDF;
  31. 		border: 3px dashed #696969;
  32. 		white-space: auto;
  33. 		margin: 0 auto;
  34. 		display: block;
  35. 		color: #000;
  36. 		padding: 3px 9px;
  37. 		widht: 560px;
  38. 	}
  39. 	.quotebottom {
  40. 		background: #DFDFDF url(http://forum.php.pl/style_images/1/css_img_quote.gif) no-repeat bottom right;
  41. 		/*border-top: 1px dotted #000000;*/ // <- to kropkowana granica dolnego diva
  42. 	 color: #000;
  43. 		font-weight: bold;
  44. 		margin: auto;
  45. 		padding: 4px;
  46. 		height: 26px;
  47. 	}
  48. 	.p {
  49. 		vertical-align: middle;
  50. 		margin: 2px auto;
  51. 		padding: 2px;
  52. 	}
  53. 	.indent {
  54. 		text-indent: 18px;
  55. 		text-align: justify;
  56. 	}
  57. //-->
  58. /*]]>*/
  59. </style>
  60. 	</head>
  61. 	<body>
  62. 		<div align="center" style="width:560px; margin:0 auto;">
  63. 			<br />
  64. 			<h2>Test DIV'a</h2>
  65. 			<div class="quote">
  66. 			<div class="quotetop"><p class="p">Top Quote</p></div>
  67.  
  68. 			<p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra. Sed gravida purus vel nunc. Integer hendrerit. Integer ultricies risus et elit. Ut et nisl. Proin tempor pretium purus. Duis in lorem eget orci tempor pellentesque. Ut cursus lacinia est. Sed urna arcu, dapibus nec, facilisis ut, semper sit amet, augue. Nullam luctus diam eu lectus. Mauris sollicitudin molestie ligula. Sed non libero sed dui bibendum laoreet. Maecenas faucibus arcu sit amet velit. Nullam fringilla lorem quis eros.</p>
  69.  
  70. 			<p class="indent">Duis fermentum eros condimentum felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt mauris. Nulla nisi eros, congue sed, porta eget, consequat nec, quam. Pellentesque id augue et augue laoreet porttitor. Suspendisse sapien est, ullamcorper ac, pretium et, bibendum quis, magna. Ut et ligula. Suspendisse sem. Nulla dictum, magna eget ultrices venenatis, ligula eros facilisis urna, ac euismod quam diam at risus.</p>
  71.  
  72. 			<p class="indent">Curabitur lacinia metus eleifend nisl. Maecenas varius augue sed sem. Vivamus eu leo. Nulla vitae tellus. Proin pulvinar, quam adipiscing commodo malesuada, mi massa porta felis, sit amet tincidunt tortor metus quis eros. Vestibulum vitae sem sit amet tellus mattis pellentesque. Etiam ut dolor quis nulla tincidunt ullamcorper. Pellentesque mauris. Sed tempus risus eu nibh. Fusce mattis velit vehicula augue. Vivamus eu metus. Proin tempor pulvinar tellus. Proin faucibus, purus egestas pretium porttitor, enim turpis ultrices arcu, non volutpat sem nibh in lectus. Maecenas malesuada porttitor ipsum. Pellentesque lacinia felis in felis. Morbi hendrerit elit pellentesque velit.</p>
  73.  
  74. 			<p class="indent">Nam sit amet magna. Nunc in nibh. Curabitur eu massa id augue eleifend ullamcorper. Morbi fringilla diam eget urna. Etiam dignissim congue enim. Donec sagittis erat quis nunc. Donec egestas mattis lorem. Suspendisse potenti. Etiam pellentesque vulputate libero. Nullam orci magna, imperdiet quis, rhoncus vel, feugiat condimentum, nisi. Mauris euismod rutrum erat.</p>
  75.  
  76. 			<p class="indent">Sed eu purus. Sed mi. Etiam commodo, urna quis porta iaculis, justo quam adipiscing diam, ullamcorper vulputate odio massa non turpis. Praesent fringilla. Nunc diam. Maecenas eget magna. Curabitur dapibus, arcu consequat porta lacinia, massa velit vehicula velit, hendrerit lacinia odio eros quis arcu. Maecenas at magna eget dui placerat fermentum. Suspendisse potenti. Suspendisse potenti. In tristique eros nec massa. Maecenas in justo. Fusce nunc risus, pulvinar at, vulputate nec, ultricies et, tellus. Nam id elit nec leo interdum cursus. Pellentesque neque. Curabitur ut massa.</p>
  77.  
  78. 			<div class="quotebottom"><p class="p">Bottom Quote</p></div>
  79. 			</div>
  80. 			<br />
  81. 			Koniec testu...
  82. 			<br />
  83. 			&copy; RicoRoco
  84. 			<br />
  85. 		</div>
  86. 	</body>
  87. </html>
[HTML] pobierz, plaintext


Żeby cokolwiek było tam widac, to wrzuciłem do środka text "Lorem Ipsum..."

Miłej zabawy! smile.gif

BTW. Obiecane fotki w prawdziwych rozmiarach, (po kliknieciu na miniaturę)

i

Oczywiście, gdyby było coś nie jasne to niekrępuj się... Zachęcam Cię jednak do lektury, którą można za free pozyskać z netu, jak również kursy "of-line".

Pozdrawiam smile.gif
rr.
seba22
3.03.2009, 18:17:07
Szczere wyrazy podziękowania kolego R&R .
Opcja na DIVach jest łatwiejsza niż zabawa z tabelką.

Myślę, że materiał w tej formie, można by przykleić, gdzieś na górę, bo pewnie nie tylko mnie frapowało to pytanie.



Odnośnie Photo Shop -a to nie używam.
1) Cena
2) Windows

Nie jestem z zawodu grafikiem, tak więc nie mogę sobie pozwolić na zakup licencji.

Tak więc jeszcze raz dzięki.
Wiesz, pierwszy raz w życiu spotkałem się z taką wyczerpującą odpowiedzią
R&R
3.03.2009, 18:42:18
hmm nie przesadzajmy and na zdrowie smile.gif

Pisze, bo powinieneś usunac z kodu moje komentarze, wiesz to:

// <- to kropkowana granica g󲮥go diva

i to:

// <- to kropkowana granica g󲮥go diva

To jest nie potrzebne i trochę poleciałem na przyzwyczajeniach z php, jak juz to powinno byc zakomentowane: /* tak */

Co ma wspólnego Windows czy inny OS z Photoshopem? bo nie wiem..

Są wersje testowe około 30 dni działa.. Tym nie mniej są darmowe alternatywy, np. Gimp, zainteresuj się tym programem, na windows są potrzebne dodatkowe biblioteki, ale wszystko znajdziesz bez problemu.

Ponadto nie używaj systemowego notatnika, bo popsuje Ci kodowanie, mi najlepiej pracuje się na Notepad++ i polecam.

Co do twojego ostatniego zdania... Wiesz od kilku lat chcę się tu zarejestrowac, ale ciągle mi odchodzi ochota..
Pisze tu multum młodych ludzi, którzy są w totalnej przewadze. Głównie piszą na GG i stąd widac przyzwyczajenia, żeby na forach też tak pisać, naprawdę spora część z tych ludzi, to zwykli nabijacze postów.. ja natomiast, jeśli widzę, że komuś jest potrzebna pomoc w szerszym zakresie, to mu jej nie skapię, a to że piszę w ten sposób to właśnie taki mały protest song, dla tych co jadą na forum jakby to było GG i o ile w sporej części jest to uzasadnione, czasami wystarczy komuś linia tekstu, żeby zrozumiał itp.., to niestety z powodu tej drugej części, robi się po prostu bałagan i coraz ciężej coś znaleźć, treściwego..

Webmasterka, nawet hobbystycznie przynosi wiele satysfakcji itp.. jest to bardzo budujace. Więc, nawet jakby ktos usilnie starał się Cie od tego odwieźć, to się nie poddawaj hehe

Tia trochę naspamowałem.., sorka za literówki, - nie mogę się przyzwyczaić do innego kiborda..

Pozdrawiam smile.gif
rr.
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.