BluePink BluePink
XHost 		Gazduire site-uri web nelimitata ca spatiu si trafic lunar la doar 15 eur / an. Inregistrare domenii .ro .com .net .org .info .biz .com.ro .org.ro la preturi preferentiale. Pentru oferta detaliata accesati site-ul BluePink

Suprapunerea textului

Se obtine cu ajutorul atributului "margin-top", care poate primi si valori negative astfel incat randul de dedesubt sa se suprapuna partial peste randul de deasupra.
Folosind I.E.5 , un display de 15" setat la 800x600, fiecare rand se suprapune peste randul de deasupra doar cu partea superioara a literelor inalte ( f, d, h ); litere ca e, m, n fiind situate exact sub randul de deasupra dar fara sa se suprapuna, ca in imaginea urmatoare:
asta ati vedea cu I.E.5 si monitor 15'', 800x600
Fac aceste precizari pentru ca nu stiu ce browser si monitor aveti. Am observat ca acelasi exemplu, dar "reglat" (din "margin-top") sa se vada conform descrierii de mai sus folosind I.E.3 si monitor 14" la 800x600, pe un monitor de 15" 800x600 si I.E.5 randurile erau mai "incalecate", litere ca e, m, n incepand sa se suprapuna si ele peste randul de deasupra.
Deoarece modul cum este afisat un cod ce contine text suprapus depinde de browser, marimea si setarile monitorului, cred ca este bine sa nu abuzati, deoarece ele depind de dotarea vizitatorului.

In antetul acestei pagini avem:

< style type="text/css" >
< !--
#background {color:red; font:50px}
#foreground1 {font: italic 50px; color:green}
#foreground2 {font: italic 30px; color:blue}

.baza {color:red; font:50px}
.supra1 {font: italic 50px; color:green; margin-top:-53px}
.supra2 {font: italic 30px; color:blue; margin-top:-48px}
-- >
< /style >

Cu urmatorul cod obtinem text suprascris:
< p align=center >
< span id=background >Stiluri< /span >< /p >

< p type="text/css" style="margin-top:-53px;" align=center >
< span id=foreground1 >
definite in< /span >< /p >

< p type="text/css" style="margin-top:-48px;" align=center >
< span id=foreground2 >antetul fisierului< /span >< /p >

Stiluri

definite in

antetul fisierului

------------------------------------------------------------
Acelasi efect il puteti obtine si cu: 
.baza {color:red; font:50px}
.supra1 {font: italic 50px; color:green; margin-top:-53px}
.supra2 {font: italic 30px; color:blue; margin-top:-48px}
folosind codul: 
< center >
< p class=baza >Stiluri< /p >
< p class=supra1 >definite in< /p >
< p class=supra2 >antetul fisierului< /p >
< /center >

Stiluri

definite in

antetul fisierului

------------------------------------------------------------
Aici aveti o imagine; daca veti seta browserul sa nu incarce imagini (Tools - Internet Options - Advanced - debifati la "Show pictures" - OK , apoi Refresh) o sa aveti o surpriza sub imagine; la codul anterior am adaugat: 
< p type="text/css" style="margin-top:-120px;" align=center >
< span >< img width=312 height=120 src="../foto/text-suprapus.gif"
 alt="asta ati vedea cu I.E.5 si monitor 15'', 800x600" border=1 >
< /span >< /p >
adica am acoperit textul cu imaginea.

Stiluri

definite in

antetul fisierului

asta ati vedea cu I.E.5 si monitor 15'', 800x600

------------------------------------------------------------
Aici am pus imaginea ca fond intr-o celula de tabel in care am scris apoi cele 3 randuri, deci textul acopera imaginea; nu se suprapun chiar perfect - imi dau seama deoarece literele sunt un pic mai groase, dar in rest e foarte bine (eu le vad pe 15" cu IE5, nu stiu cum le vedeti dvs.).

Stiluri

definite in

antetul fisierului

 
< table border=1 cellpadding=0 
cellspacing=0 >
< td background="../foto/text-suprapus.gif"
 width=312 height=120 >
< p align=center >
< span id=background >Stiluri< /span>< /p >
< p type="text/css" style="margin-top:-53px;
 margin-left=45px" >
< span id=foreground1 >
definite in< /span >< /p >
< p type="text/css" style="margin-top:-48px;
 margin-left=55px" >
< span id=foreground2 >antetul fisierului
< /span >< /p >< /td >< /tr >< /table >
Stiluri definite : a) intern; b) in antet; c) extern;

[ Home ] [ Stiluri de text (atribute) ]