Witam!
Chcę zrobić stronkę, na której będzie jeden div z tekstem. Bardzo podoba mi się "główna ramka" z Onetu i próbowałem cos takiego zrobić, jednak nie wychodzi mi to. Czy mógłbym prosić o jakąś radę, albo kawałeczek skryptu, który robi to co ja chcę?

Zamieszczam fragment html:

[HTML] pobierz, plaintext 
<div class="box">
<img src="obrazek.jpg"> // obrazek o wymiarach 400x250px
<p class="title">Tydzień w Paryżu</p>
<p class="text">Lorem ipsum i coś tam dalej...<br>
</div>
[HTML] pobierz, plaintext 

i CSS'a, w którym próbowałem to robić...


Proszę o pomoc!

A co dokładnie nie wychodzi? Nie pokazuje się obrazek? Masz niedomknięty jeden <p>

Szczerze mówiąc to nic nie wychodzi... Główny problem to to, że nie wiem, jak zrobić to przyciemnienie na dole okienka (nie chcę robić tego przyciemniania w obrazku, tylko w html i css. Pozatym jak ustawić tekst tak jak na onecie?

Zobacz na swój kod, potrzebne jeszcze 2 klasy css.

I rób to raczej tak:

[HTML] pobierz, plaintext 
<div class="box">
<img src="obrazek.jpg" /> // obrazek o wymiarach 400x250px
<p class="title">Tydzień w Paryżu</p>
<p class="text">Lorem ipsum i coś tam dalej...</p>
<br />
</div>
[HTML] pobierz, plaintext 

Obrazek się wczytuje?

Tak, obrazek jest ok.

Ale mi chodzi o to, jak zrobić to przyciemienie i napis jak na onecie? Czym to ustawiać? float, czy position?

[HTML] pobierz, plaintext 
<div class="box">
<img src="obrazek.jpg" /> // obrazek o wymiarach 400x250px
<p class="title">Tydzień w Paryżu</p>
<p class="text">Lorem ipsum i coś tam dalej...</p>
<br />
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
.box {
  width: 450px;
  background: #dddddd url('obrazek.jpg') no-repeat;
  border: 1px solid #999999;
  color: #fff;
}
 
.box .title {
  background: #xxxx; //podaj właściwy kolor
  margin: 180px 0 20px 10px;
  width: 450px;
  height: 50px;
  font: bold 20px/28px Arial,Helvetica,sans-serif;
}
 
.box .text {
  font: 13px/16px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
  width: 450px;
  height: 100px;
}
[HTML] pobierz, plaintext 

Pisałem na szybko i nie miałem czasu sprawdzić więc może być jakiś błąd.

No..., nie do końca działa tak jak chcę.

Może nie wytłumaczyłem tego dobrze, więc powiem to jeszcze raz: Chcę takie "okienko" jak na Onecie, ale bez "tytułu". Można zobaczyć, że jest tam obrazek, a pod nim tekst na przyciemnionym tle z półprzezroczystością. Potrafię zrobić coś takiego, tylko nie wiem, jak "ustawić to "okienko z testem", tak żeby zawsze było na dole, bez względu na to czy tekst ma jedną, czy trzy linijki. Gdyby tekst był zawsze taki sam, to wtedy mógłbym dać po prostu obrazek.jpg jako background do .box a do .text dać position: relative;. Jednak jak już mówiłem tekst będzie się zmieniał i nie wiem, jak wyrównać .text do dołu ramki.


Kod:

[HTML] pobierz, plaintext 
<div class="box">
<div class="background">&nbsp;</div>
<p class="text">O Paryżu...</p>
</div>
[HTML] pobierz, plaintext 

dla .box position:relative
dla .text position:absolute; bottom: "x"px

podstaw sobie za "x"

Już sobie poradziłem. No, z Waszą pomocą!

Dziękuję