css
CSS 3 column liquid layout with background image stretch
Sat, 2010-05-15 14:30 — John PfeifferCSS keeps improving but sometimes it takes some creativity to meet what might seem like obvious demands: a background image stretched in a column
The following example gives two different methods of background image stretching, though I admit that the background image is just a color gradient and that this kind of stretching on a graphical image (in a liquid layout) could appear at best, "funny".
I created a color gradient and then resized it to be 640x2 pixels, otherwise all of the code is below:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
CSS 3 column liquid layout example
Sat, 2010-05-15 14:14 — John PfeifferCSS is much better than HTML, but making a webpage look the way it ought to look can be very painful, frustrating, and time consuming.
Not only do you have to create cross browser compatible code, but it has to look nice when you're done!
This is just a basic example that you can experiment with and add to later, there are some comments but the code is mostly self explanatory:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><style type="text/css">
/* required to kill off any extra "helpful" browser padding */
html, body { 365-39 How to customize a Drupal Zen theme Primary Links into Horizontal
Tue, 2010-02-23 20:52 — John PfeifferI'm squeezing my brain to get Drupal theme customization and CSS working as quickly as possible (while working a more than full time job and doing some things besides computers every once in a while)...
"Creating" a Zen sub theme is relatively easy, mostly a lot of copying, replacing STARTERKIT, and uploading again to a different directory...
http://kittyandbear.net/john/web-tutorials/drupal-how-to-create-a-zen-su...
But to make significant changes in the layout you have to modify layout.css
365-38 Better css 3 column header footer layout
Thu, 2010-02-18 14:57 — John PfeifferIt's messy as some of the code could be removed but it gets you most of the way there - a footer at the bottom (even if the content doesn't fill the page)... a header at the top that's full width, and 3 columns... with a little weird bug on the right column...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
/* required to kill off any extra "helpful" browser padding */
html, body { 365-37 How to center with CSS
Wed, 2010-02-17 15:05 — John PfeifferThis is a tiny post, but it covers a very important part of how a CSS layout might look: how do you center something?
The "Centering CSS Blocks Trick" forces the text (or image too, hopefully, depending on a post 2006 browser)...
THE CSS
#footer {
text-align: center;
bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 30%;
z-index: 0;
position: relative;
}
THE HTML
footer text goes here
Note that the text-align instruction is perhaps redundant but it's better to be safe (and more universally compatible).
365-34 Drupal Themes
Wed, 2010-02-10 15:02 — John PfeifferDrupal is meant to be a dynamic website platform (that runs quite well out of the box) yet customizable.
Despite the good advice to create a "sub theme" by copying and pasting the current files into a new folder i went ahead and hacked at the core php and css...
While Garland itself (I'm using the "configurable sub theme Minelli" which must be modified through Garland) is very hard to work with (I will probably end up using Zen to get my final customized effect)...
FTP into your website hosting and ... /drupal-root/themes/garland
Modifying page.tpl.php with my trusty notepad2...
365-5 php and css on a radio button board
Tue, 2010-01-19 22:28 — John PfeifferI'm a little sick so this one took longer than it should have. Futher exploration of the theme of PHP + CSS + HTML as a very simple way to get user input and then do something fun with it.
The beginnings of trying to "modularize" code into functions earlier in the process (in later, more complex programs it is a necessity).
You may be asking, "How is this useful?" but I think it's a popular misconception that Programs should be useful...
365-3 PHP is mad cool with CSS
Sun, 2010-01-17 22:02 — John PfeifferPHP is similar to C which makes it easy for me to do interesting things. The php manual webpage is brilliant! Don't you wish everybody had a full public API, easy menus, working examples, searchable and with the best user comments that really flesh out the bugs?
CSS is so much better than HTML tables - it really revolutionizes the simplicity, maintainability, and power of displaying things on the web.
Put them together and you have miracles like Drupal.
The following project took a little more time than usual and it might even be useful one day, but I what I really like about it is that it's FUN...
365 Day Project: Programming
Fri, 2010-01-15 17:38 — John PfeifferI have been inspired by my wife's 365 day project (http://www.flickr.com/photos/big_rock_cat/) to do a photograph a day for 2010.
I spend my working days and much of my free time installing, repairing, updating, maintaining, and administering computers, servers, routers, business software, etc.
Yet I have long wanted to focus more on Programming, and rather than spending my spare time reinstalling Linux (ok Stallman, GNU/Linux) and I thought that a little structure and motivation would help me channel my energies.
