Learn VBA & Macros in 1 Week!

CSS - Interesting Css Capability

Full Excel VBA Course - Beginner to Expert

Interesting Css Capability	View Content

This may be common knowlege, but I'm relatively new to CSS and was surprised to find that you can defing completely new tags with css.

For example, rather than defining a div.class like this:
Code:

div.myclass {
	width: 180;
	height: auto;
	font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	font-size: 12;
	color: black;
	padding: 2px 0px;
	text-indent: 4px;
	display: block;
	}

And using it in html like this:
Code:

<div class='myclass'>bla bla bla</div>

You can cut out the middleman (div) entirely and just define a new tag
Code:

myclass {
	width: 180px;
	height: auto;
	font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
	font-size: 12px;
	color: black;
	padding: 2px 0px;
	text-indent: 4px;
	display: block;
	}

Which can be used in the html like so:
Code:

<myclass>bla bla bla</myclass>

I ran several styles defined this way through the W3C validator here and it had no problems with it. (Other than a few font choice gripes)

Custom tags worked perfectly in the following Mac browsers:
- Camino
- Firefox
- Safari
- Opera
- Xyle scope

The following two browsers couldn't handle the custom tags rendering a single line of unstyled text.
- IE
- OmniWeb

Can't speak for Windows or Linux browsers (Don't have either OS) but this seems like a pretty neat, W3C compliant, trick to simplify html code.

Hope someone else finds this useful

Ken

Full Excel VBA Course - Beginner to Expert

Interesting Ie

Similar Tutorials

View Content

Hello all,

Thanks for taking the time to review my little issue.

Here is a link to the page: http://mcpherson-racing.com/dave/mainpage.htm

My problem is that when you collapse the browser width down to a width where the 'icons' (Images in the header) begin to stack and then 'maximize' the browser window the 3 column layout fails and the left column text is in the center. And if you restore that same browser window it breaks again, Refreshing the page will cure it when its in that state.

Any ideas?

An Interesting Web Site

Similar Tutorials

View Content

An interesting web site:

http://layouts.ironmyers.com/

Interesting Column Height Issue

Similar Tutorials

View Content

Hi Folks,

Newbie here, first post.

I need to figure out a way for the left border on the right column, its a DIV floated to the right (contains an image of a brain which has a certain irony!) to expand all the way down the page when you set the text to "largest" with your browser.

Example: http://www.cre8webdesign.co.uk/services.html

Can anyone help?

Thanks
Darren.

Interesting 2.5 Column Design Problem

Similar Tutorials

View Content

Howdy.

Disclaimer:
I've been working on a redesign of my homepage, and I decided to go 100% CSS. I'm still learning CSS, so if this has a braindead easy solution, just laugh and point it out to me.

The problem:
Here is the design I have for my website (forgive the ascii art):
Code:

+------------------------------------------------------+
| Header                                               |
+--------------+---------------------------------------+
| Stuff Bar    | Content          :            :Google |
|              |                  :            : Ad    |
| Navigation   |                  :            :       |
|              |                  :            :       |
| Firefox      |                  :            :       |
| Info Box     |                  :            +.......|
|              |                  :                    |
| Affiliates   |                  :                    |
|              |                  :                    |
+--------------+---------------------------------------+
| Footer                                               |
+------------------------------------------------------+

The Content has been artificially "width"ed to be no more than 400px wide. The Google Ad should float all the way to the right on a separate layer to keep out of the way on large monitors.

Now, what I want to do is also float every IMAGE from the content all the way to the right on large monitors:
Code:

+------------------------------------------------------+
| Header                                               |
+--------------+---------------------------------------+
| Stuff Bar    | Content          :            :Google |
|              |                  :            : Ad    |
| Navigation   |                  :            :       |
|              |                  :            :       |
| Firefox      |                  :            :       |
| Info Box     |                  :            +.......|
|              |                  :                    |
| Affiliates   |                  :                    |
|              |            : ------------------------ |
|              |            :  +---------------------+ |
|              |            :  | IMAGE from Content  | |
|              |            :  +---------------------+ |
|              |            : ------------------------ |
|              |                  :                    |
|              |                  :                    |
+--------------+---------------------------------------+
| Footer                                               |
+------------------------------------------------------+

I havn't a clue how to do that correctly. I want the Content to wrap around the image callout.

I'd appreciate the pointer.

Interesting Problem - Double Word Display In Ie

Similar Tutorials

View Content

I have several rows of images with centered text under them. I wanted to do this without tables, simply because the way the rest of the page is laid out it'd be easier for me to position the images correctly and line everything up right.

However, in IE when I test this the last column produces a double word of the last word in the centered text. It's kind of hard to explain, so I'm including my code. I did have this happen before and couldn't figure it out so I just used tables, but I'm so dead-set on getting away from tables that I figured I'd try again.

Here's the code:

Code:

	  <!-- Start row one -->
	  <div class="sscontent">
	  
	  <!-- scenic studio column one -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>
	  
	  <!-- scenic studio column two -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>	  
	  
	  <!-- scenic studio column one -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>
	  
	  <!-- scenic studio column four -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>	  
	  
	  </div>
	  
	  <!-- start row two - continue row structure throughout all scenes -->

	  <div class="sscontent">
	  
	  <!-- scenic studio column one -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>
	  
	  <!-- scenic studio column two -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>	  
	  
	  <!-- scenic studio column one -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>
	  
	  <!-- scenic studio column four -->
	  <div class="sscol">
	  <img src="images/ss_temp.jpg" width="152" height="103" /><br />
	  Scenic name
	  </div>	  
	  
	  </div>

and the style sheet declarations:

Code:


.sscontent {
float: left;
width: 688px;
margin: 30px auto 0 36px;
padding: 0 0;
text-align: left;
display: inline;
}

.sscol {
float: left;
width: 152px;
margin: 0 20px 0 0;
padding: 0 0;
text-align: center;
vertical-align: top;

}

Now, I know that someone may bring up that the float is a block element and I can't display it inline, but it's the only hack i knew to get it to display in a straight line and still line up with the rest of the page.

I'm more than open to suggestions here!

-B