Another CSS write up?

Wellll.... not exactly. Rather than the regimented list of how-to's, I thought, a conglomerated, as used, scenario would be more helpful to some. Like putting all this together is not something you just sit down and do. So, as I'm doing, figuring out, planning and coding I'll take notes. Unfortunately, doing it this way can seem (and probably is) mixed up. But there are some who may say, 'Hey! that is exactly what I have been experiencing.' Hopefully, I will have the answer for that individual buried in here .. somewhere. (Ctl-F to search and find)

Note:  This is a later addition to this WebPage. Whilst I was searching for information on "searching your heart" I found an excellent reference to CSS commands. It is the one labled 'Style Gala' in the menu on the left.

Another Note:  I have been looking at my pages and getting more and more disappointed. They are to big for some systems and they don't scroll properly to the right. Horizontal scrolling and alignment sucks. So, we need to investigate margins and extentions. Also I need to say that due to changes in the Browsers from the various companies, things I said don't work... may now work and visa versa. ch..ch..ch..changes..... Coding CSS can quickly run into difficulties with different browsers interpreting code in different ways. Designs will never look the same in every browser... even though they should!!

Aaarrrrggghhhh!! The content of this page has a White Medium Border around it... sometimes.
IE6... yes, FF3... no.

    Universal selector applies to all elements on a page. It does not have any default value and it is defined using the asterisk.

    Even at the risk of loosing my audience I am going to place a reference here that explains some of my problems annnnddd... possibly yours with HTML code. Once you take time, and just stop and read, you find out many things. I have mentioned browser diffs many places and they can be a problem. However, there is another problem that I didn't pay attention to. The evolvement of HTML, XHTML and XML. Check out: HTML Versions

Neat 'trick' with span

    Thanks to the Lord, I found this whilst looking for something else. I was looking for how many lines are allowed in a span. What I found was an easier way to do help bubbles. The ones that I had found before, the help bubbles, were very complicated and involved a lot more HTML code and/or JavaScript. He has guided me on many understandings and fixes lately. They, the help bubbles, have either been incorporated into CSS or it is just an accidental default. Actually from the dates inside the code I think this was an original part of CSS. All you have to do is learn about it!! Don't know why it wasn't explained to me before OR I didn't read the intructions!!
My test is the word conglomerated up above. I wanted to use this technique on some other areas of my Web Pages. Its kinda cool.
The WebPage where I got the info is at: Linear1
Annnddd... Info on changes that have been made can be found at: About.com: Web Design

The rule declaration in a css file or in the 'head' portion of your HTML file:

span.help
{
  border-bottom     : 3px double;  // puts a double line under the word
  cursor            : help;        // makes the cursor an arrow with a ? mark
}

Span tag with mouse hover style:
    <span class="help" title="this is just a test of how this works">conglomerated</span>

---

Whoooaa!! Looks like you can do the same thing with href's. Found this out at Mobil Burn The key is to understand and use the title declaration.

<a href="http://www.mobileburn.com/" title="Neat trick. Click on this and go look." target="_blank"> Mobil Burn</a>

Oh Wow! Thank you Lord for these latest discoveries. Just be patient and He will open your eyes to things in this life and the next. He will help. All you have to do is ask.
Annnnddd....you can have multiple declarations, like help, help2, help3... etc and have different looks for different helps or messages. So long my eyes were closed. Thanks to the Lord for opening them. Better late than never. If you look at the word conglomerate up in the beginning and then changes just above, you will see the lines underneath are different. That's cause one is help and the other is help2.
JavaScript, Java, PHP and other scripting languages can enhance this greatly. Check out Kooltips in my menu on the left.

HP Example

    One thing you can do is learn by example. Hewlett Packard --> () <-- Notice the parens around the HP symbol. If you place your mouse cursor over the HP symbol, you may or may not see the Tooltip. However, if you place it on the parens you will see the Tooltip. IE 6.0 - no, FF 3 - yes.
This HP Tooltip --> () <-- is JavaScript controlled and it works fine in either Browser.

---

Need to put something in here about floating. look at Design Place

---

