Web Programming with html5, css, and JavaScript



Download 18,68 Mb.
Pdf ko'rish
bet61/98
Sana28.10.2022
Hajmi18,68 Mb.
#857632
1   ...   57   58   59   60   61   62   63   64   ...   98
Bog'liq
Web Programming with HTML5, CSS, and JavaScript

7.2 
Positioning Images
The 
img
element is an inline element (more formally, a phrasing element), so it gets displayed 
within the normal flow of its surrounding text. That works well for small images (icons), but not 
so well for medium and large images. See the smiley face image in 
FIGURE 7.1
. It’s a small image, 
an icon, and its default inline positioning works well. But the tree photographs? They’re taller and 
their default inline positioning causes the browser to generate quite a bit of dead space above the 
text lines in which they’re embedded. In general, you should avoid such dead space.
To avoid wasted space around a medium or large image, you might want to display it on 
a line by itself by surrounding it with a block element. We do that in an upcoming example, 
270
ChaptER 7
 
Image Manipulations, Audio, and Video


but for now, let’s focus on another technique—“floating” an image to the left or to the right, so 
its adjacent text displays along its right or left border, respectively. In 
FIGURE 7.2
, note how 
the tree photographs are floated to the left and to the right with the text wrapping around the 
photographs’ borders.
To float an image, you apply a CSS rule to the 
img
element, where the CSS rule uses the 
float
property and a value of 
left
or 
right
. You can see the complete source code for the Trees 
web page in 
FIGURE 7.3
, but, for your convenience, here are the CSS rules in charge of floating 
the two tree photographs:
.left {float: left; margin: 8px;}
.right {float: right; margin: 8px;}
The 
margin
property in this example is not required for floating, but without it, the image’s adja-
cent text will display uncomfortably close to the image. Here are the 
img
elements that use these 
CSS rules:
width="100" height="150" alt="">
width="150" height="100" alt="">

Download 18,68 Mb.

Do'stlaringiz bilan baham:
1   ...   57   58   59   60   61   62   63   64   ...   98




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish