Running virtual hosts on Mac OS X 10.6.8 running Apache 2.2.22.

/etc/hosts is as follows:

127.0.0.1       localhost     3dweergave   studio-12.fritz.box
255.255.255.255 broadcasthost
::1             localhost 
fe80::1%lo0     localhost

Virtual hosts configuration:

NameVirtualHost *:80

<VirtualHost *:80>
    DocumentRoot "/opt/local/www/3dweergave"
    ServerName 3dweergave
    ErrorLog "logs/3dweergave-error_log"
    CustomLog "logs/3dweergave-access_log" common
    <Directory "/opt/local/www/3dweergave">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName main
</VirtualHost>

This will output the following settings:

*:80 is a NameVirtualHost
default server 3dweergave (/opt/local/apache2/conf/extra/httpd-vhosts.conf:21)
port 80 namevhost 3dweergave (/opt/local/apache2/conf/extra/httpd-vhosts.conf:21)
port 80 namevhost main (/opt/local/apache2/conf/extra/httpd-vhosts.conf:34)

I made 3dweergave the default server by putting it first in the list. This will cause all undefined virtual hosts' names to load 3dweergave, and thus http://localhost will point to 3dweergave. Of course, normally, the first in the list is the virtual host main and localhost will point to main, but for testing purposes I switched them.

When I navigate to http://localhost, my CakePHP default homepage shows as expected: Screenshot 1

But when I navigate to http://3dweergave, my CakePHP default homepage doesn't show as expected. It looks like every relative link to resources are not accepted by the server: Screenshot 2

For example, the CSS isn't loaded. When I open the source and click on the link, it opens the CSS file in the browser without errors. But when I run FireBug while loading the webpage, it seems that the CSS file isn't retrieved. (<link rel="stylesheet" type="text/css" href="/css/cake.generic.css" />)

How can I fix this unwanted behaviour?