The Honey House Buzz - CSS

Goodby CFUnited, Perhaps next year

Sat, 07 Aug 2010 17:36:00 -0600

I have planned unsuccessfully to get to CFUnited. But the for last 6+ years, other obligations have interfered for that week..... So, I get my oxes out of the ditch (which included a funeral, a few surgeries to repair cycling injuries, mom-in-law getting 2 hip replacements...you get the picture) to clear July-August 2011 to attend Next Year -- 2011... (sigh) My friend Gene Godsey broke that news to me, no next year.... (sigh). So Here's My VOTE: Have it somewhere, somehow, someway and Honey House Web Designs WILL be there! PLease, please (please)....

DW CS3 Bug? Checking Out Files to Open Externally Can Crash DW

Wed, 17 Dec 2008 08:35:00 -0600

If you are working in a website that is set up to use Contribute for its users, do not try to checkout a file AND open externally at the same time. DW will crash. I use Topstyle for CSS edits, and I have DW set up to open edit CSS files externally. I often open css files in DW that then open the Topstyle editor. If the CSS file is locked and needs to be checked out of the server, then opening to edit in Topstyle will cause DW to bomb. Solution: Check CSS file out first, then open/edit. Then all works good. Note on 'bug': This occurs in Topstyle versions 3.12 and 3.5 (newest version) and in of the latest CS3 DW version. It also occured in CS4, but that was beta. (don't have CS4 production yet... waiting on bit end-of-year bonus -- ha ha ).

Using CSS to Populate a Dynamic Map

Sat, 08 Nov 2008 08:50:00 -0600

Clients often want maps of their service area, particularly county maps of a state, or states/regions within country. I had a project with a land company that wanted to be able to have a map automatically turn on/off a county based on the contents of the property's county in database. I decided to create a page that used a vector based map with the counties outlined, id each county with a CSS class of that county name, then if any county was retrieved from the query, that county's ID would be highlighted to display. No, the map doesn't need to be a vector map per se, but using CSS can you can extend the functionality of each unit of the map (and resize easily if need be). An example of this can be found at http://www.atlanticcoast-properties.com/html/scmap.cfm Since the potential for several states exsists, I created a CSS file for South Carolina, 'sc.css'. The CSS for the map contains a div tag for the overall map, and a div for the location of each county to display:

#scmap {
height: 506px;
width: 638px;
background-image: url(map/scmap.gif);
background-repeat: no-repeat;
padding: 0;
margin: 0;
position: relative;
font: Arial;
font-size: 11px;
font-stretch: narrower;}	
	
#scmap li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; text-align: center;}	

#scmap li a:link, #scmap li a:visited,  #scmap li a:active
 {  color: black;   }

#scmap  li a:hover {background-color: #BF9839;color: #000;	
text-decoration: underline; }

#none {left: 540px; top: 470px; }	 
#spartanburg {left: 145px;top: 41px; }
#greenville { left: 103px;	top: 14px;	 }
#oconee {left: 12px; top: 70px; }
#laurens {left: 153px; top: 110px; }
#aiken {left: 207px;	top: 260px;}
#abbeville {left:90px; top:  152px; }
#edgefield {left: 164px;top: 224px;}
#cherokee {left: 202px; top: 9px; }
#union {left: 209px; top:  77px; }
#pickens { left: 65px; top: 44px; }
#anderson {left: 69px; top: 105px;}
#mccormick {left: 95px; top: 202px;}
#chester {left: 269px; top:  76px; }
#york {left: 269px; top: 34px; }
#lancaster {left: 332px; top:  80px; }
#fairfield {left: 276px; top:  127px; }
/*(and so on... not all counties are displayed here )*/

.disabled {color: #999999;}

Then in the .cfm file, I set up the code to use an unordered list display or grey out the counties as needed:




 
  

#county#

#cnt# listings 


  

 
#county#

The overall effect takes a bit of time to set up the location of the counties, but once done, it allows your map to disable or show links based on database values without having to recode the map. This effect can be applied to geographic maps, real estate siteplans, and many other applications that use an overall large mapping but the need to be dynamic in the content for that map. I can take this effort one more step to create hotspots based on the vector shape of the county and make rollovers, or even color the entire county based on the query results.

"Button" tag vs. input type='button'

Wed, 05 Nov 2008 19:40:00 -0600

Although the tag has been around W3C for a while, Dreamweaver still creates buttons as "form buttons".

The form input button creates generic browser buttons, and can be customized using css. However, an easier way to manage the styling of buttons on your site is to use the "button" tag.

This allows a developer to create and use push buttons outside of FORMS in a manner that is better suited for site styling and flexibility.

Quick & Dirty Right SideBar ... or Not,

Wed, 05 Nov 2008 15:49:00 -0600

If you have a site that you some pages to have a sidebar and some NOT without having to create 2 similar templates (if you are using DW Template feature), you can easily set a variable in the file to turn the side bar on or off. This method creates a floating right sidebar if the variable is set, but it can be adjusted for a left sidebar as well. There are two quick and dirty methods of doing this. The first involves a dynamic div creation by setting up the Div id to be evaluated at run time using 2 CSS ids, one for content width accommodating the sidebar and one without:



Put Content Stuff Here

 
Put Your SideBar Stuff Here

The second is a more basic method that simply shows or hides the sidebar div based on the setting of the variable:




:


 banner here 
   nav here 
     Wraps Content and Sidebar 
    
        HHWD's main site. We use different colors for different type of categories for our site. Instead of creating multiple DW templates, we can use ColdFusion to set the id or class tag dynamically to determine the format, color, etc for our site. We can even use CF to determine the site settings based on browser.

To do this,
set your tag to be a CF variable


   blah blah code goes here


where category is a variable previously set. In your CSS file, you can different IDs, classes, and so on that would be called. 

You can even use different CSS files based on variables.

Quick And Dirty, but effective!



Creating a Dynamic Slide Show Using P7 & Coldfusion
Sat, 05 Jan 2008 02:00:00 -0600
Ever like the Project Seven Slide Show magic but want to use the functionality of Coldfusion to fill in the thumbnails and images? Well, ok... lets do it.

Open your page to place slide show in and create the basic slide show, filling in a default directory and selecting an image. This creates directories and code populates the default SSM code on your page. 

Once this is created, you can go back in and edit it to fill images in from a query. Interestingly, you only need to update the  area with the query output to have the updates reflected both in the thumbnails and the larger images.

With respect to P7's code, I won't be cutting/pasting the entire SMM code here, but will only show snippets of strategic locations for place your outputed query.

Once the SMM code is built, find the p7ssm_thumb_section div. Looping through your query/array/list with 
 tag will update your thumbnails.

 

  
    
       
     
  
  




To update the starting image from the 'default' one you used when you set up SMM, go down a tad further in the code, and edit the p7ssm_fsimg div.




  
 




See an example of this here: Click on a Dog to see SMM

This is a site in development due to be rolled out to production soon. As such, the FireFox formatting is still wonky as the client site is validated against IE6 first, and is still being adjusted for more modern browsers.


Advantages of using UL to Create CSS Vertical Nav Menus
Tue, 07 Aug 2007 09:31:00 -0600
CSS is a wonderful method of allowing precise formatting to your site's layout. One issue that I have noticed is that the methodology used to create the NAVigation menu. In the past, I have created a CSS class or CSS Div with 'a:link, a:visited (etc)' formatting to create my navigation style, and then used 
 between the link lines such as:



   Home

   Page2

   Page3

   Page4


  [More]