From 9fbae00333632d1df9fa075fd580ac70e5dd88fd Mon Sep 17 00:00:00 2001 From: José Mota Date: Thu, 26 Apr 2012 23:40:52 +0100 Subject: Convert two posts to Markdown. --- ...-on-mac-os-x-leopard-10-5-issue-on-upgrade.html | 40 ----------- ...mac-os-x-leopard-10-5-issue-on-upgrade.markdown | 55 +++++++++++++++ ...960px-grid-on-top-of-full-range-background.html | 39 ----------- ...x-grid-on-top-of-full-range-background.markdown | 80 ++++++++++++++++++++++ 4 files changed, 135 insertions(+), 79 deletions(-) delete mode 100644 _posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.html create mode 100644 _posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.markdown delete mode 100644 _posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html create mode 100644 _posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown diff --git a/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.html b/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.html deleted file mode 100644 index 4bb2bab..0000000 --- a/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: post -title: Apache 2 on Mac OS X Leopard 10.5 issue on upgrade -tags: -- Development -- mac leopard apache -status: publish -type: post -published: true -meta: - _edit_last: '1' ---- -This weekend I decided to arrange my hard drive in a way that I could have a 5GB partition with sinful Windows XP to play some games with the family. To do that, I bought a 1TB external hard drive to use as a Time Machine backup for the process. At the time, my disk was already partitioned for Ubuntu but since I didn't find it useful anymore, I replaced it for Windows. - - - -Well, the good thing is I can actually play some old games like Empire Earth and Counter-Strike with the cousins to have some fun. The bad news is my Apache server settings screwed up. Two things happened. Number one: http://localhost/~user was thrown a 403 Forbidden access. This problem is the result of the user configurations for the server whilst the reinstallation / upgrade of the system, they don't exist now. What you have to do is very simple. Go to /private/etc/apache2/users and create a file yourshortusername.conf and type this: - -

-Options Indexes MultiViews
-AllowOverride None
-Order allow,deny
-Allow from all
-
- -Restart your server and you're ready to go! - -Number two: My virtual hosts blew away. I should have kept a record on how to do this in case I had to a reinstallation, I guess I can kick myself now. (I'm solving this as I write this post :P) Three steps: -
    -
  1. Go to /private/etc/hosts and say you want to assign 127.0.0.1 to your alias, like this: 127.0.0.1 youralias
    2. -
  2. Go to /private/etc/apache2 and uncomment the line that includes the virtual hosts configuration file. If you want to use PHP, you might want to uncomment the line that includes it as well.
    3. -
  3. Finally, go to /private/etc/apache2/extra and edit the httpd-vhosts.conf mentioned on 2. and add this chunk of code:
    4. -
-

-DocumentRoot "/path/to/your/site/"
-ServerAlias yoursitename
-ServerName yoursitename
-
- -Restart your server and virtual hosts are up and running. diff --git a/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.markdown b/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.markdown new file mode 100644 index 0000000..51dc3fb --- /dev/null +++ b/_posts/2008-12-25-apache-2-on-mac-os-x-leopard-10-5-issue-on-upgrade.markdown @@ -0,0 +1,55 @@ +--- +layout: post +title: Apache 2 on Mac OS X Leopard 10.5 issue on upgrade +tags: [ development, mac, leopard, apache ] +published: true +--- + +This weekend I decided to arrange my hard drive in a way that I could have a +5GB partition with sinful Windows XP to play some games with the family. To do +that, I bought a 1TB external hard drive to use as a Time Machine backup for +the process. At the time, my disk was already partitioned for Ubuntu but since +I didn't find it useful anymore, I replaced it for Windows. + +Well, the good thing is I can actually play some old games like Empire Earth +and Counter-Strike with the cousins to have some fun. The bad news is my Apache +server settings screwed up. Two things happened. + +_Number one:_ `http://localhost/~user` was thrown a `403 Forbidden` access. +This problem is the result of the user configurations for the server whilst the +reinstallation / upgrade of the system, they don't exist now. What you have to +do is very simple. Go to /private/etc/apache2/users and create a file +`yourshortusername.conf` and type this: + +{% highlight apache %} + +Options Indexes MultiViews +AllowOverride None +Order allow,deny +Allow from all + +{% endhighlight %} + +Restart your server and you're ready to go! + +Number two: My virtual hosts blew away. I should have kept a record on how to +do this in case I had to a reinstallation, I guess I can kick myself now. (I'm +solving this as I write this post :P) Three steps: + +* Go to `/private/etc/hosts` and say you want to assign 127.0.0.1 to your alias, + like this: `127.0.0.1 youralias` +* Go to `/private/etc/apache2` and uncomment the line that includes the virtual + hosts configuration file. If you want to use PHP, you might want to uncomment + the line that includes it as well. +* Finally, go to `/private/etc/apache2/extra` and edit the `httpd-vhosts.conf` + mentioned on 2. and add this chunk of code: + +{% highlight apache %} + +DocumentRoot "/path/to/your/site/" +ServerAlias yoursitename +ServerName yoursitename + +{% endhighlight %} + +Restart your server and virtual hosts are up and running. diff --git a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html deleted file mode 100644 index 5934ee2..0000000 --- a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -layout: post -title: The 960px grid on top of full-range background -tags: -- Design -status: publish -type: post -published: true -meta: - _edit_last: '1' ---- -I have been putting myself to test on a client project, regarding aesthetics. I have used "The Grid" in other situations but not in this way. I have learned how to accomplish grid balance on top of full-range background... again, the hard way. I use this approach in this very blog so you should realize its result already. - -This accomplishment has been unveiled to me through three of my favorite websites out there: SimpleBits, Viget and OnWired. I know a lot of other websites that use this but these really caught my special attention. If you see three homepages, all of them use full-range backgrounds and yet they use the the 960px grid. I wanted that richness in my projects and so I gave it a try. Before I deepen into the procedure, i must say it's always good to have a container/bucket div instead of acting directly over the body element for cross-browser compatibility. I have tried it and IE 6 didn't like it very much. - -We are admitting a simple skeleton here: a simple header, a navigation bar, a main body and a footer should do the trick. So here's my procedure: -

