Witam, potrzebowałbym informacji jak zrobić taki pasek na obrazku jak tutaj:

Jak takie cos stworzyć? próbowałem z-index ale słabo mi to wychodzi, potrzebowałbym to zrobić w miarę prosto i efektywnie...

[HTML] pobierz, plaintext 
 
<style>
.wrap {position: relative; width: 200px; height: 150px;}
.stripe {position: absolute; top: 0px; left: 0px; right: 0px;    height: 20px; background-color: rgba(0,0,0,0.8);}
</style>
 
<div class="wrap">
  <img src="obrazek.jpg" />
  <div class="stripe">Ta górna belka</div>
</div>
[HTML] pobierz, plaintext 

Jeszcze naszło mnie kilka problemów i pytań ogólnie to za cholere nie potrafie ogarnać dlaczego ta belka nachodzi mi na ramke:


Kod:

[HTML] pobierz, plaintext 
<div class="row-fluid">
		<ul class="thumbnails">
	<li class="span4" style=" width: 460px; height: 270px; ">
 
			<div class="wrap">
				<img class="ramka" src="http://localhost/audi.png" style=" width: 460px; height: 275px;">
				<div class="stripe">
					Audi A3 | 2002 | 1.4L | Sedan
				</div>
			</div>
 
			</li>
		<li class="span4">
 
			<div class="wrap">
				<img class="ramka" alt="300x200" src="http://localhost/audi.png" style=" width: 460px; height: 275px;">
				<div class="stripe">
					Audi A3 | 2002 | 1.4L | Sedan
				</div>
			</div>
 
			</li>
 
		</ul>
	</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.wrap {
position:relative; 
width: 460px; 
height: 275px;
 }
.stripe {
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px;   
width: 460px; 
height: 20px; 
color:white;
background-color: rgba(0, 0, 0, 0.7);
 
}
.ramka
{
padding: 5px; 
 border:1px solid #c5c9cb; 
 border-radius:10px; 
}
[CSS] pobierz, plaintext 

i jeszcze takie pytanie bo potrzebowałbym, żeby te ogloszenia układały mi sie po 2 i potem pod spodem nastepne dwa jest jakis na to system w css?

Zdjęcie ma padding i dlatego pasek wydaje się szerszy.


.wrap {
float:left;
}
.wrap:nth-child(2n){
clear:both;
}

Kurde właśnie ta ramka centralnie wychodzi mi na ten pasek, w pewnym sensie stripe dopasowuje się do ramki. Chodzi mi o to zeby pasek był tylko na zdjeciu a ramka była na całości (wokoło zdjecia/paska) jak ściągnę klase <img class="ramka" i zrobie na przykład diva to ramka mi sie znowu sypie jest za mała nie kształtna... i znowu punkt wyjścia... z php bym sobie jakos poradził a tu lipa...

Wrzuć na jsfiddle to się pokombinuje

Kurde, na tym jsfidl wyglada inaczej jak u mnie wgrałem na serwer cała strone:
http://stunt.hostoi.com/

a tu:
http://jsfiddle.net/jzkamv7x/

w img masz border i padding więc w stripe musisz zrobic tak:

[CSS] pobierz, plaintext 
background-color: rgba(0, 0, 0, 0.7);
    color: white;
    height: 20px;
    left: 11px;
    position: absolute;
    top: 10px;
    width: 438px;
[CSS] pobierz, plaintext