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 |
#2 · Zasláno: 23. 4. 2013, 22:41:01
<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 |
#4 · Zasláno: 24. 4. 2013, 16:29:54
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 |
#5 · Zasláno: 25. 4. 2013, 08:11:18
soucekgns:
Už jsem si stím pohrál, moc děkuji za rady :) |
||
Časová prodleva: 11 let
|
0