WordPress Mobile Web Development：Beginner's Guide
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Time for action—digging into the Carborelli's layout styling

Luckily for us, the Carborelli's theme stylesheet has a layout section right at the beginning. This contains code for different parts of our layout as follows:

  1. The main layout uses the following code: 
    /* main layout */
body {
margin: 20px auto;
width: 940px;
padding: 10px;
}
  2. The header layout uses the following code: 
    /* Structure the header */
header {
padding: 0;
}
#site-title {
width: 330px;
clear: none;
float: left;
padding: 0;
margin: 0;
}
#site-title img {
width: 200px;
}
#header-right {
width: 560px;
float: right;
}
#header-right address {
clear: right;
float: right;
text-align: right;
}
#header-right img {
float: right;
height: 30px;
margin: 10px 0 10px 10px;
}
#header-right .CTA {
clear: right;
float: right;
padding: 20px 20px 20px 40px;
margin: 20px 0;
font-size: 1.5em;
position: relative;
}
#header-right .CTA img {
position: absolute;
top: -20px;;
left: -30px;
width: 180px;
height: auto;
}
#access {
float: left;
margin: 20px 0 0;
width: 920px;
font-size: 16px;
}
  3. The code for the content layout is as follows: 
    /*Structure the content*/
#main {
clear: both;
padding: 20px 0 0 0;
}
#content {
float: left;
width: 600px;
}
/*alternative styling for pages with no sidebar*/
.page-template-onecolumn-page-php #content, .single-attachment #content {
float: none;
width: 920px;
}
/* Structure the sidebars */
#primary,
#secondary {
float: right;
width: 300px;
}
#secondary {
clear: right;
}
  4. The footer layout uses the following code: 
    /* Structure the footer area */
footer {
clear: both;
}
#copyright {
float: left;
width: 470px;
}
#credits {
float: right;
width: 470px;
}

What just happened?

We dug into the layout CSS for the Carborelli's theme to see how the theme is built. Let's go through the following points to see how the code works:

  • Main layout: Here the overall width of <body> is set to 940px with 10px padding and automatic margins on the right-hand and left-hand sides, which will center it. All fairly standard stuff. You may be using a different width for your site, but once we come to adopting a fluid layout, you'll see that won't matter.
  • Header layout: The header includes layout styling for the following elements:
    • header is the header itself (you may be using <div id="header"> for this).
    • #site-title is the area on the left-hand side, which contains the logo as an image (#site-title img) within the markup. This is floated towards the left-hand side with no margin or padding, with widths defined for it and for the image. There is also text in this div, but we use CSS elsewhere to hide it from browsers with CSS enabled—it's an accessibility feature targeted at screen readers, which we don't need to worry about in this context.
    • #header-right is the area to the right-hand side of the header containing the address (<address>), social media links (#header-right img), and the call to action button (#header-right .CTA) and (#header-right .CTA img).
    • #header-right .CTA has a large left-hand side margin to allow space for the image and relative positioning so that the image inside it can be absolutely positioned. #header-right .CTA img has styling to position and size it.
    • #access contains the navigation menu and is set to 920px of width, which is the full width of the body when you take the padding into account. It has a slightly larger than usual text set using font-size: 16px (the default, set elsewhere, is 14px) and also has a margin of 20px at the top and zero elsewhere.

      As you can see, all these elements have widths defined in pixels to ensure they fit correctly within 920px, which is the width of <header> after taking into account the padding on <body>. There is also styling for floats and text alignment, which we do not need to alter for a fluid layout.

      Note

      For more information on floats, see http://css-tricks.com/all-about-floats, and to learn about relative and absolute positioning, see http://www.alistapart.com/articles/css-positioning-101.

    • Content layout: This section consists of styling for the #main div, which contains the content and the sidebar, for each of #content, #primary, and #secondary, with #primary and #secondary being sidebars, or in the WordPress terminology, widget areas:
      • #main is set with 20px of padding at the top but none at the sides or bottom, which means it has a total width of 920px (the <body> width of 940px minus the 10px padding on both sides). The declaration clear: both ensures that the content is below the floated elements in the header and doesn't wrap around them.
      • #content is floated towards the left-hand side and has a width of 600px, approximately two-thirds of the width of #main. For pages using a template without a sidebar (the alternative styling in the comment), the width is set at 920px with no float, because the content will span the entire width of the page.
      • #primary and #secondary have a width of 300px, approximately one-third of the width of #main but allowing some breathing room between them and the left-floated #content 20px to be precise.

        Note

        You can find out more about widget areas at http://codex.wordpress.org/WordPress_Widgets.

    • Footer layout: The <footer> element (or possibly <div id="footer"> in your site's theme) includes two elements—#copyright and #credits, which contain small print information about the site. Each of them is set to 470px of width, which is half of the width of <body>—and floated left and right so that they sit next to each other. The footer is also set to clear both floated elements within #main.

As we have seen, the layout of the Carborelli's site is set in pixels. This is second nature to a lot of web designers, who are used to taking a design in Photoshop that's pixel perfect and turning it into a site.

Can you see one of the disadvantages of doing this? What would happen if the decision was made to change the overall width of the site? Say in a few year's time, the site owner decides that as all the visitors are using larger screens, the site should be 1200px wide. What would we as the site's developers have to do? That's right, we'd have to look at all those widths, work out how they would change, and manually change their pixel values.

Not an easy task and not a necessary one either if we use a fluid layout. So let's do it!

本周热推：
Kali Linux：An Ethical Hacker's Cookbook（Second Edition）Getting Started with Red Hat Enterprise VirtualizationVMware Virtual SAN CookbookCreating templates with ArtisteerWindowsServer2012Hyper-V虚拟化部署与管理指南
上一章目录下一章