Solved

How to use Cascading Style Sheets for total page design.

Posted on 2006-10-24
4
145 Views
Last Modified: 2013-11-19
Hi, Experts.  I am building a new site and need some solid development input.  This site will have one main site and then 10 different "sub sites" that will need to be similar, but not identical.  I have been reading about templates and nested templates in Dreamweaver, then I read about CSS as opposed to templates, and then I also read about SSI in Dreamweaver.  Do I use one of these options or all of them together?  What do most large sites do?  Is there a better way to do this and is one more accepted over the other?  I have always stayed clear of CSS due to the browser incompatabilities, but with the new advanced browsers, I don't believe this is as much an issue.  I am also confused on how CSS "builds" an entire page with all the proper page elements.  I thought CSS was only used for design elements and not for adding objects (like images, navigation bars, etc.) to a page.  Any explanations, directions or references would be appreciated!
0
Comment
Question by:ODATech
  • 2
4 Comments
 
LVL 10

Expert Comment

by:KenAdney
ID: 17797120
I can address css a little bit.  There's some workarounds for using images with css such as background-image or using an image as your h1 tag.  I highly recommend taking a look at csszengarden.com where there's hundreds of designs with the same content, each with a different css. http://alistapart.com/articles/dropdowns/ addresses drop down navigation using style sheets.  Personally, I highly recommend cascading style sheets since the look & feel of your pages is controlled from a single location (or in your case, just a few locations).
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 17800545
Hi ODATech,

There are thousands of tutorials on CSS out there, Google for one that you like.   KenAdney has a good point in directing you to csszengarden, which shows how different stylesheets affect the layout of the same content.

Here's an oversimplified version of what is going on in a CSS page:

1) All of your "elements" (headers, footers, navigation, contents, etc) are contained in <div> tags.  Each div receives an identifier: an ID or a CLASS.

2) The overall page either contains a CSS section in the <head> section or a link to an external CSS file.  In the CSS, each id and class receives several properties that determine where they appear when rendered by a browser.  You can define heights, widths, locations (both relative to other divs and absolute), colors, and much much more.  By learning how the different properties interact, you can create pages with columns, floating areas, and all sorts of bells and whistles.

Here's a quick and dirty illustration of how to use divs and CSS to arrange things:

Here is a quickie sample of a centered container div with three centered "content" divs to get you started:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.container {
     width: 700px;
     margin-right: auto;
     margin-left: auto;
}
.header {
     background-color: #00FF00;
     width: 98%;
     margin-right: auto;
     margin-left: auto;
}
.content {
     background-color: #0000FF;
     width: 98%;
     margin-right: auto;
     margin-left: auto;
}
.footer {
     background-color: #FF0000;
     width: 98%;
     margin-right: auto;
     margin-left: auto;
}
-->
</style>
</head>

<body>
<div class="container">
  <div class="header">
    <p>Content for  class "header" Goes Here</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div class="content">
    <p>Content for  class "content" Goes Here</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div class="footer">
    <p>Content for  class "footer" Goes Here</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
</body>
</html>
0
 

Author Comment

by:ODATech
ID: 17810757
Thanks, Jason.  That's exactly what I was looking for.  I had been to zengarden before and although they have a lot of good designs, I can't really use someone else's ideas or styles on my site ... it's a great site though to see how powerful CSS is, but the real nuts and bolts are not there; at least not on my visit.  I may have some other questions for you Jason ... I'll post them on this topic, but I am excited about using the CSS on the site.  I think it will be easier for me to maintain.

I do have one immediate question regarding concept:
1.  I create my css (I think I will use the external file method).
2.  I build my different templates and put the link to the external file in the head?
3.  Will I still implement layers then?  Or are they handled in the div tags of the CSS?
4.  How do I make them editable?  Is that also done in the CSS?

Thanks, Jason!  Again I am totally amazed at this site and how helpful it is to me personally and professionally.  You are all truly experts!

:o)
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 17814452
>> I'll post them on this topic

Actually, post new questions.  If you post them here, I'll answer but there are so many people here who are so much better with CSS than I am...

>>I do have one immediate question regarding concept:
>>1.  I create my css (I think I will use the external file method).

You should use external files.  Easier.

>> 2.  I build my different templates and put the link to the external file in the head?

Yup.

>> 3.  Will I still implement layers then?  Or are they handled in the div tags of the CSS?

Not sure where you are going with this.  When you create the template (assuming we are talking DW templates), you set the layout there.  If you want to use layers, you can (I don't recommend using absolutely positioned elements for the most part).  All a CSS layer is is a div with specific properties set.

>> 4.  How do I make them editable?  Is that also done in the CSS?

Once the layout is done, select the layer or region defined by the div and Insert | Template Object | Editable Region.  When you finally save the template file and apply it to new pages, those regions are editable.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now