Autor Zpráva
lukasfigo
Profil
Dobrý den, na webu se snažím udělat něco podobného jako je na webu Slovanu Bratislava (http://www.skslovan.com/index.php). Přesněji o tu část kde se mění novinky nahoře s nějakým fotem...Já mám vedle sebe slidebanner (zde se mění automaticky fotky) a vedle další div s novinkami...Napadlo mě přes tyhle dva divy dát jenom průhůledné pozadí png, myslíte že by to nějak šlo? Za každou radu budu velice vděčný.
Ukázka na http://tjtupesypriprav.aspone.cz/Default.aspx.
Tady je mů kód:
<div class="middle_banner">
                <div class="featured_slider">
<!-- začátek slide banneru -->
                    <div id="featured_border" class="jcarousel-container">
                        <div id="featured_wrapper" class="jcarousel-clip">
                                <ul id="featured_images" class="jcarousel-list">
                                  
                                </ul>
                        </div>
                        <div id="featured_positioner_desc" class="jcarousel-container">
                            <div id="featured_wrapper_desc" class="jcarousel-clip">
                                    <ul id="featured_desc" class="jcarousel-list">
                                    </ul>
                            </div>
                        </div>
                            <ul id="featured_buttons" class="clear_fix">
                                <li>1</li>
                            </ul>
                    </div>
<!-- konec slide banneru -->
                </div>
                <div class="novinky">
                    <uc1:NovinkyBok ID="NovinkyBok1" runat="server" />
                </div>
            </div>

a tady css:
.middle_banner{
width:977px;
height:250px;
}
.featured_slider { width:677px; margin:auto; float:left; margin:0px 0 0 0px; }
ul, li{
padding:0px;
margin:0px;
list-style:none;
}
#featured_border { position: relative; border: none; padding:0px; height:250px; margin: 0px; }
#featured_wrapper { position: relative; width: 677px; height: 250px; overflow: hidden; }
#featured_positioner_desc { width:677px; height: 250px; position: absolute; top: 0px; left: 0px; }
#featured_wrapper_desc { width: 677px; height:250px; position: relative; overflow: hidden; }
#featured_desc { position: absolute; left: 0; bottom: 0;  padding:0px; margin:0px; }
#featured_desc li { width: 677px; float: left;padding:0px; margin:0px; }
#featured_desc li div { margin:0px 0 0px 0px; padding:10px; width:677px;  background: url(images/featured-desc-bg.png); }
#featured_desc li h2 {
color:#FFFFFF;
font-size:18px;
padding:0px 0 5px 0;
margin:0px; 
}
.novinky{
width:299px;
height:250px;
background-color:white;
float:right;
}
soucekgns
Profil
<div class="slide" style="background: url('tvujobrazek.jpg') no-repeat left center; width: 900px; height: 300px;">
    <div class="message-box" style="background: url('pozadi.png') no-repeat right center; float: right; width: 400px; height: 300px;">
        // text zprávy
    </div>
</div>

rozměry si uprav jak potřebuješ a pozadi.png vytvoříš podobně jako tohle.
lukasfigo
Profil
soucekgns:
Děkuji...problém je to ale dát do mého style.css....zatím bojuju :)
Takhle ale ty pozadí jakokdyž nejdou přes sebe ne?
soucekgns
Profil
lukasfigo:
Zkus upravit tu tvoji ukázku, vyznačit, co je hlavní obrázek a co ten text zprávy.. takhle se v tom moc nevyznám.
Jinak všechny styly potřebné k realizaci by měly být vyznačené v mém příkladu.

Takhle ale ty pozadí jakokdyž nejdou přes sebe ne?
Nevím, co tím myslíš, ale slide má pomyslnou hodnotu z-index: 1* a message-box z-index: 2* ... tj. message-box překrývá slide a tím i pozadí message-box je nad pozadím slide.

*V praxi to tak nefunguje a oba mají 1. (Ve skutečnosti je message-box nad slide pouze protože je v kódu níže.)
lukasfigo
Profil
soucekgns:
Už jsem si stím pohrál, moc děkuji za rady :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: