Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Reparatie termostat Rehau H 230

La multi ani @Cojocel!

Recomandari Baby monitor Wi-Fi!

GENER8ION, 070 Shake - Neo Surf (...
 Trusa unghii profesionala

La ce sa ma astept la urmatoarele...

Sunt dese/normale ofertele de van...

Comanda online geaca
 Īmbracaminte anti frecare

Caut o piesa muzicala

Ce reprezinta Free Dos?

Care este temperatura voastra de ...
 Operatiuni ante zugravit

Teapa sa nu sa dai avans la prelu...

Vacanta in SUA ( NY )

Asigurare RCA sigura
 

Text centrat peste imagine

- - - - -
  • Please log in to reply
5 replies to this topic

#1
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,312
  • Înscris: 16.07.2008
As vrea sa folosesc imaginea atasata, de trei ori (trei post-it-uri unul langa altul), peste care as vrea sa scriu un text (multirand, cu <br>), centrat vertical si orizontal pe poza.
Layout fluid (deci cu procente, nu cu px)!!!

Am incercat o multitudine de solutii de pe net (SO), dar nici una nu mi-a functionat. Eventualele modificari pe care le incercam, sa ma joc, pentru a obtine ceea ce vroiam, le facem cu Firebug-ul.

Ca idei, am incercat sa pun imaginea ca background dic-ului care contine textul (dar e prea mare imaginea si nu o pot scala).
Am incercat apoi sa fac un div care sa contina imaginea respective cu <img>, si apoi un alt div pentru text, introdus cu <span> sau cu <p>. Si aceste doua div-uri intr-un alt div parinte (parintele sa aibe position relative si celalalt absolult, cu margin 45%).

Imaginea este mai mare, si de aceea am zis sa o introduce intr-un div, separate, ca sa pot sa ii dau in css width (ca altfel, bacgroundul nu stiu sa il scalez).

Ah, ca fiind layout fluid, la redimensionare cu mouse-ul a ferestrei, poza se va scala, dar textul nu, este o alta poveste. Pentru ca am incercat si varianta de a transforma textul care sa fie afisat peste imaginea post-it in imagine, si apoi sa pun imagine peste imagine. Dar, din nou am probleme de pozitionare (centrare).

Ca test, am incercat sa fac un div cu background colorat (acelasi albastru ca post-it-ul), in care sa am textul centrat, si asa merge foarte bine, dar cand vreau sa inlocuiesc culoarea cu imagine (ca background scalat), sau sa pun <img>, lucrurile nu mai merg. Textul apara sub fiecare post-it.

Va rog, ma poate ajuta cineva?
Multumesc.


PS. As posta si codul, dar, dupa cum am spus, am incercat o multitudine de solutii); ideile incercat insa mi le-am expus mai sus.

Attached Files



#2
MembruAnonim

MembruAnonim

    MembruAnonim

  • Grup: Banned
  • Posts: 358,351
  • Înscris: 08.10.2015
Attached File  filaB.jpg   92.27K   7 downloads

#3
tigerheart

tigerheart

    Savage Member

  • Grup: Senior Members
  • Posts: 9,664
  • Înscris: 07.08.2008
@colombo2003, incearca sa pui pe https://jsfiddle.net/ codul incercat de tine...

#4
rid

rid

    Senior Member

  • Grup: Senior Members
  • Posts: 3,785
  • Înscris: 23.02.2006

 colombo2003, on 04 martie 2016 - 22:46, said:

Va rog, ma poate ajuta cineva?

Cam asa`i ce vrei ?

#5
vasileiorgu

vasileiorgu

    Member

  • Grup: Members
  • Posts: 248
  • Înscris: 08.11.2015
<style>
div{width:20%; display:inline-block; text-align:center; margin-left:-4px; position:relative;}
div span{position:absolute; left:0px; top:0px; width:100%; height:100%;}
div span:before{content:""; display:inline-block; height:100%; vertical-align:middle;}
div span strong{vertical-algin:middle; display:inline-block;}
div img{width:100%;}
</style>
<div>
<span><strong>Foaie verde<br />loboda</strong></span>
<img src="http://forum.softpedia.com/uploads/monthly_03_2016/post-349052-0-00354800-1457123932_thumb.png" />
</div>
<div>
<span><strong>Foaie verde<br />loboda</strong></span>
<img src="http://forum.softpedia.com/uploads/monthly_03_2016/post-349052-0-00354800-1457123932_thumb.png" />
</div>
<div>
<span><strong>Foaie verde<br />loboda</strong></span>
<img src="http://forum.softpedia.com/uploads/monthly_03_2016/post-349052-0-00354800-1457123932_thumb.png" />
</div>



#6
colombo2003

colombo2003

    Senior Member

  • Grup: Senior Members
  • Posts: 6,312
  • Înscris: 16.07.2008
Multumesc mult tuturor.
Cea mai convenabila solutie pentru mine (si adoptata) este cea a lui @rid.
Posted Image  Posted Image

PS. Se poate inchide!

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate