background diva left i right Opcje

[seba22]

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ę...

[seba22]

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]

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ą (IMG:http://forum.php.pl/style_emoticons/default/dry.gif)

To jest ten obrazek:

(IMG:http://forum.php.pl/style_images/1/css_img_quote.gif)

Oczywiście, zakładam z góry, że Ty masz własny (IMG:http://forum.php.pl/style_emoticons/default/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 
<div class="quote">
	<div class="quotetop">Top Quote, czyli miejsce z obrazkiem tła</div>
 
	Główna zawartość diva "quote" bla bla
 
	<div class="quotebottom">Bottom Quote, czyli miejsce z obrazkiem tła</div>
</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:

(IMG:http://img243.imageshack.us/img243/7369/testdiva1c.jpg)


A tu już jest czysto i jednolicie:

(IMG:http://img84.imageshack.us/img84/742/testdiva1d.jpg)


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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
	<head>
		<title>div test</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
<!--
	body, html {
		margin: 0 auto;
		padding: 0;
		background-color:#000000;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.3em;
		color: #9acd32;
		height: 100%;
		weight: 100%;
	}
	.quotetop {
		background: #DFDFDF url(http://forum.php.pl/style_images/1/css_img_quote.gif) no-repeat top left;
		/*border-bottom: 1px dotted #000000;*/ // <- to kropkowana granica g&#56202;&#57253;go diva
		color: #000;
		font-weight: bold;
		margin: auto;
		padding: 4px;
		height: 26px;
	}
	.quote {
		background: #DFDFDF;
		border: 3px dashed #696969;
		white-space: auto;
		margin: 0 auto;
		display: block;
		color: #000;
		padding: 3px 9px;
		widht: 560px;
	}
	.quotebottom {
		background: #DFDFDF url(http://forum.php.pl/style_images/1/css_img_quote.gif) no-repeat bottom right;
		/*border-top: 1px dotted #000000;*/ // <- to kropkowana granica dolnego diva
	 color: #000;
		font-weight: bold;
		margin: auto;
		padding: 4px;
		height: 26px;
	}
	.p {
		vertical-align: middle;
		margin: 2px auto;
		padding: 2px;
	}
	.indent {
		text-indent: 18px;
		text-align: justify;
	}
//-->
/*]]>*/
</style>
	</head>
	<body>
		<div align="center" style="width:560px; margin:0 auto;">
			<br />
			<h2>Test DIV'a</h2>
			<div class="quote">
			<div class="quotetop"><p class="p">Top Quote</p></div>
 
			<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>
 
			<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>
 
			<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>
 
			<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>
 
			<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>
 
			<div class="quotebottom"><p class="p">Bottom Quote</p></div>
			</div>
			<br />
			Koniec testu...
			<br />
			&copy; RicoRoco
			<br />
		</div>
	</body>
</html>
[HTML] pobierz, plaintext 

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

Miłej zabawy! (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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

(IMG:http://img84.imageshack.us/img84/2285/testdiva2a.th.jpg) i (IMG:http://img243.imageshack.us/img243/4042/testdiva2b.th.jpg)

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
rr.

Ten post edytował R&R 3.03.2009, 17:38:56