Using Style Sheets

    When using style sheets, it might be a good idea to have a master or default CSS file. This would contain styles that are not color, size or subject specific. You know, things that you could use everywhere. The style sheet files that came with these templates (which is mainly why I can say that they are in use) from Bravenet are all color specific. In order to learn and experiment, I am adding a Common.css file, in which I will extract and place, any common styles from the Bravenet templates and add some of my own. (and/or ones I have borrowed) If you want to see my versions of the Style Sheets just click on 'Main Styles Src' or 'Common CSS' in the menu on the left.

    Just a word of note. I am not, and do not claim to be, an expert or guru on any of this. So take anything you find here with a grain of salt. As I have said in other places, this is a lot of experimenting and investigation. My playground, so to speak. My own personal collection of ideas. If you like anything, use it, if not then figure out another way and please share it. Thanks.

    Well, I bragged to soon about Homesite. I had to do a little extra work and made a few mistakes and misunderstood, all because the internal browser of Homesite didn't show the results correctly. This involved over-rides of items declared in a CSS file. Seems that you can do it, if you do it right. Another example is the section below. I have a list that is indented. This did not show in the Homesite internal Browser. What didn't show? The indentation and the squares for the list. But, they did show in Netscape. So, always make your final check via a bonified Browser like Netscape or IE before you think something does or doesn't work. It's a good idea to do that anyway. (Ok, in defense of Homesite, I came back later and everything looked ok in Homesite. Must have been, or be, an uncleared memory or cache problem. OR I fixed it some other way. )

• em: a typographers unit of measurement that is proportioned to the width of a capital letter 'M'.
• pt: points -- the points used by CSS2 are equal to 1/72nd of an inch.
• px: pixels, relative to the viewing device

    em's, pt's and px's can get a little confusing. Check out the first two links listed in the menu on the left. They have a lot more information and I couldn't see repeating it. However, they are basically measurements of text sizes.

    Now then, instead of defining a three column table, we can use the div block-level element to section out our page for the menus and content. Nifty display control. That's what was used on the Homepage. I didn't realize that div had that much power. However, I believe that its power came as a result of CSS.

    Don't understand as much as I thought. Trying to get the scroll class to work on a couple different templates and no go. Instead of a vertical scroll it is making the words go vertical on top of each other with a horizontal scroll bar. Must have missed a que somewheres. Hmmmmm... doesn't work if I try to place it in this file either!! Darn...shuckins! This is how I get sidetracked. I am/was working on the MySQL database section and wanted a scroll. No go. So, now I gotta find out why I can't get the scroll to work properly and then get back to the DB.

    Now then, the difference is in the following two lines. It appears that where the padding goes and what it means affects the scroll condition.

1. <div class="border content padleft" style="padding-right: 20px;">
2. <div class="border content scroll" style="padding-left: 20px; padding-right: 20px; height: 413px;">

    Interesting discoveries on the above two lines.

1. Number 1 puts the border around the content AND the menu.
2. Number 2 puts the border around the content only.
3. If I insert scroll in #1, it screws up the page horizontally. The verbiage gets squished together and makes a long narrow stream of words with no scroll bars. The squished part only shows in the real Browsers.
4. If I take the padleft out of number 1 and leave the scroll, I still don't get scroll bars but the content spreads back out. It is also tightly hugging the left border.
5. Put padleft back in and added height property. This caused an expansion on the right side and a vertical scroll bar. However, the border still did not encompasse the menu and the left margin was still very large.
6. So, we use number 2 and drop the border. The scroll bar still appears and the text magically moves up and down but the menu never moves.
7. Side Note: Putting <pre> around the two lines in this discussion made the whole content section drop below the menu and spread as wide as the page would allow. But still had the scroll bar.

Well now, what did we learn from this little exercise. Nothing. I see how it is working but I still don't understand it. The biggest confusion is the border. It appears that these div's can butt up against one another and sometimes over-rite the others territory. Accidental benefits??? A good explanation of the scroll property can be found at: SCROLL. I guess that I need to study it more.

    Well, I went back to the DB writing and it hit me. I was depending to much on the defaults. So I placed a height value in the content line and then the scroll bar appeared and things worked. Welll... it worked in Homesite but not in Netscape. And the little angry guy yells in White!! Sometimes ... you just can't win. And to make matters worse, if they can get that way, it works in IE! (I changed this background to blue!!)

<div class="content scroll" style="padding-left: 10px; padding-right: 30px; height: 513px">

    The line above is what I used in the database file. This caused the content to go all the way to the right and be only about 4 letters wide. Which is what I would expect .. originally. But these Browsers are supposed to handle the div's correctly IF they understand CSS. Evidently Netscape doesn't. Darn. In Konqueror, I get the proper horizontal spread but the vertical is cut off and there isn't a scroll bar. So now what? Part of my goal in this is to work in all Browsers.

    Ok, so I take out the scroll and because of the height value it clips the vertical and I don't see it all. Take out the height and I have a long page, which will grow in length as I enter text. However, it works in all the Browsers. This file with the scroll option works in all except Konqueror. So ... what's different?? Where's the catch?

    Well, I found out how to put a border around the content and menu. Bracket the "div content" with a "div border". Just view source on this file to see it.

    I believe that the problem is with the defaults .. again. In the MySQLdatabase file I am using a horizontal menu. There are no height or width specs. This file is using a sidebar menu and it has those specs. Soooo... let's see what we can do for a horizontal menu.

    Alllrighty now! Relying on defaults was the problem. Instead of just bracketing the horizontal menu with plain old a <div>, I placed height and width values in it:
      <div style="height: 30px; width: 100%;">
