August 2006
Beginner to intermediate
496 pages
17h 36m
English
Content preview from CSS: The Missing Manual
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Tutorial: Negative Margin Layout
In this tutorial, you'll explore how to create a multi-column, float-based layout using the negative margin technique discussed in Section 11.1.1. Download the files as described for the previous tutorial. The files for this tutorial are contained inside the folder named chapter_11 → layout2.
Centering a Layout
Unlike the last exercise, all the HTML is already in place for this page. All you have to do is add CSS to create the layout. There are six major sections to the page, each enclosed in a <div> tag with an ID applied.
Figure 11-20. Turning a liquid design into a fixed width design is simply a matter of wrapping all the HTML inside the <body> tag in a new <div> tag and then creating a style that sets the width of the div. If you'd prefer to have the fixed design centered in the middle of the browser window, see the next tutorial.
In a text editor, open the chapter_11 → layout2 → start.html file.
Figure 11-21 shows the basic structure of the HTML (left) and the final result you're aiming for (right). Currently, the divs just stack one on top of the other, because you haven't added any CSS layout—yet.
Begin by creating a fixed width layout and centering it in the middle of the browser window.
In the <head> region of the HTML, place your cursor between the opening and closing <style> tags.
There's already an external style sheet attached to the page, ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.