|
|
|
Design Principles and Elements
Design Principles and Elements
A truly shocking number of web designers are unfamiliar with the
basic principles and elements of design. Having never been
through any formal design education, many just go with what they
think 'looks good',...
Gain an edge by viewing your competitors source code
Doing business online is alot like the brick and mortar business is, but with alot less steps and hassles,... well kinda anyways. Now there are quite a few advantages to an online business vs a brick and mortar business; like we don't commute,...
Streamline Your Website Pages
Squeezing the most efficient performance from your web pages is important. The benefits are universal, whether the site is personal or large and professional. Reducing page weight can speed up the browsing experience, especially if your visitors are...
The Power of CSS
CSS or cascading style sheets are used to create a set of styles
that can be applied to your fonts, tables and most other
attributes of your web page. These styles allow you to create a
much cleaner, faster web page that search engines love and...
Using External Coding To Improve Search Engine Placement
Do you have lots of JavaScript coding in the header section of your web pages? Do you re-list your CSS styles at the top of every page? Do you have JavaScript coding spread throughout your web pages? If you answered yes to any of these questions...
|
|
| |
|
|
|
|
|
|
Column Designs with CSS
So CSS makes layouts easier than they were with tables - there's
not really much debate about that. One of the reasons many
people stuck with tables for so long (and, in fact, still stick
with tables to this day) is that it can be difficult to create
column-based designs using CSS. Since there are so many websites
that essentially consist of a middle column of content
surrounded by left and right columns containing navigation and
ads, this was considered to be unacceptable.
The Power of Float
Really, though, CSS columns aren't that difficult to produce
once you understand how CSS float rules work. Float allows you
to say that some parts of your content should 'float' next to
other parts, instead of being displayed one after the next (that
is, underneath each other).
Despite all the fear of column layouts in CSS, it's quite
simple. Basically, the first thing to do is to divide your
content from your navigation using the div tag, like this:
Note that the divs must be in this order - left, right, centre -
because otherwise one column might end up underneath another in
a way you don't expect. Ordering things logically as left,
centre, then right, for example, will cause your right column to
end up under the centre one.
Anyway, the next step is to write the CSS for those IDs you just
set up. Are you ready for the CSS that's made old-style HTML
developers run in fear for about five years now? It looks like
this:
#left-nav { float: left; width: 20%; } #right-nav { float:
right; width: 20%; }
Obviously you can adjust the widths depending on how wide you
want your left and right columns to be (you can choose whether
to set the widths as percentages or in pixels). And that's it!
You've set up a successful three-column layout.
Then, though, the problems come - they might seem small, but
they're big enough to drive anyone who works on CSS column
layouts nuts. Luckily, however, they can be solved with a little
lateral thinking.
The Background Problem.
If you want your left and right columns to be have a different
background colour to the centre one, you're in for a problem. In
most browsers, your columns are only considered to extend
downwards as far as the
For Chinese Dissidents, Exile Can Mean Irrelevancy
Chinese activists have often fallen off the radar after leaving their homeland. Activist Chen Guangcheng is now safely in America, but hopes he can still play a role in China, where he fought forced abortions and sought to improve conditions for the disabled.
NATO Plans 'Irreversible Transition' In Afghanistan
President Obama held a press conference Monday afternoon as NATO wrapped up its Chicago summit. Audie Cornish talks to Scott Horsley for more.
SEC's Investigation Unit 'Outgunned, On A Roll'
The Securities and Exchange Commission (SEC) — once accused by a whistle blower of not being able to find ice cream at a Dairy Queen — is experiencing something of a culture shift. Last year the agency filed a record 735 enforcement actions and collected nearly a billion dollars in penalties from companies with SEC violations. Audie Cornish talks to Devin Leonard, staff writer for <em> Bloomberg Businessweek</em>, about his article, "The SEC: Outmanned, Outgunned, and On a Roll."
text in them does, which means that the
bottoms of your columns won't line up.
What's the way around this? The best answer is to make your
columns fixed-width (meaning that you specify their width in
pixels, eg. 'width: 100px;'). Once you've done that, you can
create one-pixel-high image that includes the colours you want
for the columns, and make it the background image, tiling it
using 'background: repeat;'.
The only problem left to solve at this point is that fixed-width
columns can look strange if you leave them spaced as they are.
The solution is to specify a fixed width for your document's
body, and then set the left and right margins to 'auto' - this
will centre the page on the screen.
The Header and Footer Problem.
Another problem? Well, yes. If you want to display a header or
footer separately from the page's columns, CSS can give you a
little trouble - sure, you can add them to the middle column,
but that would require you to add extra space to the navigation
columns at the top, and make sure they didn't reach down further
than the main content text at the bottom. It quickly becomes
painful to work with.
The solution to this lies in a little-known CSS rule called
'clear'. The clear rule means that you don't want anything to be
floating around the tag you apply it to. It has three possible
settings: left, right and both.
In this case, you want to add your header and footer before and
after the other divs, like this:
Then you want to add this CSS to what you've got already:
header, footer { clear: both; }
That tells the browser that you don't want anything floating on
either the left or the right of your header or footer: you want
them clear of everything. You might also like to add text-align:
center, so they appear in the middle of the page. And that's it!
What was all the fuss about, eh?
About the author:
Original Source: Eclipse-Articles.com
Information supplied and written by Lee Asher of Eclipse Domain
Services
Domain Names, Hosting, Traffic and Email Solutions.
|
|
|
|
|
|