CSS Containers: Fancier, Fixed Width, Rounded Corners

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the second of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I created this code from scratch and use this for any fancier fix width boxes I might need for sites I create. Height is not fixed. (Also see css containers: simple, fixed width, rounded corners.)

The container:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url(“/downloads/rounded-corners/top-rounded.gif”) no-repeat bottom;}
.roundedBoxMiddle{background: url(“/downloads/rounded-corners/middle-rounded.gif”) repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url(“/downloads/rounded-corners/bottom-rounded.gif”) no-repeat top;}

Content

This is a quick and easy way to do something that looks better than a square box.

The code:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url("/downloads/rounded-corners/top-rounded.gif") no-repeat bottom;}
.roundedBoxMiddle{background: url("/downloads/rounded-corners/middle-rounded.gif") repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url("/downloads/rounded-corners/bottom-rounded.gif") no-repeat top;}


<div class="roundedBox">
<div class="roundedBoxTop"></div>
<div class="roundedBoxMiddle">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<div class="roundedBoxBottom"></div>
</div>

General Information:
This is based on a simple graphic I created in Photoshop using the rounded corner box tool, a drop shadow, a stroke, and a left to right gradient. I then cut it up into three pieces: top, middle, bottom. *The .roundedBoxMiddle p {margin:0; padding:0;} is specific to my layout and is not needed if you want to use this.

CSS Containers: Simple, Fixed Width, Rounded Corners

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the first of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I did not create this code from scratch – but I will use it if I need something really simple and really quick. Height is not fixed.

The container:

b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent{margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}

Content

This is a quick and easy way to do something that looks better than a square box.

The code:

b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent {margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}

<div class="jzcontainer">
<b><b></b><b></b><b></b><b></b></b>
<div class="jzcontent">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<b><b></b><b></b><b></b><b></b></b>
</div>

General Information:
Although it is very simple, I am not a fan of the code at all. My next example in this series will look at a fancier and more elegant solution for rounded corner containers. *The .jzcontainer p{margin:0;} is specific to my layout and is not needed if you want to use this.

Not Yahoo! Over yahoo! Web Hosting

I have enjoyed looking at multiple hosting options through clients in the last few months. Yesterday I worked with Plesk on one account and another who uses Yahoo! for hosting. Just as I was getting ready to write a positive blog post on Yahoo’s web hosting I ran into a snag when uploading and preparing the WordPress site for my client…Yahoo! does not allow you to use mod_rewrite Permalinks. So instead of having nice URLs like /services/ and /contact/ you have to use ?page_d=4. Gross. So in short – if you are using WordPress and want to maintain it yourself (always have the latest, most secure version, etc) I do not recommend using Yahoo! for WordPress sites.

Page Shift Fix for Safari and Firefox

Ever have a site that when clicking through pages would slightly shift to the left or right? This was driving me crazy and finally after doing some research I found a hack that will do until I can find the solution:

/*this is to keep page from shifting to left on load in safari and firefox*/
html { min-height: 100%; margin-bottom: 1px; }
html { overflow: -moz-scrollbars-vertical !important; }

w3c link checker.

I have been working on a project with a few clients where they are moving all their static content (as well as creating some dynamic content) into a CMS. They have about fifty pages done and wanted to check the links on their site to see what was broken so I directed them to the W3C link checker. I had not thought about that W3C tool in awhile, but I wanted to mention it here because it is a great free way to check the links on your site. When using this tool, make sure to check the check the “Check linked documents recursively, recursion depth” to make sure it follows all your links.

jappler.com 14.7 update: a tune up.

Over the past few months I have been busy working on client web sites and have neglected jappler.com. I have been using WordPress for a few years now with this site and had a number of plugins, CSS styles, and other items that needed to be pruned while I wanted to spruce up and clean up some other layout items.
Summary of the jappler.com tune up:

  • Went through all my plugins and disabled and removed anything that could be replaced with a template tag
  • Removed all old and un-used CSS styles
  • Removed CSS code that I could do better or that was not needed
  • Re-validated my code
  • Added the rounded corner/drop shadow boxes around my content
  • Re-arranged my post meta information (author, date, tagged, comments, etc)
  • Began organizing my categories better
  • Removed any duplicative code and either used a WordPress function or an includes file to handle the content/code (links, search, etc)
  • Created a WordPress 404 page with my old 404 standby
  • Went through my pages and cleaned up the text and updated any outdated information
  • Re-organized my sidebars and their content
  • Removed any un-used images

Every once and awhile it is good to clean up your sites so they do not become overly bloated. Don’t know where to start – check out the list above 😉

Find Your Location

If you ever are not sure of the path to one of your scripts of files (.htpasswd), you can easily find out by creating a new PHP file, and then copying the following code into the file:

After you save the file, view it in your browser and you will see the location of your file. No more guessing if it is /home/username/public_html/ or some other naming convention that your host might use.

New apple.com – Initial Thoughts

After a long showing – the pin strip tabs are out and the brushed metal – grey gradient is in (just a shade or two darker than the active jappler.com nav). My initial thought: the nav bar is too tall – but as soon as I looked at the way to the right and saw the search box, I realized it had to be that height to accommodate the search box with ample spacing. I looked through the site some more and so far – everything looks pretty good.

New apple.com web site I did find a few problem areas with their layout/CSS, but I am sure they will address those soon (PS family member that does not know or understand what I really do – this is the type of thing I get contacted about to fix for companies) – especially since they showed up on Safari at first glance. I am sure their web team worked very hard on the new layout/functionality and it shows. I think for the first time in a few years the site feels very cohesive and not so much “stuck in 10.1 here, and stuck in 10.4 there”.
New Apple.com web siteEven with the layout issues, Apple did a nice job of incorporating just enough Ajax into their site without overdoing it. The sidebars use a nice show/hide content thus reducing clutter and there a number of carrousel-like objects in the site that allow you to flip through items without leaving the same page (see Movie Trailers for an example.

To sum it up, I think Apple really did a nice job of pulling everything together, and like I mentioned before – putting just enough Ajax in without overdoing it. I think something is missing though with the top navigation bar. I really liked having a second level for the navigation below the main navigation bar with such a big site. Time will tell, and after I use the site for awhile, perhaps I will write a followup.

PS – Why post the layout issue screenshots? It is a nice reminder that sometimes the “big” companies make errors or overlook quality assurance issues too.

debugging web site/database lessons.

After spending a frustrating day yesterday working with a client, their web site overload issues, and the hosting “advanced support” I am worn out. The issue: extremely high traffic database driven web site – when moved into the production environment on a dedicated server – would spike the processors’ load to 100% and would then need to be restarted. I got called to help solve the problem. The “advanced support” blamed it on the CMS and that is where I stepped in. The first thing I wanted to see were the server logs. (Apache and MySQL to start) After a long and frustrating time on the phone with the “advanced support” they were finally convinced I knew what I was talking about and gave me shell access to the server so I could tail (tail -f logname_log) the log in order to see what kind of error messages were generated. Mind you – my client had been dealing with the “advanced support” for two days at this point and not once did they look at the log files. Within a few seconds I was able to see the errors that were causing Apache and MySQL to run out of control and within a short while, I had a solution.

The lesson here – and it seems like I have tried to get this across many times before – if you are experiencing server issues of any kind – DNS, email, web, database – always check the logs first. The log files will either tell you what is wrong right away, or give you something to search for on your search engine of choice. The other lesson of the day: if you are have a content management system that uses a lot of database queries on a very busy site – make sure you you are using some sort of caching. (such as the MySQL Query Cache)