Mahbubur Rahman - jQuery, PHP, JavaScript, Codeigniter, CSS » CSS http://www.mahbubblog.com PHP, JQUERY, JAVASCRIPT fun Thu, 02 Jun 2011 09:28:55 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 A CSS3 404 Error Page for your Codeigniter Application http://www.mahbubblog.com/codeigniter/a-css3-404-error-page-for-your-codeigniter-application/ http://www.mahbubblog.com/codeigniter/a-css3-404-error-page-for-your-codeigniter-application/#comments Thu, 02 Jun 2011 08:11:55 +0000 Mahbub http://www.mahbubblog.com/?p=318 How would this look ?

CSS3 404 Error Page for Codeigniter

Instead of the boring

Boring Codeigniter Error Page

Want the Code ? There you go ! Just paste the  code in your application/errors/error404.php.

< ?php header("HTTP/1.1 404 Not Found"); ?>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>404 Not Found</title>
<style type="text/css" media="screen">
body
{
color: white;
background-color: #AAA;
margin: 0px;
font-family:"Droid Sans",Arial;
}

#horizon
{
color: white;
background-color: #37AEB6;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 0px;
overflow: visible;
visibility: visible;
display: block
}

#content
{
margin-left: -205px;
position: absolute;
top: -34px;
left: 50%;
width: 380px;
height: 60px;
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: 0 0 15px rgba(255,255,255,.9);
-webkit-box-shadow: 0 0 15px rgba(255,255,255,.9);
text-shadow: 0px 0px 1px #000;
visibility: visible;
background: rgb(155,0,0);
background:-webkit-gradient( linear, left bottom, left top, color-stop(0.24, rgb(250,0,0)), color-stop(0.89, rgb(128,20,20)) );
background:-moz-linear-gradient( center bottom, rgb(250,0,2) 24%, rgb(128,20,20) 89%);
}

.bodytext
{
font-weight:bold;
font-size: 13px;
text-transform:uppercase;
}

.headline
{
font-weight: normal;
font-size: 30px;
text-shadow: 0px 0px 4px #000;
line-height:38px;
}

a:link, a:visited
{
color: #06f;
text-decoration: none
}

a:hover
{
color: red;
text-decoration: none
}

.captions
{
color: white;
font-size: 10px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: left
}
</style>
</meta></head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
<span class="headline">404</span><br />
Sorry, the page you're looking for is not found</div>
</div>
</div>
<div id="footer">

</div>

</body></html>

 

There’s CSS3 Drop Shadow, Text Shadow and Gradient. Nowadays people are using latest browsers and it’s likely that people will see the page like the image for most of the popular browsers .

Of course you can use it for any 404 page for any PHP app OR if you like it you can even replace your apache 404 page (hosting specific) with this one [Just remove the php codes from top]

]]> http://www.mahbubblog.com/codeigniter/a-css3-404-error-page-for-your-codeigniter-application/feed/ 0 Auto Resize Large Images in Blog Post http://www.mahbubblog.com/css/auto-resize-large-images-in-blog-post/ http://www.mahbubblog.com/css/auto-resize-large-images-in-blog-post/#comments Tue, 16 Feb 2010 06:52:55 +0000 Mahbub http://www.mahbubblog.com/?p=216 I ran into this problem recently and found a good fix. As we make custom CMS, blogs as parts of websites, we frequently use some WYSIWYG editors like TINYMCE. Now when you enable people to post contents along with image urls, people may enter an image url which possibly is much larger than the available width we have in the page layout. Perhaps most of the images may become larger as we would only get around 650px of width when we are using 960px standard layout with some sort of sidebars.

So the user’s posted image in the blog post may overflow the layout. What to do then ??

1. We want to keep the image within the available width (may be 600px).

2. We also want to keep the aspect ratio intact so that the dimension doesn’t get messed up.

After googling in some pages I had to combine the CSS solution which works for most of the modern browsers (certainly not IE6).

So here’s the neat solution totally in CSS.

#post_view img {

max-width: 620px;

height: auto !important;

width: expression(this.width > 620 ? 620: true);

}

The above snippet assumes that your ID for the container (i.e DIV) is post_view. I’d discourage using class here because ID has a higher order of preference when it comes to override CSS rules.

So, all the image who exceeds the width of 620px will be automatically resized to 620px. Images below 620px will not be affected at all. The height: auto !important; will keep the aspect ratio of the image to the original ratio.

Compatibility:

Firefox 3

Opera 10

IE 7 (I don’t care if it works in IE 6 or not)

Chrome

Safari 4 (win) [ Don't know about Mac cuz i don't have any :( ]

EXAMPLE :

example image
]]> http://www.mahbubblog.com/css/auto-resize-large-images-in-blog-post/feed/ 12 9 cool css headers i frequently use http://www.mahbubblog.com/css/9-cool-css-headers-i-frequently-use/ http://www.mahbubblog.com/css/9-cool-css-headers-i-frequently-use/#comments Wed, 11 Mar 2009 11:02:02 +0000 Mahbub http://www.mahbubblog.com/?p=76 CSS, CSS and CSS, that’s what you should know well to even judge some designs. I’m basically a programmer but I think i can do some kick ass designs too. From the very beginning of web development, i learned both Web programming and designing. There used be a tool called "Top Style Lite". It’s still there btw. I used to use that to do tests with CSS properties of HTML elements. It’s long ago may be around 2000-2001. But in recent years, especially from 2006, we see a boom in web trends. The Web 2.0 thing where css is extensively used to make appealing pages. It doesn’t get better on your concept if you don’t keep browsing better styled sites. From last year, smashingmagazine.com has been a really cool site to bring up the state of the art collection of tools for web developers. Things are pretty available these days. Wish it was there 5-6 years back!!

Anyways, using a good header will completely change the looks of your page especially some pages like your blog. And choosing cool headers is always a dilemma, at least to me. So i keep playing the css properties and look how they can be improved. Of course i get inspired from many sites. But i have my own style gallery of headers which i normally use. Take a look at this.

fav_headers

This is one of the gallery of headers i most commonly use in web apps. Although i’m not in charge of designs in the company i work, i try to influence when i see it can look better. These headers use most common fonts which are generally available in operating systems. You can take the file  if you like. Hope it helps some people :)  

I’ll write a post about my favorite picks on content text styles later. 

]]> http://www.mahbubblog.com/css/9-cool-css-headers-i-frequently-use/feed/ 0