Webboard

Pełna wersja: Problem z wyświetlaniem tekstu w divie
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB: 1.8
adres forum: obojetni.xaa.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Otóż zrobiłem takie dwie jakby ramki po bokach i chciałbym w jednej wstawić ikonkę a w drugiej ostatni post. Wygląda to tak jak na 1 screenie. Problem jest w tym, że chciałbym aby tekst był wyświetlany centralnie w środku tej ramki (próbowałem już wielu sposobów (marginesy, padding itp.). I jeszcze jedno: w kodach css tych ramek mam ustawione opacity. Co zrobić żeby to działało tylko na ramkę, a tekst w środku został nieprzeźroczysty?

[Obrazek: Q0eNaGm.png]

forumbit_depth2_forum:
Kod PHP:
<tr>
<
td class="{$bgcolor}align="center" valign="top" width="169"><div style="margin-top: 45px; margin-left: 12px;"><div style="margin-top: 42px;"><div class="dzial_icon">IKONKA</div></div></div></td>
  <
td class="{$bgcolor}valign="top" align="center" width="377"><div style="margin-left: 11px;">
    <
strong><a href="{$forum_url}"><span class="tytuldzialu"><center><div style="position: relative; top: 10px; z-index: 1;"><div style="position: relative; top: -12px;">{$forum['name']}</div></div></center></span></a></strong>{$forum_viewers_text}<div class="smalltext"><center><div style="position: relative; top: -12px;">{$forum['description']}{$modlist}</div></center></div></div></div>
</
td>
<
td class="{$bgcolor}valign="top" align="right" style="width: 1%;"></td>
  <
td class="{$bgcolor}valign="top" align="center" style="width: 169px;"><div style="margin-top: 45px; margin-right: 15px;"><div class="dzial_lastpost">{$lastpost}</div></div></td>
</
tr

Css dla ikonki:
Kod PHP:
.dzial_icon {
border-radius2px;
width80px;
background#f9f9f9;
border-top2px solid #b8b8b8;
border-bottom2px solid #b8b8b8;
padding12px;
opacity0.7;
height70px;
    -
moz-box-shadow:
        
5px 0 5px -5px #9f9f9f,
        
-5px 0 5px -5px #9f9f9f;
    
-webkit-box-shadow:
        
5px 0 5px -5px #9f9f9f,
        
-5px 0 5px -5px #9f9f9f;
    
box-shadow:
        
5px 0 5px -5px #9f9f9f,
        
0px 0px 5px #9f9f9f,
        
-5px 0 5px -5px #9f9f9f;


Css dla ostatniego posta:
Kod PHP:
.dzial_lastpost {
border-radius2px;
width130px;
background#f9f9f9;
border-top2px solid #b8b8b8;
border-bottom2px solid #b8b8b8;
padding12px;
opacity0.7;
height70px;
    -
moz-box-shadow:
        
5px 0 5px -5px #9f9f9f,
        
-5px 0 5px -5px #9f9f9f;
    
-webkit-box-shadow:
        
5px 0 5px -5px #9f9f9f,
        
-5px 0 5px -5px #9f9f9f;
    
box-shadow:
        
5px 0 5px -5px #9f9f9f,
        
0px 0px 5px #9f9f9f,
        
-5px 0 5px -5px #9f9f9f;


Umarłbym ze szczęścia gdyby mi ktoś podał od razu poprawione kody :szczerbol:
HearMe napisał(a):w kodach css tych ramek mam ustawione opacity. Co zrobić żeby to działało tylko na ramkę, a tekst w środku został nieprzeźroczysty?
Usuń opacity i użyj przeźroczystości w tle, zapisując background w formacie rgba (google)
HearMe napisał(a):Problem jest w tym, że chciałbym aby tekst był wyświetlany centralnie w środku tej ramki
Albo robisz wszystko na paddingach: Usuwasz height, width i dajesz np.
Kod:
padding: 50px;
display: inline-block;
(z każdej strony tekstu będzie taka sama odległość.
Drugi sposób: określasz wysokość, szerokość -> dodajesz
Kod:
text-align: center; /*centrowanie w poziomie */
display: table-cell;
vertical-align: middle; /*centrowanie w pionie */
Chciałbym żeby każda ramka miała taką samą szerokość i wysokość. :/
No to sposób nr 2. Warto samemu popracować i dojść jak to powinno wyglądać. Dostałeś zarys jak to powinno wyglądać.
Kombinowanie raczej mi nie wychodzi :/
http://codepen.io/Matslom/pen/BNpPXQ
Popatrz na sposób nr. 2 i odpowiedz sobie czym on się różni od tego co napisałem w poście. Po prostu leniłeś się pomyśleć i chwile się nad problemem zastanowić.