The MySQLdatabases file will now show with a vertical scroll bar in all browsers, except Konqueror, but in Netscape there is also a horizontal scroll bar. But that's ok. I have a little piece that extends beyond the boundaries. Well, on second look, it just depends on how the browser is interpreting the width. In Netscape, all of the sections have the same ending right side. In MSIE they are staggard. In Homesite only the horizontal menu stops short.

    I wanted this to be viewable in all browsers. I'm only fighting with 4. Netscape, MSIE, Konqueror and the Homesite internal. What I am experiencing is chaos. So many little idiosyncasies that I am not going to be able to accomplish this feat. Leastwise, not in this pass. It should be viewable in all browsers, but just not as pretty. At this time in my life I don't think this is worth fixing for all the other browsers. I may get a lot of flack over that statement, since my opening page says something quite to the contrary. For now, Netscape and Mozilla are number one with MSIE as number two. The rest will just have to chance it unless I get volunteer help from the individuals with the other browsers.

---

Tidbits I ran into while searching for scroll info.

---

• Selectors are the HTML tags that you change with any given style. You can include selectors in your css (cascading style sheets) code in a few ways. The 'selectors' link below will explain that.
• Properties are the characteristics of the HTML tag in your style that you will be changing. There are innumerable properties to be toyed with. They are all discussed in this guide.
• Values are the settings for the properties. If a property is "color", a value might be "blue".

    A common design choice at present is to use a sans-serif font (like Arial, Verdana, Tahoma, etc.) for the main body text of a site. Since most Web browsers default to a serif font like Times New Roman.

