logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Reduce the Width of the WebCards Layout


In this tutorial, we will continue to customize the WebCards layout. As mentioned earlier, the Facebook iframe canvas is only 510 pixels wide. So, we will need to change the width of the layout.

If you open the template.html file, you will see that there is a div called container which encloses the entire webpage. You will find this div directly after the body tag.

<body>
<div id="container">

We can use the CSS max-width property to prevent the width of this container div to go beyond 510 pixels. Open the webcards.css file and find the style for the container div.

#container{
width: 80%;
min-width: 800px;
margin: 0 auto;
}

We will want to change the width property to 510 px and the min-width to max-width.

#container{
width: 510px;
max-width: 510px;
margin: 0 auto;
}

That takes care of the width. Rules are made to be broken, aren't they? If you wish to be very sure that the webpage doesn't go beyond 510 pixels in some problematic web browsers, you can enclose the contents of the container in one of those old-fashioned and sinful tables with a width of 510 pixels. We can put the table code just after the container div. You will want to close the table at the bottom of the container code.

As you can see, the text on the page appears to be large and not in proportion to the width of our layout. We can make a change to the webcards.css file that will reduce the font size to .625em.

http://www.mywebcards.net





Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Add Reduce+the+Width+of+the+WebCards+Layout to Twitter Add Reduce+the+Width+of+the+WebCards+Layout to Facebook Add Reduce+the+Width+of+the+WebCards+Layout to MySpace Add Reduce+the+Width+of+the+WebCards+Layout to Del.icio.us Digg Reduce+the+Width+of+the+WebCards+Layout Add Reduce+the+Width+of+the+WebCards+Layout to Yahoo My Web Add Reduce+the+Width+of+the+WebCards+Layout to Google Bookmarks Add Reduce+the+Width+of+the+WebCards+Layout to Stumbleupon Add Reduce+the+Width+of+the+WebCards+Layout to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Designing a Montage Layout SVG Cut File

Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor