Diskuze: Špatný div??

HTML a CSS HTML a CSS Špatný div?? American English version English version

Avatar
Michal Kuba
Redaktor
Avatar
Michal Kuba:

Ahoj. Pokouším se o takovou jednu věc, kterou jsem očekával, že nebude problém udělat:
Mám fotku v divu a potom ještě jeden div s textem (nadpisem):

<div class="col-md-4"><a href="#"><img src="./img/foto1.jpg"></a>
  <div class="topstory-text"><a href="#" title="Přečíst článek: článek">Prvni letošní body máme v kapse</a>
  </div></div>

a k tomu CSS:

.topstory-text{
   border:1px solid red;
   z-index:10;
}
.topstory-text a{
    position:absolute;
    top:270px;
    margin-bottom: 40px;
}
.topstory a img{
    border-radius: 6px;
    width:310px;
    margin-right:15px;
    height:305px;

}

.topstory img{
   z-index:1;
    border-radius: 6px;
    margin-right:15px;
    width:310px;
    height:305px;
    opacity:0.0;
}

(doufám že to je všechen kód co jsem potřeboval zkopírovat :D )
No a chci docílit toho, že se mi zobrazí fotka a v dolní části ten text -> to funguje
ale navíc, aby ten div s textem - class="topstory-text" - měl černé pozadí částečně průhledné (ano, na to použiju opacity) jenže mě se ten rámeček nějak nevytvoří. Pouze se mi pod fotkou udělá linka když dám border:2px solid color;

Může to být tím, že jsem nějak posunul pouze text nahoru, aby sahal do fotky a má absolutní pozici, nebo ne?

 
Odpovědět 8.10.2015 15:45
Avatar
Michal Kuba
Redaktor
Avatar
Odpovídá na Michal Kuba
Michal Kuba:

Ještě upřesním obrázkem:
Zelená plocha bude nějaká fotka a v černém poli (to bude průhledné) bude nějaký nadpis a to černé pole bude zaujímat dejme tomu dolní třetinu fotky..

 
Nahoru Odpovědět 8.10.2015 15:50
Avatar
mayo505
Redaktor
Avatar
Odpovídá na Michal Kuba
mayo505:

možno to nechápem správne ale nevadí, že ten div má triedu topstory-text a v tých štýloch máš 2xtopstory-text a 2x iba topstory?

 
Nahoru Odpovědět 8.10.2015 15:56
Avatar
mayo505
Redaktor
Avatar
Odpovídá na mayo505
mayo505:

aha nechápem to správne :D ale tomu topstory-text by si podľa mňa mal nastaviť výšku a šírku, lebo inak ten div bude veľký len ako jeho obsah (text)

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět  -1 8.10.2015 16:00
Avatar
Michal Kuba
Redaktor
Avatar
Odpovídá na mayo505
Michal Kuba:

Jasný díky, nevím proč mě taková triviální věc nenapadla :)

 
Nahoru Odpovědět  -1 8.10.2015 16:15
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.