Ramka z informacją pojawia się tylko obok obrazka znajdującego się na górze po lewej

Question

Witam.
Ramka z informacją pojawia się tylko obok obrazka znajdującego się na górze po lewej. Są 2 obrazki. Gdy najadę kursorem na obrazek znajdujący się na górze albo po środku, to ramka z informacją wyskakuje mi TYLKO obok obrazka znajdującego się na górze po lewej.

Tak wygląda czarna ramka po najechaniu kursorem na środkowy obrazek:

http://imageshack.com/a/img924/6673/dwYNyU.jpg

Zauważcie, że czarna ramka wyskoczyła obok obrazka znajdującego się na górze po lewej, a powinna wyskoczyć obok środkowego obrazka.
Co muszę poprawić w kodzie, aby po najechaniu kursorem na środkowy obrazek, wyskoczyła mi ramka obok tego środkowego obrazka?

<div id="content">
	<ul>
		<li>
			<a href="podstrona2.php" class="images">
				<img src="obrazek.jpg" style="position: absolute; left: 5px; top: 5px" alt="Przejdź do podstrony">
			</a>
			<div class="ramka">
				<p class="data-tooltip1" style="color: yellow">Tekst nr 1</p>
				<p class="data-tooltip2" style="color: red">Tekst nr 2</p>
				<p class="data-tooltip3" style="color: red">Tekst nr 3</p>
				<p class="data-tooltip4" style="color: red">Tekst nr 4</p>
			</div>
		</li>
	</ul>
			
	<ul>
		<li>
			<a href="podstrona2.php" class="images">
				<img src="obrazek.jpg" style="position: absolute; left: 400px; top: 250px;" alt="Przejdź do podstrony">
			</a>
			<div class="ramka">
				<p class="data-tooltip1" style="color: yellow">Tekst nr 5</p>
				<p class="data-tooltip2" style="color: red">Tekst nr 6</p>
				<p class="data-tooltip3" style="color: red">Tekst nr 7</p>
				<p class="data-tooltip4" style="color: red">Tekst nr 8</p>
			</div>
		</li>
	</ul>
</div>

#content
{
	background-color: #C0C0C0;
	width: 1000px;
	height: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	position: relative;
	overflow: hidden;
}

ul li
{
	display: block;
}

ul li:hover>.ramka
{
	display: block;
}

.images
{
	outline: none;
}

.images img
{
	border: 2px solid #000000;
	width: 100px;
	height: 143px;
}

.images img:hover, .images img:focus
{
	border: 2px solid #FF0000;
	cursor: pointer;
}

.ramka
{
	display: none;
	width: 300px;
	height: 119px;
	border-radius: 5px;
	background-color: #000000;
	position: absolute;
	z-index: 9999;
	top: 14px;
	left: 109px;
}

.data-tooltip1
{
	margin-left: 8px;
	margin-top: 12px;
	font-size: 12px;
	font-weight: bold;
}

.data-tooltip2
{
	margin-left: 8px;
	font-size: 11px;
}

.data-tooltip3
{
	margin-left: 8px;
	font-size: 11px;
}

.data-tooltip4
{
	margin-left: 8px;
	font-size: 11px;
}

 

Answer 1

Chętnie bym Ci pomógł, tylko nie bardzo rozumiem, co masz na myśli z tą "Ramką". Jak ona wygląda, może zaprezentuj gdzieś działanie tej strony. Osobiście, wydaje mi się, że łatwiej będzie to zrobić za pomocą JavaScript ew.jQuery- o ile myślę o tym samym co Ty, a wydaje mi się że tak, bo patrząc po CSS-ie "ramki", no to wnioskuję że tło ma się przyciemniać, i wyskakiwać jakiś box z informacją na stronie, i ma to być "na pierwszym tle". Jeśli dobrze wnioskuję, to proponuję zrobić to za pomocą javascript. Okodować to w taki sposób, ze w momencie gdy klikniesz na zdjęcie, to skrypt zamieni ci CSS z display:none; na np block; I wtedy funkcją w JS: 

document.getElementById("id_elementu");

Stworzysz zachowanie, w którym będzie przypisany dany tekst który ma się wyświetlać, w określonym elemencie ID.

Ale tak jak piszę.... Nie wiem czy zrozumiałem dobrze to, o co Ci chodzi ;)

Comments

Zrozumiałeś bo własnie tak to działa i działa BEZ JS :) Tutaj problemem nie było jak zrobić żeby się ramka wyświetliła tylko żeby się wyswietliła w odpowiednim miejscu :D

---

W sumie jak patrzę na Twoją odpowiedź, no to faktycznie zbyt skomplikowałbym koledze życie ;p

Answer 2

• stylujemy używając klas nie id więc zmieniłem content
• co to za dziwny twór lista w której jest jeden element? po co coś takiego
• co to za stylowanie inline w html
• po co tyle data-tooltip zawierających to samo? :D 
• ogólnie rzecz biorąc nie działało Ci to bo ramka nie ustawiała sie względem obrazków tylko względem .content
• http://codepen.io/mitelak/pen/wWdXRG tutaj kod jakbyś czegoś nie rozumiał pisz

Comments

Teraz jestem przy kompie. Data-tooltip1 to będzie pierwsza linijka tekstu, data-tooltip2 - to druga linijka tekstu itd itd. Zrobiłem tak, bo w tej ramce, boxie w każdej linijce będą inne parametry (kolor czcionki, rozmiar czcionki i inne style). Ten box lub ta ramka jako informacja będzie wyskakiwała po najechaniu kursorem na poszczególne zdjęcie.

Możesz kod wkleić tutaj albo na jsfiddle? Na codepen.io nie widzę kodu.

---

https://jsfiddle.net/6y8q3una/1/ 
Na codepenie wystarczy rozciągnąć sobie tutaj

Jeżeli tego nie ma to w "Change View" sobie zmienić sposób wyświetlania :D Ale i tak może być za mało do ogarnięcia wzrokiem to wtedy wystarczy, że klikniesz po kolei na kod html i Ctrl + A i sobie skopiujesz całość i tak samo z CSS i wtedy możesz sobie to wkleić gdzie chcesz

---

Po kliknięciu na link od jsfiddle, wyskakuje error. Na codepenie widzę tylko kod HTML. Rozciąganie nic nie pomaga. Po kliknięciu na "Change View", to mam jedynie możliwość podglądu tego wykonanego efektu. Gdy na tym podglądzie prawym przyciskiem myszki uruchomię "Pokaż źródło strony", to niestety nie ma tam zapisanego kodu od tego wykonanego efektu. Na tym codepenie nie mam nawet założonego profilu. Chyba nie muszę tam mieć założonego konta, aby zobaczyć kod, co nie? To byłoby bez sensu.

Jak możesz, to wklej tutaj kod albo jeszcze raz na jsfiddle.

---

https://jsfiddle.net/6y8q3una/ ten działa sory, a z codepenem to dziwne nie trzeba mieć konta a ja nie miałem takiego problemu nigdy

---

OK, o takie coś mi chodziło. A potrafiłbyś nieco skrócić kod? Bo do jednego obrazka przypisałeś osobną klasę: podstrona1, podstrona2.

<li class="podstrona1">

<li class="podstrona2">

li.podstrona1 {
	position: absolute;
	left: 5px;
	top: 5px;
}

li.podstrona2 {
	position: absolute;
	left: 400px;
	top: 250px;
}

A teraz wyobraź sobie, że na tej podstronie chciałbym umieścić, np. 50 zdjęć.

Wiesz jak poprawić ten swój kod, aby tylko 1 styl w CSS odpowiadał za wszystkie umieszczone obrazki, a nie tylko za 1 obrazek?

---

To już zależy od Ciebie, bo tak naprawdę to nie ma znaczenia, a ja zrobiłem tak bo TY tak miałeś (bo to jest żeby te dwa obrazki były w tych miejscach w których są) jeżeli chcesz żeby obrazki były np obok siebie to możesz to usunąć ustawić je obok siebie i nadać elementowi li position relative tylko i wtedy też powinna ramka działać

//edit popatrz na ten kod https://jsfiddle.net/td59tLwc/

---

Jutro to przetestuję u siebie.

Answer 3

Ten Twój kod nie przyniósł zamierzonego rezultatu. Zrobiłeś tak, że obrazki znajdują się obok siebie w odległości 10px (margin: 10px). A ja chciałbym ustalać pozycjonowanie obrazków wg. własnego uznania (position: absolute) w PHP, aby po najechaniu kursorem na dany obrazek pojawiała się ramka z odpowiednim tekstem (przypisany data-tooltip).

Tu jest zapis, który odpowiada za pozycjonowanie danego obrazka:

<img src="obrazek.jpg" style="position: absolute; left: 5px; top: 5px" />

Czyli obrazek znajduje się w obszarze content po lewej na górze. Gdy nadam więcej obrazków obojętnie w jakim miejscu w tym obszarze content, to chciałbym, aby nie było problemu z wyświetlaniem ramki.

Wiesz jak poprawić kod, aby zadziałało to tak jak powinno? Próbowałem wielu sposobów i dalej nie ma zamierzonego rezultatu.

Answer 4

W końcu rozwiązałem ten problem.