HTML+CSS - беспорядок в голове.

[Cris]

Люди кто может помоч зделать такую вешь:
на страницу выводяться фотки - <img src='...'>, нужно чтобы при навождении указателя мышки на фотки в ее верхнем, левом углу появлялся - крестик-ссылка, и на него можно было нажать)))
------------
это нужно для вожможности удаления фоток, после загрузки если что, выводить под каждой фоткой ссылку или кнопку некрасиво, хто зделает?, яваскриптом нежелательно

 

[Firewall]

сделан на скорую руку -)

Каскад:

.gamno {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gamno li {
	margin: 10px;
	padding: 0;
	float: left;
	position: relative;
	width: длина;
	height: высота;
}
.gamno span { // зависит от вида крестика
	width: 20px; 
	height: 2-px;
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
}
.gamno .hrest {
	background: url(пикча.gif) no-repeat;
}
.gamno a {
	text-decoration: none;
}
.gamno a:hover span { // это если картинка слитая {в одной картинке две, тоесть при наведении фокус смещается на 22 пикселя вообщем понты -))
	background-position: left -22px;
}

Код:

<ul class="gamno">
 <li>
  <a href="#"><span class="hrest"></span></a>
  <a href=""><img src="#" alt="image" /></a>
 </li>
 <li>
  <a href="#"><span class="hrest"></span></a>
  <a href=""><img src="#" alt="image" /></a>
 </li>
</ul>

Походу должно работать -) Проверять впадло)

 

[Cris]

сделан на скорую руку -)

Каскад:

.gamno {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gamno li {
	margin: 10px;
	padding: 0;
	float: left;
	position: relative;
	width: длина;
	height: высота;
}
.gamno span { // зависит от вида крестика
	width: 20px; 
	height: 2-px;
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
}
.gamno .hrest {
	background: url(пикча.gif) no-repeat;
}
.gamno a {
	text-decoration: none;
}
.gamno a:hover span { // это если картинка слитая {в одной картинке две, тоесть при наведении фокус смещается на 22 пикселя вообщем понты -))
	background-position: left -22px;
}

Код:

<ul class="gamno">
 <li>
  <a href="#"><span class="hrest"></span></a>
  <a href=""><img src="#" alt="image" /></a>
 </li>
 <li>
  <a href="#"><span class="hrest"></span></a>
  <a href=""><img src="#" alt="image" /></a>
 </li>
</ul>

Походу должно работать -) Проверять впадло)

ша проверю, спс
---------
во первых, оно не должно выстраиваться в столбик
-----------
чета оно не работает)

 

[Firewall]

ну емае, плохо проверяешь -)))

You must be registered for see images

 

[Cris]

ну емае, плохо проверяешь -)))

You must be registered for see images

не сразу, но заработало, но так как у меня сначала крестика вообше нету, то он должен появляться не при наведении на <a href='#'><span class=gamno></span></a> , а при наведении на <a href=''><img src='pic.gif'></a>,
но нужно чтобы по ссылке оно переходило только при нажатии на крестик
----------------
о я паставил не a:hover span, a li:hover span, работает, но есть большой шанс что не везде)

 

[Firewall]

но нужно чтобы по ссылке оно переходило только при нажатии на крестик

фак мой мозг -))))))))))

добавь

.hiddenElement {
    display: none;
}

и замени на

<ul class="gamno">
  <li>
  <img src="pic.gif" onmouseover='document.getElementById("show1").style.display = "block";' onmouseout ='document.getElementById("show1").style.display = "none";' />
  <a href="2" class="hiddenElement" onmouseover='document.getElementById("show1").style.display = "block";' id="show1"><span class="hrest"></span></a>
 </li>
  <li>
  <img src="pic.gif" onmouseover='document.getElementById("show2").style.display = "block";' onmouseout ='document.getElementById("show2").style.display = "none";' />
  <a href="2" class="hiddenElement" onmouseover='document.getElementById("show2").style.display = "block";' id="show2"><span class="hrest"></span></a>
 </li>
  <li>
  <img src="pic.gif" onmouseover='document.getElementById("show3").style.display = "block";' onmouseout ='document.getElementById("show3").style.display = "none";' />
  <a href="2" class="hiddenElement" onmouseover='document.getElementById("show3").style.display = "block";' id="show3"><span class="hrest"></span></a>
 </li>
</ul>

 

[Cris]

фак мой мозг -))))))))))

добавь

.hiddenElement {
    display: none;
}

и замени на

<ul class="gamno">
  <li>
  <img src="pic.gif" onmouseover='document.getElementById("show1").style.display = "block";' onmouseout ='document.getElementById("show1").style.display = "none";' />
  <a href="2" class="hiddenElement" onmouseover='document.getElementById("show1").style.display = "block";' id="show1"><span class="hrest"></span></a>
 </li>
  <li>
  <img src="pic.gif" onmouseover='document.getElementById("show2").style.display = "block";' onmouseout ='document.getElementById("show2").style.display = "none";' />
  <a href="2" class="hiddenElement" onmouseover='document.getElementById("show2").style.display = "block";' id="show2"><span class="hrest"></span></a>
 </li>
  <li>
  <img src="pic.gif" onmouseover='document.getElementById("show3").style.display = "block";' onmouseout ='document.getElementById("show3").style.display = "none";' />
  <a href="2" class="hiddenElement" onmouseover='document.getElementById("show3").style.display = "block";' id="show3"><span class="hrest"></span></a>
 </li>
</ul>

дешева и сирдито))), я к тому близился)) только id=show мешает)). так как фотки я регеню скриптом - вывод, подставлять каждому id влом, да и при дофига фотках будет места много занимать) когда такое часто пишеш, надо както это в функцию, и вызывать попроше))
----------------------
ну эт я так прикапуюсь к чему нибудь, а в общем спасибо, больше помощь не нужна!))