---

    OK. Out of the frying pan and into the fire. I stripped down one of these HTML template files to make me a new default. It has the usual stuff in the header and there are no frills like sidebars or horizontal menus. I did keep the JesusIsLord line, a wrapper div and the main big title. At the bottom is the code to state when stuff changed and that is it. Sooo, somewhere in all this fancy CSS stuff the font is changing.
    Well, I found it. Nothing secretive or astounding. The font is set to 12px and Arial in the "content class". BUT the setting in the body still affected the whole page when I changed it previously. This is the slap in the face you get when you use someone else's code and you don't fully understand it yourself. (or you're just not paying attention).

    I got a CSS editor off of the Web that looks to be very interesting. One of the biggest interests is that it works in Linux. There is also a version for Windows, naturally. It is not intuitive to me. It has a DTD section (Document Type Definition) that I don't know why is there. Ok. Found out that it is used in XML. The creator of the CSS Editor also has an XML Editor. Need I say more? Morphon. At the present I'm not sure what this CSS Editor is offering over what I have already. Actually not a lot.

    Selector { Property: Value; }    The selector is an HTML tag that you are modifying or a new tag that you are creating. Selector would be H1, H2 or H3 or P or BODY or something you are creating. Property will be color: or font-weight: or any other property in the definition of the selector. Value is, naturally, the value you place in this property, like red or bold or italic or whatever.

08 Apr 04

    Another big change. I moved the content class to common.css. The only difference in all the files was the font color. Since the background color is being set in the body tag, I am setting the foreground or font color in the body tag also. Now I can change the font size everywhere at once cause it is set in the content. There is also a font setting in the body. Not sure why we have two?? Other than it makes everything outside the content a different size that the content. Hmmmmm??..

10 May 04

    Pound Sign versus the dot.    The dot or period at the beginning of selector name signifies a class. The pound sign signifies an ID. Now why do we need both??

Element selectors. Lets you attach styles to HTML tags. Example:

          toolbarbutton  { min-width: 50px; } 
        

Note, that you can group element selectors into a comma-separated list, so that the style properties apply to all listed tags. Example:

          password, text { min-width: 50px; } 
        

Class selectors. Using the class attribute you can group XUL tags into a class. Example:

          <label class="warning">You are in bear country.</label>
        

To attach a style to a particular class, append the class name to the HTML selector, separated by a period (.). Example:

          label.warning { color: red; }
        

To attach a style to all tags of particular class, leave out the leading tag name. Example:

          .warning { color: red; }
        

ID selectors. Using the id attribute you can assign a unique identifier to a HTML tag. Example:

          <label id="warning1">You are in Big Trouble.</label>
        

To attach a style to the identified tag, use the id value preceded by a pound sign (#). Example:

          #warning1 { font-weight: bold; }
        

    Ok now. From a Web Search and finding a conversation on WebMaster World.com I got my answer on the class versus ID. An id can only be used once per page.

  Best way to think about it: id can be the target for a hyperlink.
  So you can do:

  <p id="foo">
  instead of
  <p><a name="foo"></a>
  and link to it with an
  <a href="/this/page#foo">

  Not only is the former sematically cleaner, it is required in
  xhtml 1.1, where the name attribute has been dropped. 

    In summary, use id for unique one time elements on a page and use class for the multiple ones. The id attribute has application beyond CSS (primarily used to identify elements in scripting), whereas the primary purpose of the class attribute is to assign common CSS styles to multiple elements

CSS Boxes

    Two excellent references are: Little Boxes from Owen Briggs and Box Model from W3C. These boxes are what allow us to build Web Pages without the constant use of tables. And they are neater.

Clear and formatting

    I ran into a couple of situations where I couldn't get things to line up properly. In both cases I was trying to put a horizontal menu just below the title bar at the top of the page. It ended up that I had to place a <br style="clear: both;" /> right after the Horizonatal menu and before the content. You can look at the source for: MySQLdatabases to see what I am talking about.

02 Oct 04 - The Div tag and Scrolling

    Now we get into the Browser conflicts again. One does this and the other doesn't. Leastwise, maybe, not yet. Up until this point I could not scroll my Div section with the mouse wheel, if I was using Netscape or Mozilla. However, I could with Internet Explorer ... if it was version 6 or possibly greater. I got hold of an Alpha version of Mozilla, ver 1.8a4. In it they have also incorporated the mousewheel event. So, now if you give the Div box the focus, you can scroll it with your mouse wheel. I'm happier...   How-some-ever ... they didn't fix the wmode if Flash for Linux version yet. This is where I want the background of the Flash to be transparent. It is in the Windows version but not the Linux version.

18 Dec 08 - Div tag and Borders

    I decided to put a jump table in my pages for my SuSE write ups. In the version 11.0 and 11.1 section I also decided to put a border around it. The following was what I tried at first:

which did not work in Firefox but did work in IE. The following worked in both. Notice that border-style is missing and solid go moved to the border section:

13 Jan 09 Div tag and display: block;

    I like to have my Web Content Centered on the page. My little "trick", if you will, is to place the whole page inside a table and surround the table with a <div align=center> </div>. Reason?? I just wanted to center the page and not everything in it. However, this caused problems with some page creations and I had to put a align=left in the wrapper div to correct that. Now we have a new one... display: block; This is with IE. Firefox will display it properly. At first execution(s) IE would center my page alright. However, it placed it on a page a mile wide!! It looked like all the content was gone and only the background was showing. To correct this I had to put a width parameter in my div content line. Can't use the defaults with IE. The page I had this trouble with was Conky-Ops. I found a neat little toy whilst looking for something else and was trying to write up my experiences with it. I borrowed the author's code block idea and the rest is history. I paid, in lost time and headaches, for borrowing this code.

    

---

Excellent Reference at: Selectutorial - CSS selectors to go with this.

With these definitions in my CSS file:

.title		/* a class */
{
	/* padding all four sides of the div in order top, right, bottom, left */
	background-color: #5675A5;
	color: #D9E1ED;				/* light blue text color */
	border: 6px groove Navy;
	font-style: italic;
	font-family: arial, sans-serif;
	font-weight: bold;
	font-size: 36px;
	padding: 10px 20px 10px 20px;
}

h2.title                /*  titles */
{   background-color: #D9E1ED;      /* Slightly darker brown */
    border-style: solid;
    border-color: #5675A5;          /* Same as body color */
    padding: 4px;
}

.title2 		/* a class */
{
    background-color: #D9E1ED;      /* Slightly darker but it is light blue */
    border-style: solid;
    border-color: #5675A5;          /* Same as body text color */
    padding: 4px;
    color: #5675A5;
	font-family: arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
}

---

Using the default properties of h2.
    <h2>Just h2</h2>
Results:

Just h2

---

This, by default, is using the title class defined in my CSS file. The writing is invisible cause I had specified the text color in title to be light blue.
    <h2 class="title" style="clear: both">h2 class title</h2>
Results:

h2 class title

---

Text can be seen here cause we added the color attribute.
    <h2 class="title" style="clear: both; color: #5675A5;">div h2 class title</h2>
Results:

---

This is the size of my original title2 but I added the border around it. I like that better.
    <p class="title2">My title2</p>
Results:

My title2

---