Navigare rapidă în pagină:
- Rezolvarea generală a problemei
- Aplicație în vrac pentru toate imaginile
- Suprapunem textul pe imagine
Amplasarea corectă și frumoasă a tuturor obiectelor pe pagină este un element integrant al designului oricărui site care se respectă. Ca întotdeauna, CSS este indispensabil aici. Cert este că împachetarea imaginii cu text HTML se face de la sine (cu ajutorul atributelor align=left, align=right ale tag-ului img), dar nu creează indentări. Prin urmare, nu te poți descurca fără CSS.
Rezolvarea generală a problemei
CSS? Cunosc mai multe moduri de a rezolva problema.
Deci, de exemplu, o imagine poate fi plasată într-o etichetă DIV, la care proprietatea float:left sau float:right poate fi setată folosind CSS, cu indentările necesare.
Dar nu aș numi această metodă cea mai corectă - de ce să includ o etichetă suplimentară în document, dacă problema poate fi rezolvată exclusiv în cadrul etichetei IMG?
Acest lucru se face prin atribuirea acelorași proprietăți - float, care este responsabil pentru aliniere și margine, care este responsabilă pentru indentări.
Mai întâi, să atribuim o clasă imaginii noastre:
Acum să scriem proprietățile CSS corespunzătoare - să spunem că imaginea noastră va fi în stânga:
.img_class { plutire: stânga; marjă: 10px 10px 10px 0; }
Proprietatea marginii este necesară pentru a seta indentarea textului din imagine - altfel se va ghemui aproape de ea, ceea ce nu va fi foarte frumos. În același timp, le punem sus, dreapta și jos și setăm marginea din stânga egală cu zero, deoarece imaginea în sine va fi în stânga.
Aplicație în vrac pentru toate imaginile
Dacă doriți ca toate imaginile dintr-un document să fie aliniate la stânga, atunci aceasta este întrebareapot fi rezolvate imediat la nivelul blocului (elementului) paginii în care se află - pentru a nu prescrie de fiecare dată clasa pentru imagine. Chiar și o mică economie în trafic merită.
Să presupunem că pozele sunt în postare, care este afișată pe pagina site-ului dvs. în .
În acest caz, va fi suficient să scrieți următorul cod în fișierul CSS al site-ului dvs.:
.conținut img { plutire: stânga; marjă: 10px 10px 10px 0; }
Acum toate imaginile din blocul „conținut” vor fi aliniate la stânga și vor avea indentările de mai sus. Dacă doriți să faceți o excepție pentru o imagine individuală - de exemplu, plasați-o în dreapta, atunci va trebui să setați un id pentru ea (de exemplu, id=»my_img») și să scrieți următorii parametri în fișierul css (trebuie să înceapă cu un semn hash - #):
#my_img { float: dreapta; margine: 10px 0 10px 10px; }
Suprapunem textul pe imagine
Uneori este necesar ca textul să fie scris direct pe imagine, de exemplu, este adesea plăcut să faci o imagine mare pentru articol și să scrii titlul articolului sau un fel de adnotare pe el.
Din nou, există multe moduri de a face acest lucru. Le voi da pe cele două cele mai populare.
În primul rând, puteți crea un bloc în care va fi scris textul, iar imaginea va acționa ca fundal pentru acest bloc:
Textul care va fi suprapus imaginii
.blocul_meu { fundal: url (my_img.jpg) sus stânga fără repetare; lățime: 500px; înălțime: 300px; umplutură: 400px 0 0 0; }
În acest bloc, linia de text va fi plasată în partea de jos a blocului - cu o margine superioară de 400 de pixeli.
Această metodă este potrivită în special pentru elementele de design (capac, logo-ul site-ului) în care dimensiunea imaginii și textul care va fiscris.
O altă metodă este să creați două blocuri (unul cu o imagine, unul cu text) și să plasați unul „peste” celuilalt conform parametrilor specificați. Marele plus al acestei metode este că puteți seta fundalul (inclusiv transluciditatea) în blocul de text:
Textul care trebuie suprapus pe imagine
.img { lățime:500px; înălțime: 300px; poziție: relativă; .text { culoare de fundal: #FFF; lățime: 500px; înălțime: 50px; poziție: absolută; stânga: 0px; sus: 450 pixeli; }
În exemplul dat, am plasat un bloc în interiorul altuia folosind proprietatea de poziție - blocul cu textul va avea un fundal alb și va fi situat în partea de jos a imaginii.
După cum puteți vedea, nu este nimic dificil în împachetarea clipurilor și suprapunerea textului pe ele, principalul lucru este să experimentați și să alegeți cea mai de succes opțiune!