Ifyou want yourdesign toscale wellwith different fontsizes, including(and this
is a critical point) IE6, you should use ems, because the measurements will be
based on how your users set the font size in their browsers. If you use pixels (px)
or points (pt), most browsers will let you scale the font up and down from your
chosen size; only IE6 ignores this, hence the need to use ems.
Ifyou’re aftera precisedesign with graphicalelements that lineupexactly, regard-
less of the font setting or browser window size, pixels is the most predictable
method of all. A pixel will nearly always represent a single dot on the user’s
screen. Whynearly? Becausemost browsers havea page zoomfacility thatmagni-
fies everything in proportion, over which you have little control.
Note that page zooming differs from font resizing, so it’s good to understand the
subtledistinction. Page zoomscales everything proportionally, whiletext resizing
only affects the text inside the various containers; this can often result in some
odd effects, as you’ll see later in the chapter.
Introducing Padding to the Project Site
Adding abit of breathingspace to your layout sure can improveit.Let’s now address
an issue on the project site—namely, the first-level headings.
Find the section in
style1.css
in which you set the color and size of your
h1
,and add
padding as shown below:
chapter4/website_files/07_heading_padding/style1.css
(excerpt)
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
}
Next, let’s give our headings a bit of head room:
chapter4/website_files/07_heading_padding/style1.css
(excerpt)
h2 {
color: navy;
font-size: 130%;
Build Your Own Website The Right Way Using HTML & CSS
144
Pdf create bookmarks - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
bookmark pdf in preview; pdf bookmark
Pdf create bookmarks - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
how to add bookmarks to a pdf; pdf reader with bookmarks
font-weight: normal;
padding-top: 15px;
}
Finally, find the tagline and give that some padding, too. Use the values below:
chapter4/website_files/07_heading_padding/style1.css
(excerpt)
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
}
Refresh the view in your browser, and you’ll see the clear improvement shown in
Figure 4.22.
Figure 4.22. Before and after: the benefits of extra padding
145
Shaping Up Using CSS
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; 'create optimizing options
add bookmark pdf; acrobat split pdf bookmark
VB.NET PDF File Split Library: Split, seperate PDF into multiple
how to split a PDF file into multiple ones by PDF bookmarks or outlines Valid value for each index: 1 to (Page Count - 1). ' Create output PDF file path
bookmark page in pdf; adding bookmarks in pdf
Margins
So, you’ve learned that you can size a block-level element, give it a border of your
choosing, and apply padding so that its content avoids bumping right up against
its edges. Let’s takea look at another very useful CSS property: the
margin
property.
The
margin
property allows us to specify how much space should exist outside an
element’sborder.Theonly differencebetween theCSS for the two paragraphsshown
in Figure 4.23 is that the declaration
margin: 30px
has been added to the second
one.
Figure 4.23. The difference between 
padding
and 
margin
is clearer when a border is present
We’re going to change the margin of two elements for now: the
ul
and
h2
elements.
Different browsers apply different default top margin values to these elements.
Rather than relying on the defaults, let’s set a value of 15 pixels, so that there's no
confusion about the size of this margin:
Build Your Own Website The Right Way Using HTML & CSS
146
C# PDF File Compress Library: Compress reduce PDF size in C#.net
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; // create optimizing options
how to bookmark a page in pdf document; split pdf by bookmark
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF file by top level bookmarks. The following C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
adding bookmarks to pdf; display bookmarks in pdf
chapter4/website_files/07_heading_padding/style1.css
(excerpt)
h2, ul {
margin-top: 15px;
}
The Box Model
What we’ve been looking at in this chapter is the box model. A block-level element
can be manipulated using a combination of
margin
,
border
,
padding
,
height
,and
width
values. These properties can be seen together in Figure 4.24.
Figure 4.24. The box model explained
The Broken Box Model
If you’re using IE version 6 or later (check in
Help
>
About Internet Explorer
and
look for
Version
), you should have little problem sizing and manipulating block-
level elements as I’ve described here, as long as you’ve included a doctype at the
beginning of your web page. Without a doctype, IE reverts to quirks mode.
In quirks mode, IE calculates widths and heights using a different—and incor-
rect—method. This problemarises becauseIE versions 4and 5, which wereamong
the first browsers to support CSS, got some of the details wrong (such as the box
model). Microsoft fixed those problems in IE6, but in the interim many sites on
the Web had been written to use Microsoft’s incorrect interpretation of the CSS
rules. Microsoft was in a pricklysituation: professionalwebdevelopers demanded
that Microsoft fix the bugs but, if it complied, users would be left to battle with
most web pages not displaying as intended, sometimes with horrible results.
147
Shaping Up Using CSS
C# Create PDF Library SDK to convert PDF from other file formats
file. Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields.
export pdf bookmarks to text file; bookmarks in pdf from word
VB.NET Create PDF Library SDK to convert PDF from other file
Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields in Visual Basic .NET application.
excel print to pdf with bookmarks; create bookmarks pdf files
Microsoft’s answer was touse atechnique called doctypeswitching. If developers
includeda doctype, theirpageswould bedisplayed accordingto thecorrect rules.
Pages without a doctype (most pages on the Internet at that time) would be dis-
played in quirks mode—the same way they appeared in IE5.
Ifyou stickto advicegiven in this bookand use the markup provided, you should
avoid any problems relating to quirks mode. However, if you do see noticeable
differences between web pages viewed in IE and in other browsers, you may be
experiencing the “broken box model” problem. If you think this is the case, your
best course of action would be to head over to SitePoint’s CSS Forum and ask
your questions.
3
Positioning Elements Anywhere You Like!
Without any intervention, a web browser will simply display the items on the page
in the same order as they appear in the source. So, if your markup contains a
heading followed by navigation, a second heading, three paragraphs of text, and a
quotation—that’s precisely what you’ll see on the screen, in that exact order. And
until now, this has been the way we’ve approached our project site, adding content
in the order in which we’ve wanted it to appear on the page. But in this section,
I’m going to show you some of the really powerful effects that CSS can achieve:
you’re going to learn how to position certain sections of the site in specific areas
on the screen.
With regards to CSS layouts, there are many, many different ways that you can ap-
proach this task. Ultimately, I cannot possibly teach you every available method.
If you want to investigate the topic further, I’d recommend that you pick up a copy
of another SitePoint book: HTML Utopia: Designing Without Tables Using CSS.
4
Showing the Structure
Let’s remind ourselves of the specific sections in our website:
3
http://www.sitepoint.com/launch/cssforum/
4
http://www.sitepoint.com/books/css2/
Build Your Own Website The Right Way Using HTML & CSS
148
.NET PDF SDK - Description of All PDF Processing Control Feastures
Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. PDF Create.
create bookmarks in pdf reader; edit pdf bookmarks
XDoc.Word for .NET, Advanced .NET Word Processing Features
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. Word Create. Create Word from PDF; Create Word
creating bookmarks in a pdf document; create bookmark pdf file
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us at Bubble Under</title>
<meta charset="utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a
splash!</p>
</div>
</div> <!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us </a></li>
</ul>
</div>
<div id="bodycontent">
<h2>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or email
<a href="bob@bubbleunder.com">bob@bubbleunder.com</a>.
</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
Border control
When you’re about to layout your webpage using CSS, rememberthis useful tip:
temporarily add a border to each section you’re planning tomove. Borders make
it mucheasierto seethe effects ofyourmarkup, and afterwards you simplyremove
that temporary style.
149
Shaping Up Using CSS
Let’s add a new (but temporary) rule to our stylesheet (
style1.css
)applying a border
to each of the elements. Insert this rule at theendof the stylesheet,so that it overrides
any border styles you might have set earlier:
chapter4/website_files/08_page_structure/style1.css
(excerpt)
#header, #sitebranding, #tagline, #navigation, #bodycontent {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}
Here, I’ve applied some padding, as well as a bottom margin, to make it easier for
usto see theitems that arenested (the
sitebranding
and
tagline
sectionsareinside
the
header
section). Let’s see what that CSS has doneto our web pages; Figure 4.25
shows the document displayed in the browser.
Figure 4.25. Revealing the page structure with red borders
It looks a bit ugly, doesn’t it? It’s going to get even uglier—for a short while—as we
move the text about. You know how it is when you move furniture around in your
house: while you’re halfway through the job, it can seem a little chaotic, but it will
all work out in the end. That’s exactly what’s going to happen with our project site.
Build Your Own Website The Right Way Using HTML & CSS
150
Now, let’s start moving these boxes around!
Absolute Positioning
Perhaps the easiest method for positioningitems using CSS is absolute positioning.
Using absolute positioning, we specify top and left positions (or coordinates) for
the item in question. Imagine directing a store owner to retrieve some jewelry for
you from the shop window with the words, “Can I have the watch that’s five along
and three down?”
Usingabsolute positioningis assimpleasadding a
position: absolute
declaration
to your CSS rule, and then specifying where you’d like that element positioned. In
the following example, we use
top
and
left
to position a
div
200 pixels from the
top of the browser viewport, and 200 pixels from its left edge:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Absolute Positioning</title>
<meta charset="utf-8"/>
<style type="text/css">
#redblock {
position: absolute;
top: 200px;
left: 200px;
color: white;
background-color: red;
width: 90px;
height: 90px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Absolute Positioning</h1>
<div id="redblock">This is the red block.</div>
<p>The red block is positioned 200 pixels from the top and 200
pixels from the left.</p>
</body>
</html>
Figure 4.26 shows the resulting display.
151
Shaping Up Using CSS
Figure 4.26. Absolute positioning in action
Getting Ready to Move into Position
We’re now going to position every element on our page using fixed coordinates re-
lative to the browser window’s top and left sides. Because of this, it’s worth taking
the time to undo some stylistic changes that can complicate matters. We’ll now
undo the
padding
and
border
properties that we set on the
body
element earlier.
1. Open
style1.css
and remove the
padding
and
border
declarations on the
body
element.
2. In their place, add two new declarations to set both
padding
and
margin
to zero.
The
body
element rule in your stylesheet should now look like this:
chapter4/website_files/09_body_no_padding_or_margin/style1.css
(excerpt)
body {
background-color: #e2edff;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 125%;
padding: 0;
margin: 0;
}
Build Your Own Website The Right Way Using HTML & CSS
152
Nothing Is Always Nothing
What’s the difference between zero feet, zero meters, and zero furlongs? There’s
no difference—they’re all measuring a zero distance, so the unit is unimportant.
This principle applies in the above CSS—hence why there’s no qualifying unit
of measurement for the padding and margin properties. If we want a value of
nothing, there’s no need to specify a unit of measurement, because whatever the
unit might be, it amounts to nothing!
Refresh the view in your browser, and you should see a page like the one shown in
Figure 4.27.
Figure 4.27. Padding and border removed from the body
Theheadingsin thepage—BubbleUnder.com (
h1
)and About Us(
h2
)—aresurrounded
by margins, which the browser inserts by default if we don’t specify margins of our
own. It’s a good idea to remove them—we’re aiming to “trim the fat,” tryingto have
each headingascloseas possible to thetop-left of its containing
div
.This will make
the headings easier to position, and ensure that the page looks the same across
browsers.
153
Shaping Up Using CSS
Documents you may be interested
Documents you may be interested