Retro Web Development: css

Showing posts with label css. Show all posts

Friday, January 04, 2008

Make a DIV Transparent

Yes, yet another site: Memories and Music. I can't take credit for developing the platform for this one though. I wanted a strong and flexible blog/CMS solution, so I went with a hosted WordPress setup.

I picked a pre-made template, but had to do some extensive CSS editing to get it to look the way I wanted. One of the things it had was a semi-transparent png image as the background in both the left and right sections. I guess there's some deal gere with Internet Explorer 6, because in IE 6 the images weren't transparent. Too bad, because one of the cool effects was being able to see the image through the two content layers.

So I dug around a little and uncovered how to make layers (DIV or SPAN sections) semi-transparent. There's a method for IE 6 and one for FireFox adn (I'm assuming) other browsers.

Your div:

<div id="TheDiv:></div>

Put these in the style declarations IE 6:

#TheDiv {filter:alpha(opacity=60);}

The opacity runs on a scale of 0 - 100, so 60 percent - 60% opaque.

For FireFox:

#TheDiv {-moz-opacity: 0.6;opacity: 0.6;}

In this case, the opacity runs from 0.0 to 1.0, so a .6 corresponds to 60%.

At Memories and Music, I ended up removing the background png images, setting the background-color to white and using an opacity setting of 90%. So I was able to keep the cool semi-transparency effect in both browsers.

Thursday, August 02, 2007

How to Position a DIV at the Bottom of the Page

Most web sites have a footer - a section at the bootom of every page that contains links, copyright, maybe the dat, and other info. In a tableless design, putting this footer at the bottom is not a problem if the content of the page is longer than the page itself, but what about when you have a short content page, like a contact form or something?

In such a case, if you're using a tabless design and positioning DIVs using CSS, the footer will ride up right under the short content instead of being at the bottom of the page.

On a new site I'm working on, I ran into this. Rather than resort to the old stanrd of using a three row table, I want to position my footer using CSS only.

You can read the full post by following the the link in this post's title, but here's the code to position a DIV at the bottom of a page, regardless of how long the page content is (I've checked it in IE 6 and FF 1.5).

The CSS styles:

html {height: 100%;}
body {height: 100%;}
#nonFooter {position: relative;min-height: 100%;}
* html #nonFooter {height: 100%;}
#footer {position: relative;margin-top: -7.5em;}

The HTML:

<html>
<body>
<div id="nonFooter">
 main content
</div>
<div id="footer">
 footer content
</div>
</body>
</html>

Thursday, October 19, 2006

Changing the Way Links Look

Although CSS is pretty well know, I still often get or see questions about how to change the way links look and act. Using CSS, it's easy to change link appearance and behavior.

Here are the four CSS aspects of a link that you can affect:
A:link - base appearance of the link
A:visited - the way the link looks after it has been clicked on
A:hover - the way the link looks when the user hovers the mouse pointer over it
A:active - the way active links look; a link becomes active once you click on it

Example: remove underline and make links red on mouseover:


<STYLE TYPE="text/css">
<!--
a {text-decoration: none;}
a:hover {color:red;}
-->
</STYLE>

Note that by assigning value to the base 'a' tag, you change the appearance of ALL links. What if you only want to change some? Enter the subclass::


<STYLE TYPE="text/css">
<!--
a.LinkStyleOne:link {text-decoration: none;}
a.LinkStyleOne:hover {color:red;}
-->
</STYLE>

You would then contstruct the link like:

<a href="http://www.SomePlace.com/" class="LinkStyleOne">Link Text</a>

Using CSS you can change all sort of aspects of link appearance, highlight color, underline style, background color, size and much more.

Saturday, September 02, 2006

CSS Overflow Property

I'm working on a site where visitors will be able to upload their own images, which I will then be displaying. In order to keep page formating, I'll be automatically resizing the images to 125 pixels in height. The image itself will be placed in a 125x125 div. But what if it's wider than 125? I wanted it to be cropped so as not to mess up the page format. Enter the overflow property

<div style="height:125px;width:125px;overflow:hidden;">

Overflow has other parameters as well:

overflow: auto - This will insert a scrollbar - horizontal, vertical or both only if the content in the block requires it. For practical purposes, this is probably the most useful for creating a scrolling area.

overflow: scroll - This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.

overflow: visible - This will cause the block to expand to view the content.

overflow: hidden - This forces the block to only show content that fits in the block. Other content will be clipped and not hidden with no scrollbars.

Sunday, August 27, 2006

Hiding Page Content

Suppose a circumstance arises where - for whatever reason - you want to hide page content from human users but not search engine spiders.

The following code uses CSS to create two divs and then puts one div behind the other by using Z-Index. Human visitors to your site see the top div, search engine spiders see both. Be warned: users surfing in FireFox with CSS turned off will see all content as well.


<html>
<head>
<style type="text/css">
 body
 {
 margin: 0px 0px 0px 0px;
 }

#absdiv1
 {
 z-index: 5;
 position: absolute;
 width: 100%;
 height: 75px;
 background-color: #ffffff;
 }

#reldiv2
 {
 z-index: 1;
 position: relative;
 width: 300px;
 height: 75px;
 }
</style>
</head>

<body>
 <TABLE cellpadding=5 cellspacing=0 width="100%">
  <TR>
   <TD>
    <div id="absdiv1">
     This could the div with your header stuff in it,
     or your logo in the upper left
    </div>  

    <div id="reldiv2">
     You can put all kinds of stuff in this div and no
     one can see it; links, keywords, even images
    </div>
   </TD>
  </TR>
 </TABLE>
</body>
</html>