Style Sheets Web
CSS tips & tricks

Ky dokument është një përkthim i "CSS Tips & Tricks." Përkthimi nuk është një përkthim i normative dhe mund të përmbajë gabime e përkthimit. Rishikimi i statusit të vetëm në anglisht në dokument http://www.w3.org/Style/Examples/007/figures.html W3C është e mbrojtur nga copyright.

Shifrat & captions

HTML nuk ka një element që lejon për të futur një figurë me një titull. Kjo ishte propozuar dikur (shih HTML3), por kurrë nuk e bëri atë në HTML4. Këtu është një mënyrë për të simulojnë një element i tillë figura:

<div class="figure">
  <p> <img src = "eiffel.jpg" width = "136"
    height = "200" alt = "Kulla Eifel">
  <p> model Shkalla e
    Kulla Eifel në Parc Mini-Francë
</ div>

Pastaj në fletë stilin e keni përdorur klasë "shifër" për të formatin figura mënyrën që ju dëshironi. Për shembull, për të shket figura të drejtë, në një hapësirë e barabartë me 25% të gjerësia e paragrafëve përreth, këto rregulla do të bëjnë mashtrim:

div.figure (
  float: right;
  width: 25%;
  border: hollë argjendi solid;
  margin: 0.5em;
  padding: 0.5em;
)
p div.figure (
  text-align: center;
  font-style: italic;
  font-size: vogla;
  text-indent: 0;
)

Në fakt, vetëm dy deklaratat (noton dhe gjerësi) janë thelbësore, pjesa tjetër është vetëm për dekorim.

Shkallë image

Nuk është një problem këtu, dhe që është se imazhi mund të jetë tepër i gjerë. Në këtë rast, imazhi është gjithmonë e gjerë dhe 136 px DIV është 25% e tekstit përreth. Pra, nëse ju bëni dritare të ngushtë, ajo mund të jetë që imazhi përplot DIV (try it!).

Nëse ju e dini gjerësia e të gjitha imazhet në dokument, ju mund të shtoni një gjerësi minimale për të DIV, si kjo:

DIV.figure (
  min-width: 150px;
)

Një tjetër mënyrë është që të shkallës imazhin e vetë. Kjo është ajo që kemi bërë me imazh të drejtë këtu. Siç mund ta shikoni ndoshta nëse bëni dritare shumë të gjerë, pamjet JPEG nuk shkallë shumë të mirë. Por nëse imazhi është një diagram ose një grafik në format SVG, shkallë e lartë në fakt punon bukur. Këtu është çmimi deri ne përdorura:

<div class="figure">
  <p> <img class = "luspa" src = rr "-tropez.jpg"
    alt = "Shën Tropez">
  <p> Saint Tropez dhe vet
    fort në mbrëmje dielli
</ div>

Dhe kjo është fletë style:

div.figure (
  float: right;
  width: 25%;
  border: hollë argjendi solid;
  margin: 0.5em;
  padding: 0.5em;
)
p div.figure (
  text-align: center;
  font-style: italic;
  font-size: vogla;
  text-indent: 0;
)
img.scaled (
  width: 100%;
)

Përveç kësaj vetëm është rregull e fundit: ai bën imazh të gjerë, si brenda DIV (zona brenda kufirit dhe mbushje).

Vënë caption në krye

Ju mund edhe t'i titull më të lartë, duke thënë shfletuesit që shifër duhet të jetë i formatuar si një tryezë. Just add këto rregulla për të fletë stili nga seksionet e mëparshme:

p div.figure (
  display: table-cell;
  width: 100%;
)
div.figure p + p (
  display: table-caption;
  caption-Për Faqe: top;
)

'+' Shkakton rregull për ndeshjen e një P që ndjek një tjetër P. Që do të thotë në këtë rast se ajo përputhet P dytë e figura, që përmban një titull.

(Kjo teknikë mund të vë në dukje disa bugs në shfletues të vjetër, veçanërisht kur kombinuar me shkallë imazhin, ashtu siç bëra këtu.)

Shifrat e XHTML

Aktuale (janar 2003) propozim për XHTML2 ka një element Caption, e cila mund të përdoret me OBJEKT. Në qoftë se propozimi është i pranuar, ajo nuk do të jetë më e nevojshme për të përdorur DIV dhe KLASA, por, të paktën në XHTML2, ju mund të shkruani:

<object data="eiffel.jpg">
  <caption> model Shkalla e
    Kulla Eifel në Parc
    Mini-Francë </ caption>
</ object>