Step 1

-Create the container div around. - -<div id='container'> -→ Skeleton goes here. -</div> - -This is helpful as I mentioned in order to set its width to 960px right there. - -#container { width: 960px; margin: X auto; } - -This is a very basic approach and it's a good one if you want to implement a 30px padded box like Paul Boag for example. That way you save further implementation and get a clean shot at the grid. However, if you plan to use full-range backgrounds like I did then you'll have a little more work. -

Step 2

-Don't set any width for the skeleton div's so they default to 100%. Now you're ready to set each one a background (perhaps you'll have a repeat-x option or an attached one merging to the background color). Now each div gets it's own background, which is what we want. For the header, it would be something like: - -#header { background: #xyz url('path/to/background.png') repeat-x; } -

Step 3

-Place a single div child inside each skeleton div. All of the content should go inside these child div's. Then, you can set each div child the 960px width like this: #container > div > div { width: 960px; margin: 0 auto; }This tells us the div's inside the skeleton div's get affected. That's why I'm saying every piece of content should go inside the child div's, while the background goes outside. -And you ask why not setting the default width to the skeleton div's itself? Well, you can do that but let me show me the differences. - -Without the child div's it would look like this... - -Again, this is a very simple example. You can try lots of other stuff like positioning only some of the div's, background different settings, anything. I hope you learned something from this example. diff --git a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown new file mode 100644 index 0000000..052c1d4 --- /dev/null +++ b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown @@ -0,0 +1,80 @@ +--- +layout: post +title: The 960px grid on top of full-range background +tags: [ design ] +published: true +--- + +I have been putting myself to test on a client project, regarding aesthetics. I +have used "The Grid" in other situations but not in this way. I have learned +how to accomplish grid balance on top of full-range background... again, the +hard way. I use this approach in this very blog so you should realize its +result already. + +This accomplishment has been unveiled to me through three of my favorite +websites out there: [SimpleBits](http://simplebits.com), +[Viget](http://viget.com) and [OnWired](http://onwired.com). I know a lot of +other websites that use this but these really caught my special attention. If +you see three homepages, all of them use full-range backgrounds and yet they +use the the 960px grid. I wanted that richness in my projects and so I gave it +a try. Before I deepen into the procedure, i must say it's always good to have +a container/bucket div instead of acting directly over the body element for +cross-browser compatibility. I have tried it and IE 6 didn't like it very much. + +We are admitting a simple _skeleton_ here: a simple header, a navigation +bar, a main body and a footer should do the trick. So here's my procedure: + +Step 1 +------ + +Create the container div around. + +{% highlight html %} +
+→ Skeleton goes here. +
+{% endhighlight %} + +This is helpful as I mentioned in order to set its width to 960px right there. + +{% highlight css %} +#container { width: 960px; margin: X auto; } +{% endhighlight %} + +This is a very basic approach and it's a good one if you want to implement a +30px padded box like [Paul Boag](http://boagworld.com) for example. That way +you save further implementation and get a clean shot at the grid. However, if +you plan to use full-range backgrounds like I did then you'll have a little +more work. + +Step 2 +------ + +Don't set any width for the skeleton div's so they default to 100%. Now you're +ready to set each one a background (perhaps you'll have a repeat-x option or an +attached one merging to the background color). Now each div gets it's own +background, which is what we want. For the header, it would be something like: + +{% highlight css %} +#header { background: #xyz url('path/to/background.png') repeat-x; } +{% endhighlight %} + +Step 3 +------ + +Place a single div child inside each skeleton div. All of the content should go +inside these child div's. Then, you can set each div child the 960px width like +this: `#container > div > div { width: 960px; margin: 0 auto; }` This tells us +the div's inside the skeleton div's get affected. That's why I'm saying every +piece of content should go inside the child div's, while the background goes +outside. And you ask why not setting the default width to the skeleton div's +itself? Well, you can do that but let me show me the differences. + +Without the +child div's it would look like this... + +Again, this is a very simple example. You can try lots of other stuff like +positioning only some of the div's, background different settings, anything. I +hope you learned something from this example. -- cgit v1.2.3-54-g00ecf