Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

laying out a webpage using css

LAY OUT in CSS

In print design, laying out a page or a spread means bringing in imagery, wrapping text, creating columns, making gutter, and defining spaces with graphic treatments like borders. Web design is the same except instead of using a page layout program like InDesign, we use CSS to push HTML tags around. Wrapping Text with Floats If you want an image to have text wrapping, you can use CSS to float it to the left or right. Simply telling an image to float: left; or float: right; will do the trick. Also, youll want to make sure theres some margin around the sides of the image the text might bump against. For an image that is floated to the left, that means adding margin to the right side (and potentially the top and bottom.) For an image that is floated to the right, that means adding margin to the left side. Image floated right, margin on the left

Heres the HTML: <img class="headshot" src="images/tron-guy. jpg" alt="Tron Guy"> <p> Tron Guy A husky, 48-year-old computer consultant, Jay Maynard, designed a Tron costume, complete with skin-tight spandex and light-up plastic armor, in 2003 for Penguicon 1.0 in Detroit, Michigan. The Internet phenomenon began when an article was posted to Slashdot, followed by Fark, including images of this costume. </p> Heres the CSS: img{ float: right; margin-left: 10px; margin-bottom: 10px; }

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

floating for layout

Most web designs call for columns to be part of the layout, but CSS doesnt have a way to say, I want to make a column. We use floats instead when we want to make columns, using CSS to float tags to the left or right just like we did in the image example on the last page. Consider this HTML: <div class="wrap"> <div class="main"> Make this the left column. </div> <div class="side"> Make this the right column. </div> </div> Creating columns is a 3 step process. 1. Set the width. If you dont set the width for boxes, floating usually wont do any good. .wrap{ width: 960px; } .main{ width: 760px; } .side{ width: 200px; } 2. Set the floats. We use the float property to tell the <div> tags to float left and right. .wrap{ width: 960px; } .main{ width: 760px; float: left; } .side{ width: 200px; float: right; }
<div class="wrap"> <div class="main"> </div> <div> <div = class"side"> </div> <div class="wrap"> <div class="main"> </div> <div = class"side"> </div> <div> <div = class"side"> </div> <div> <div class="wrap"> <div class="main"> </div>

When we float children tags, the parent tag colapses on itself. Dont ask why it just does.

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

Notice that step 2 caused something odd to happen. The parent container <div class=wrap> is not surrounding the nested boxes anymore it collapsed on itself. Here is how you will fix this. 3. Clear your floats. The simplest meathod that works most of the time is to set the overflow property of the parent element to hidden like this. .wrap{ width: 960px; overflow: hidden; } .main{ width: 760px; float: left; } .side{ width: 200px; float: right; } Once we clear the float, the parent tag encapsulates its children again. There are many ways to clear floats, this is just one technique. Check out these links for more. http://css-tricks.com/all-about-floats/ http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ http://www.w3.org/wiki/Floats_and_clearing http://www.cssforums.org/
<div class="wrap"> <div class="main"> </div> <div = class"side"> </div> <div>

fancy with floats

If you have a series of tags and you float them in the same direction, they will float beside each other. This specification would be useful if you wanted to make a three-column layout, for example. Its common for web designers to create horizontal navigation (buttons) by floating a series of <li> tags to the left. In print design we refer to the space between columns of text as gutters, in web design we typically create this type of spacing with padding or margin.

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

spacing with border, padding & margin

If you have a series of tags and you float them in the same direction, they will float beside each other. This specification would be useful if you wanted to make a three-column layout, for example. Specifying the border, padding, or margin property in CSS adds to the width of a tag. We have to do a little math to keep it all straight. When you want to put space between objects in your designs, everything is much simpler when you use round numbers. Lets say you have a two-column layout with an overall width of 960 pixels. The main column needs to add up to 760 pixels, and the sidebar column needs to total 200 pixels. The children add up to 960 pixels, so they will fit in to a 960-pixel parent tag.

760 px

200 px

960 px

But add any amount of width to either of the interior columns with a border, padding, or margin property, and your layout will break because the total width of the interior coulumns is greater than the parent. If you add a 10-pixel border to the sidebar, the total width of the sidebar becomes 210 pixels, and 970 total pixels wil not fit in to a 960 pixel parent box.
960 px

When a floated object doesnt have room to float up next to another object, it just drops down to the next line. Takeaways: Keep it simple. Were designers not mathematicians. If something seems to be pushed down below where it belongs, check the combined width by adding up the width declared for your object, as well as the width added by the border, padding, or margin on the left and right sides of your tag. Odds are you have tried to squish too much into too small a space. width: 500px; width: 500px; border: 10px;

760 px

210 px

