Forum PHP.pl > [CSS] Problem we wstawieniu textu na obrazek-tło

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Problem we wstawieniu textu na obrazek-tło

grzehotnik

17.02.2009, 21:28:48

Wtam ma skonstruowane tabele w css, tz nie mam tabel jako

[HTML] pobierz, plaintext 
<table>
[HTML] pobierz, plaintext

w html ale są w css jako display: table.
Oto kod

Kod

#calosc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 780px;
  height: 500px;
  margin-left: -390px;
  margin-top: -280px;
  display: table;}
#tlo {
  background-position: center center;
  background-repeat: no-repeat;
  display: table-row;}
#liniatop {
  width: 780px;
  height: 3px;
  display: table-row;}
#liniabottom {
  width: 780px;
  height: 3px;
  empty-cells: show;
  display: table-row;}
#tresc {
  font-family: verdana;
  font-size: 12pt;
  width: 760px;
  display: table;}

A wywołanie tak:

Kod

<DIV id="calosc">

   <div id="liniatop">wstawienie gifa</div>

   <div id="tlo">tlo do zdjecia jpg</tlo></div>

   <div id="liniabottom">wstawienie gifa</div>
</DIV>

I teraz chcę na tle coś pisać lub wyświetlac. A mogę tylko pod lub nad tlem.
Czy wie ktoś co trzeba zmienić??

likemandrake

17.02.2009, 21:56:38

Cytat

Kod

<div id="tlo">tlo do zdjecia jpg</tlo></div>

Co to to w ogóle jest? Jakieś dziwne znaczniki...

grzehotnik

17.02.2009, 22:08:06

wywołanie pisałem z ręki (tylko najważniejsze rzeczy) normalnie nie ma tego zamkniecia

[HTML] pobierz, plaintext 
</tlo>
[HTML] pobierz, plaintext

likemandrake

17.02.2009, 22:17:39

Po tym co napisałeś to raczej nie dostrzegam problemu. Sprawdź co się stanie jak usuniesz albo tą górną, albo dolną linię, co będziesz mógł robić w divie z tłem.

Dodam, że nie wiem jaki jest stopień kompatybilności display: table-* z rzeczywistą tabelką, bo jeśli w pełni, to layout masz źle, bo do definicji tabeli potrzebujemy zarówno tr (table-row) i td (table-cell).

Adis92

17.02.2009, 22:26:59

Do <div id="tlo"> dodaj w css

[HTML] pobierz, plaintext 
background-image: url(images/tlo.jpg);
[HTML] pobierz, plaintext

_Martin_

18.02.2009, 08:04:16

Ja proponuje:

[PHP] pobierz, plaintext 
<?php
<center><div style="border:1px solid black; position:relative; width:405px; height:270px;">
                    <img src="tlo.jpg" width="405" height="270">
          <div style="position:absolute; bottom:250; right:179;">Twoj text </div>
 
                    
                    </center></div>
?>
[PHP] pobierz, plaintext

likemandrake

18.02.2009, 11:36:16

Cytat(_Martin_ @ 18.02.2009, 08:04:16 )

Ja proponuje:

[PHP] pobierz, plaintext 
<?php
<center><div style="border:1px solid black; position:relative; width:405px; height:270px;">
                    <img src="tlo.jpg" width="405" height="270">
          <div style="position:absolute; bottom:250; right:179;">Twoj text </div>
 
                    
                    </center></div>
?>
[PHP] pobierz, plaintext

o <center /> jest zdeprecjonowane
o w <img /> atrybut "alt" jest wymagany
o jednostki miary w CSS są wymagane (jedyny wyjątek stanowi line-height)
o więcej divów jest domkniętych niż otwartych

Trzymaj poziom, a nie dostarczaj byle jaki kod nie wiadomo skąd wycięty... To forum odwiedzają również ludzie, którzy chcą się czegoś nauczyć!

grzehotnik

18.02.2009, 18:51:03

Cytat

Do <div id="tlo"> dodaj w css
HTML
background-image: url(images/tlo.jpg);

Wstawilem w css i pomogło mogę teraz pisać na tle. Wielkie dzięki.
Wie ktoś może dlaczego tak się dzieje pytam ponieważ
Jeśli chciałbym zmieniać zdjęcie tła w php to będzie problem.

.radex

18.02.2009, 18:56:59

Chciałbym zaznaczyć, że display: table; nie chodzi pod IE.

grzehotnik

18.02.2009, 22:22:36

Da się obejść żeby chodziło:
display table

likemandrake

18.02.2009, 23:24:26

W IE 5+ da się wszystko obejść właśnie przy pomocy expressions, ale do używania tego mechanizmu naprawdę trzeba mieć wiedzę.

Powód jest prosty, każdy kawałek kodu expression jest wykonywany baaaardzo często, nie tylko podczas zmieniania rozmiaru okienka, czy klikając gdzieś, ale każdy ruch myszą, czy naciśnięty klawisz klawiatury wykonuje dany kawałek kodu.

Im więcej expressions się użyje bez dobrej znajomości samego mechanizmu, tym większe prawdopodobieństwo, że z lekkiej strony zrobi sie kobyła.

Polecam użycie gotowych rozwiązań, stworzonych przez samego współtwórcę jQuery, a mianowicie skrypt noszący nazwę... IE7 (http://dean.edwards.name/)

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.