Basic CSS layout
The basic CSS layout I use in my work is plain simple - header, sontent, sidebar and footer.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My page</title>
<base href="http://localhost/" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
<div class="clr"></div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
And the CSS is very simple:
#wrap { width: 960px; margin: 0 auto; }
#header { }
#content { width: 700px; float: left; }
#sidebar { width: 260px; float: right; }
#footer { }
.clr { clear:both; height:0px; overflow:hidden; }
This is it. This code will show a simple page which is ready for hardcore modification. I know this is pretty basic yet it is one of the most used code snippets in my IDE. Good luck!
Image / file upload with CodeIgniter
Image upload can be a pain in the *ss. And even though CI has a lot to offer (in the means of documentation) it still lacks a direct copy-paste code on their website so that people can just put it into their controller and use away.
Here we will have:
- Image upload form with 5 images
- And a controller function that will upload those
- Thumbnails will be there too
Komodo Edit tools – add style.css and reset.css
Good morning, planet. Today I am going to share a very useful script I am using in Komodo Edit (it automates adding style.css). It is very (!) simple yet very effective for me and, probably for others who are doing a lot of HTML files and face a problem of repetitive actions.
This thing works as follows (the use case):
- You create a new HTML file in komodo and save it in some directory.
- You double-click the script in the Komodo Edit toolbox.
- The script adds the following folders/files to the project (paths relative to the file currently in editor!)
- css/
- css/style.css
- css/reset.css
- Also the file adds the following HTML code at the cursor in current opened file:
Voila. The needed action is done.
How-To: Create a horizontal menu
This is a tutorial on how to create a fully costomizable horizontal menu. Why another menu how-to? Well, mostly because there are situations when there are no suitable google results (based on my experience) and you have to come up with something yourself.
These are the features we will try to get into our menu:
- It will be horizontal
- It will have splitters (made with images)
- It will have active class for rollover / selected item (background change)
- Menu items will be of different size
This code works for Internet Explorer 6+, Firefox 2.0+, Opera 9+, Safari (at least on Safari 4 - tested on Windows version of it).
Here is a mockup that we have:
Menu mockup
NB! If you just want to see how to do it - go here for the demo / full code.