width: 500px; border: 10px; padding: 10px;

width: 500px; border: 10px; margin: 10px;

width: 500px; border: 10px; padding: 10px; margin: 10px;

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

setting borders
We set borders for a tag using the border property. nav{ border: 5px solid #000; } This CSS will set a solid border of five pixels on all four sides of the <nav> tag.

If you prefer more control over your borders than setting the border to be the same on all sides, you also have the following properties, starting clockwise from the top: border-top, border-right, border-bottom, and border-left. If you leave one of these out, your element wont have a border on it at all. So if you want a thick dark line at the bottom of your navigation and a thin grey one at the top of your navigation but nothing on the sides, you might write your CSS like this: nav{ border-bottom: 5px solid #000; border-top: 1px solid #DDD; }

1.border-top

4.border-left

2.border-right

3.border-bottom

Notice that were putting three separate values in the value are of the CSS rule: The first is the thickness or width of the border (5px, 1px). The second is the style of border (solid). The third is the color (#000, #DDD). Youll want to keep those values in order and separate each with a single space, keeping them all on the same line Setting the Style of Borders If instead of s solid border, you wanted a dotted border, a dashed border, or a double border, you can create that as well. nav{ border-bottom: 5px solid #000; border-top: 1px dotted #DDD; }

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

adding padding
We use the padding property to add space that butts up against the border on the inside of a tag. As with the border property, you can set the padding for all four sides of a tag like this: nav{ border-bottom: 5px solid #000; border-top: 1px dotted #DDD; padding: 20px; } Or you can set a different padding for each of the four sides with the following properties (notice that they work just like the border properties, clockwise starting with the top): padding-top, padding-right, padding-bottom, and padding-left. nav{ border-bottom: 5px solid #000; border-top: 1px dotted #DDD; padding-top: 20px; padding-bottom: 15px; }
1.border-top

4.border-left

2.border-right

3.border-bottom

Since the padding is on the inside of the border, if you set a background color for the tag, it will fill in behind the padding all the way up against the border. nav{ border-bottom: 5px solid #000; border-top: 1px dotted #DDD; padding-top: 20px; padding-bottom: 15px; background-color: #CCC; }

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

setting margins
The margin property is similar to padding, in that it also butts up to against the border. The difference is that the margin is on the outside of a tag. When you set a background color, it doesnt fill in behind the margin because its outside the border. You set the margin property the same way you do the padding that is you can set the padding for all four sides of a tag, or you can set a different padding for each of the four sides with the following properties (notice that they work just like the padding properties, clockwise starting with the top): margin-top, margin-right, margin-bottom, and margin-left. nav{ border-bottom: 5px solid #000; border-top: 1px dotted #DDD; padding-top: 20px; padding-bottom: 15px; background-color: #CCC; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }

using css shorthand for padding & margins

Writing CSS can get really wordy really fast. Css shorthand allows us to accomplish the same thing in fewer keystrokes. The margin & padding properties share the same shorthand, but you have to remember the order, starting at the top and working clockwise. div{ padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; } Becomes this: div{ padding: 10px 20px 30px 40px; } If you want to center your layout in Web design, you do that by setting the margin on the right and left of a tag to auto and declaring a width for the tag. There are several ways to do this:
margin: 10px auto 5px auto; margin: 0 auto; margin: auto; 3.margin-bottom 1.margin-top

4.margin-left

2.margin-right

One step further looks like this: div{ padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; } div{ padding: 0px 20px; }

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

removing default spacing with a css reset

The math can sometimes be a frustrating aspect of web design, especially under deadlines. Eventually you will add space to something and the math wont add up and you wont understand what isnt working. This is a good time to think about a CSS reset. HTML reads like a word doc without any CSS applies. Thats because every browser applies default CSS to HTML files so that they are readabletheres already CSS telling your web page to look that way before you ever write any CSS. This default CSS controls the size of your heading tags and paragraph text, the spacing above and below your headings, paragraphs and lists, and much more. The problem is that every browser does this a little bit differently, so spacing, fonts and font sizes will vary from browser to browser. You can override the default CSS by writing your own CSS, but that can become laborious. To get around this CSS developers came up with the idea to reset the default CSS from browsers by overriding it with a reset style sheet that they use on every project. With a CSS reset, every browser is instructed to agree on how much spacing there should be around each tag, how big each font should be and a few other things. Starting each project with a CSS reset every time will make your math work much better. Here is one example:
<link rel=stylesheet type=text/css href=http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css>

This is from http://yuilibrary.com/yui/docs/cssreset/ & like other CSS links, this goes into the head tag in your HTML file. Visit this site for more info: cssforprintdesigners.com/css-reset