CSS Garden

Tipps und Tricks über Stylesheets

 

    Apache HTTP Server Test Page powered by CentOS

    Apache 2 Test Page
    powered by CentOS

    This page is used to test the proper operation of the Apache HTTP server after it has been installed. If you can read this page it means that the Apache HTTP server installed at this site is working properly.


    If you are a member of the general public:

    The fact that you are seeing this page indicates that the website you just visited is either experiencing problems or is undergoing routine maintenance.

    If you would like to let the administrators of this website know that you've seen this page instead of the page you expected, you should send them e-mail. In general, mail sent to the name "webmaster" and directed to the website's domain should reach the appropriate person.

    For example, if you experienced problems while visiting www.example.com, you should send e-mail to "webmaster@example.com".

    If you are the website administrator:

    You may now add content to the directory /var/www/html/. Note that until you do so, people visiting your website will see this page and not your content. To prevent this page from ever being used, follow the instructions in the file /etc/httpd/conf.d/welcome.conf.

    You are free to use the images below on Apache and CentOS Linux powered HTTP servers. Thanks for using Apache and CentOS!

    [ Powered by Apache ] [ Powered by CentOS Linux ]

    About CentOS:

    The Community ENTerprise Operating System (CentOS) Linux is a community-supported enterprise distribution derived from sources freely provided to the public by Red Hat. As such, CentOS Linux aims to be functionally compatible with Red Hat Enterprise Linux. The CentOS Project is the organization that builds CentOS. We mainly change packages to remove upstream vendor branding and artwork.

    For information on CentOS please visit the CentOS website.

    Note:

    CentOS is an Operating System and it is used to power this website; however, the webserver is owned by the domain owner and not the CentOS Project. If you have issues with the content of this site, contact the owner of the domain, not the CentOS Project.

    Unless this server is on the centos.org domain, the CentOS Project doesn't have anything to do with the content on this webserver or any e-mails that directed you to this site.

    For example, if this website is www.example.com, you would find the owner of the example.com domain at the following WHOIS server:

    http://www.internic.net/whois.html

Bild-Navigation mit CSS

Wie ich all die Adventskaldender mit Javascript zur Steuerung (z.Bsp Uli Stein) gesehen habe dachte ich mir, so etwas müsste doch auch mit reinem HTML und CSS realisierbar sein. Herausgekommen ist dieses:

Als erstes habe ich mir auf www.flickr.com einen Weihnachtsbaum gesucht. Diesen habe ich dann mit Hilfe von Gimp in 3, gleich grosse Teile unterteilt und jeder dieser Teile mit der dazugehörigen Adventsnummer (Ha! ein neues Wort) versehen.

Aus Bequemlichkeit zeige ich diese Technik hier nur mit den letzten 3 Tagen der Adventszeit, aber natürlich funktioniert es auch mit einer beliebigen Anzahl von Bilder.

Jetzt geht es an das "Zusammenbasteln". Zuerst einmal der HTML-Code mit 3 DIV's für die einzelnen Teile. In diesem Beispiel öffnet sich bei jedem Anklicken eines Türchens ein externer Link. Natürlich können hier auch Bilder, interne Links, Doumente oder was auch immer angesteuert werden.

<div class="top_pic">
<a href="http://www.flickr.com"></a>
</div>

<div class="bottom_left_pic">
<a href="http://www.oswd.org"></a>
</div>
<div class="bottom_right_pic">
<a href="http://www.csszengarden.com"></a>

</div>

Als nächstes wird pro Bildeinheit ein DIV erstellt und absolut positioniert. Diesen DIV's weisen wir die dazugehörigen Hintergrundbilder zu.

div.top_pic {
background: url(images/top.gif) no-repeat;
position: absolute;
left: 72px;
top: 10px;
width:127px;
height: 183px;
}
div.bottom_left_pic {
background: url(images/bottom_left.gif) no-repeat;
position: absolute;
left: 10px;
top: 193px;
width:127px;
height: 183px;
}
div.bottom_right_pic {
background: url(images/bottom_right.gif) no-repeat;
position: absolute;
left: 127px;
top: 193px;
width:127px;
height: 183px;
}

Im nächsten Schritt, werden die Link-Elemente der einzelnen DIV's in Block-Elemente verwandelt und ihnen wird die Breite und Höhe des Hintergrundbildes zugewiesen.

Dies bewirkt, dass beim Anwählen des Bildes nicht nur der Link selber, sondern das ganze Bild aktiv wird.

a {
display: block;
width: 127px;
height: 183px;
}

Jetzt müssen wir nur noch dafür sorgen, dass dem Benutzer beim Anwählen des gewünschten Türchens eine Information zum Öffnen angezeigt wird. Hier verwenden wir für die Benutzersteuerung ein Image mit integriertem Text. Der Code dazu:

a:hover {
background: url(images/door.gif) no-repeat center bottom;
}
			

 

>Zurück

 

© 1997 - 2019