| 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: 12 let
|
|||
0