Tuesday’s class was quite a productive day. I spent my time positioning
images using classes and IDs in CSS and learning about using margins and
floating objects. The following shows some of the things I learnt:
Within this page there are two classes:
The first two images have been assigned the class leftImg, while the
third image has the class bottomImg. The HTML for this looks like:
The first two images are floated on the left and the text fits around
them with the margin of 50px clearly visible. The third image has been floated
to the right with a right sided margin of 50px, but we can see that the image
spills out over the container id and also the wrapper. This is one of the
problems of floating an image in this way as it has been removed from the flow
of the text within the container, but it can be fixed easily
enough.
There seems to be two ways to fix this: the first is to define the
height of your container. If you wanted each of your pages to have a set width
and height then this would be acceptable, but for pages with a lot of content
you might run the risk of the above example happening again.
The method that maria recommends us use is the clear parameter in the
footer id:
This parameter defines where floating elements are allowed and because
we have stated that no floating elements are allowed on the right side of the
footer we get the following result:
In this screen-grab from Dreamweaver we can see the sizes of the
different IDs. The right floated image still overflows the container, but
because of the clear command for right floated objects in the footer ID, the
footer now appears after the image.
The floating parameter can also be used on IDs. In the next example I
have floated the ID box1 on the left and added text to the box and the
container:
The HTML looks like this:
The text inside the container wraps around the box in the same way it
did for a floated image but the text inside the box goes beyond its borders.
This problem can be fixed by amending the box id:
The parameters overflow and word-wrap, which I have commented out here,
control how the text in this ID is displayed. If we set word wrap to
break-word, then the text will automatically wrap to the next line when it
reaches the border of the box.
The parameter overflow-y determines how the text is displayed when we
get to the bottom of the box. In this case, auto adds a scroll bar to the box
should the text extend beyond the bottom. When I comment these two parameters
back in, I get the following result:
Finally, I placed an image inside box floated to the right of the page:
The scroll bar was produced by adding the overflow-y: auto command to
the container ID, however it is probably better to increase the size of your
wrapper/container instead. The main problem though is that the image is
too big for the box it’s in and it has gone over the side.
I found two ways to fix this that work differently:
The first method sets the maximum width of any image to 100% of the
container size. We could specify a pixel amount as well, but by using a
percentage value changing the box size would change the picture size at the
same time. By only specifying width we preserve the aspect ratio of the image
inside the box, but in this instance because the image is too big it still goes
beyond the box it is supposed to be inside.
The second method sets the height of images inside of the ID box2 to a
maximum height of 200pixels, which is the same as that of box2. The image now
fits inside the box properly and the aspect ratio has been preserved also.
In either case, if we specified the height and width of images we could
scale our images to fit into a box, but this could cause the images to look
warped. When I produce my website I will be using photoshop to crop my
images to a set size.
No comments:
Post a Comment