. The margin and padding properties—for adding space around ele-
ments.
. The align and float properties—used to place your elements in rela-
tion to others.
The examples provided during this hour are not the most stylish examples of web content ever created, but they are not intended to be. Instead, the examples clearly show just how XHTML and CSS are working together. Once you master CSS through this and other hours, you’ll be able to create web-based masterpieces such as the one shown in Figure 14.1, an example at CSS Zen Garden. The sites at CSS Zen Garden probably do not look like the typical e-com- merce or social networking sites that you visit on a regular basis. Instead, these sites showcase the artistic possibilities that can unfold using CSS. Make no mistake, these sites take careful thought and planning, but the potential designs are limitless.
Using Margins Style sheet margins allow you to add empty space around the outside of the rectangular area for an element on a web page. It is important to remember that the margin property works with space outside of the element.
Following are the style properties for setting margins:
. margin-top—Sets the top margin.
. margin-right—Sets the right margin.
. margin-bottom—Sets the bottom margin.
. margin-left—Sets the left margin.
. margin—Sets the top, right, bottom, and left margins as a single
property.
You can speci fy margins using any of the individual margin propert ies or using the single margin property. Margins can be specified as auto, meaning the browser itself sets the margin in specific lengths (pixels, points, ems) or in percentages. If you decide to set a margin as a percentage, keep in mind that the percentage is calculated based on the size of the entire page, not the size of the element. So if you set the margin-left property to 25%, the left margin of the element will end up being 25% of the width of the entire page. The code in Listing 14.1 produces four rectangles on the page, each 250 pixels wide, 100 pixels high, and with a 5 pixel solid black border (see Figure 13.2). Each rectangle—or <div>, in this case—has a different back- ground color. We want the margin around each <div> to be 15 pixels on all sides, so we can use:
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:15px;
You could also wri te that in shorthand, using the margin property:
margin:15px 15px 15px 15px;
When you use the margin property (or padding, or border) and you want all four values to be the same, you can simplify this even further and use: margin:15px;
When using shorthand for setting margins, padding or borders, there are
actually three approaches, which vary based on how many values you use
when setting the property:
. One value—The size of all the margins.
. Two values—The size of the top/bot tom margins and the lef t/right
margins (in that order).
. Four values—The size of the top, right, bottom, and left margins (in
that order).
You might f ind i t easier to st ick to ei ther using one value or al l four values, but that’s certainly not a requirement.
Simple Code to Produce Four Colored <div>s with Borders
and Margins
<?xml version=”1.0” encoding=”UTF-8”?>Next, working with just the margin property in the style sheet entries in Listing 14.1, let’s shift the margins around. In this example, you can’t really see the right-side margin on any of these <div> elements because there’s nothing to the right of them and they are not aligned to the right. With that in mind, let’s set margin-right to 0px in all of these. Beyond that, the next
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Color Blocks</title>
<style type=”text/css”>
div {
width:250px;
height:100px;
border:5px solid #000000;
color:black;
font-weight:bold;
text-align:center;
}
div#d1 {
background-color:red;
margin:15px;
}
div#d2 {
background-color:green;
margin:15px;
}
div#d3 {
background-color:blue;
}
div#d4 {
background-color:yellow;
margin:15px;
}
</style>
</head>
<body>
<div id=”d1”>DIV #1</div>
<div id=”d2”>DIV #2</div>
<div id=”d3”>DIV #3</div>
<div id=”d4”>DIV #4</div>
</body>
</html>
set of goals is to produce the following:
. No margin around the first color block.
. A left-side margin of 15 pixels, a top margin of 5 pixels, and no bot-
tom margin around the second color block.
. A left-side margin of 75 pixels and no top margin or bottom margins
around the third color block.
. A left-side margin of 250 pixels and a top margin of 25 pixels around
the fourth color block.
This seems like it would be straightforward—no margin is being set around the first block. Except we want a margin at the top of the second block, so really there will be a visible margin between the first and second blocks even if we are not specifying a margin for the first block.
The new style sheet entries for the four named <div>s would now look like
this:
div#d1 {
background-color:red;
margin:0px;
}
div#d2 {
background-color:green;
margin:5px 0px 0px 15px;
}
div#d3 {
background-color:blue;
margin:0px 0px 0px 75px;
}
div#d4 {
background-color:yellow;
margin:25px 0px 0px 250px;
}
seems random but is actually quite useful for pointing out a few other important points. For example, when you recall that one of the goals was to produce no margin at all around the first color block, you might expect the border of the color block to be flush with the browser window. But as shown in Figure 14.3, there is a clear space between the content of the page and the frame of the browser windows.
If we were working on element placement—which we will get to in the next hour—this would cause a problem in your layout. To ensure that your placements and margins are counted from a position flush with the brows- er, you will need to address the margin of the <body> element itself. In this case, you would add the following to your style sheet:
body {
margin:0px;
}
Another “gotcha” to remember is that if you have two bordered elements stacked on top of each other but with no margin between them, the point at which they touch will appear to have a double border. You might then consider making the top element’s border-bottom half the width, and also make the bottom element’s border-top half the width. If you do this, the borders will appear to be the same width as the other sides when stacked on top of each other. Also, you might have thought that by using a left-side margin of 250 pix- els—the width of the <div>s—the fourth color block would begin where the third color block ended. That is not the case, however, because the third color block has a margin-left of 75 pixels. In order for them to even be close to lining up, the margin-left value for the fourth div would have to be 325 pixels.
Changing the styles to those shown in the code that follows produces the spacing shown in Figure 14.4. This gives the <body> element a zero margin, thus ensuring that a margin-left value of 25 pixels truly is 25 pixels from the edge of the browser frame. It also shows the second and third color blocks stacked on top of each other but with modifications to the border element so that a double border does not appear. Additionally, the fourth color block begins where the third color block ends.
body {
margin:0px;
}
div {
width:250px;
height:100px;
color:black;
font-weight:bold;
text-align:center;
}
div#d1 {
border:5px solid #000000;
background-color:red;
margin:0px;
}
div#d2 {
border-width:6px 6px 3px 6px;
border-style:solid;
border-color:#000000;
background-color:green;
margin:10px 0px 0px 15px;
}
div#d3 {
border-width:3px 6px 6px 6px;
border-style:solid;
border-color:#000000;
background-color:blue;
margin:0px 0px 0px 15px;
}
div#d4 {
border:5px solid #000000;
background-color:yellow;
margin:0px 0px 0px 265px;
}
shows some overlap between the right edge of the third color block and the left edge of the fourth color block. Why is that the case, if the color blocks are 250 pixels wide, the third color block has a margin-left value of 15 pixels, and the fourth color block is supposed to have a 265 pixel margin to its left? Well, it does have that 265 pixel margin, but that margin size is not enough because we also have to factor in the 6 pixels of border. If we change the margin property for the fourth color block to reflect the following code, the third and fourth blocks line up according to plan
Tidak ada komentar:
Posting Komentar