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

Hcard mit CSS

So eine hcard schreit gerade danach mit CSS bearbeitet zu werden. Dies habe ich im folgenden Beispiel gemacht:

Als erstes werden im Gimp 4 Images erstellt. Eines für den Hintergrund und die 3 anderen um die abgerundeten Ecken darzustellen.

Verwendet wird hier die "Sliding Door Technik"  welche am 20. Oktober 2003 das erste Mal in einem Artikel des "A List Apart" erschienen ist. Nicht ganz unkompliziert diese Technik. Einfacher wird dies dann mit CSS3, dort werden wir nämlich die Möglichkeit haben, jedem Element mehrere Images zuzuteilen. Da sollte dann ein DIV mit 4 Images reichen um diese abgerundeten Ecken darzustellen.

Als nächstes der HTML-Code welcher uns die hcard erstellt:

<div class="vcard">
<p class="fn org">CSS Garden
<a href="http://www.css-garden.ch">
<img src="images/css_garden_logo.gif"
alt="css-garden icon"></a>
</p>

<div class="adr">
<p class="street-address"> Mustergasse 66 </p>
<p><span class="postal-code"> 4002 </span>

<span class="locality"> Basel </span></p>
<p class="country-name">Schweiz</p>
</div>

<div class="telecom">
<p class="tel">Telephon: <span class="tel">

<span class="value">0900 8 11 11 8</span></p>
<p class="email">Email:
<a class="value" href="mailto:emailadresse">
emailadresse</a></p>
</div>

</div>

Und jetzt endlich beginnt der CSS-Teil. Das erste Bild hängen wir an das vcard-Element. Gleichzeitig passen wir noch die Schriftart und die gewünschte Breite an.

.vcard {
background: url(images/bl_back.gif) no-repeat;
color: #ffffff;
font-family: arial, helvetica, sans-serif;
width:16em;
}

Als nächstes setzen wir die obere, rechte Ecke an. Hier benützen wir den Paragraph der Klasse "fn" und "org"; das erste Kind-Element des vcard-Elements.

.fn {
background: url(images/bl_top_right.gif) no-repeat top right;
padding-top: 2em;
font-weight: bold;
font-size: 1.1em;
}

Jetzt kümmern wir uns um den unteren Teil der hcard. Die EMail- und Telephoneigenschaften werden in einem DIV-Element mit dem Namen "telecom" gruppiert. Dieses Element verwenden wir, um den unteren Rand anzufügen.

.telecom {
background: url(images/bl_bottom_left.gif) no-repeat left bottom;
margin-bottom: 2em;
}

An das letzte Block-Element im Fluss, nämlich das Paragraph-Element "email" wird nun die rechte, untere, abgerundete Ecke angehängt. Eine andere Möglichkeit wäre auch das letzte Inline-Element (in diesem Fall wäre dies der Email-Link) zu nehmen und es mit Hilfe von CSS in ein Block-Element zu verwandeln.

Natürlich müssen wir das Block-Element exklusiv wählen, das heisst mit Hilfe einer Klasse, in unserem Fall "p.email".

p.email {
background: url(images/bL_bottom_right.gif) no-repeat right bottom;
padding-bottom: 2em;
}

Nun werden wir noch einzelne Zeilen mit extra für Mikroformat hergestellte Icons versehen. Dies realisieren wir, indem wir den einzelen Paragraph-Elementen - mit Hilfe der definierten Klassen - Images zuweisen und den Text etwas nach rechts einrücken.

.street-address {
background: url(images/home.gif) no-repeat center left;
padding-left: 1.5em;
}

Jetzt wird noch aufgeräumt. Das Image mit dem Logo "floaten" wir auf die rechte Seite:

.vcard img {
float: right;
padding-right: 1em;
margin-top: -1em ;
}

Als letztes schaffen wir noch einen Abstand zum linken Rand und geben dem Link für das EMail noch eine andere Farbe.

.vcard p {
margin-left: 1em;
}
.vcard a {
color: #999999;
}

So die hcard ist fertig. Das coole daran ist, dass sie als Liquid-Layout erstellt ist und wir jederzeit die Schriftgrösse im Browser anpassen können. Die Grösse der Box passt sich jeweils an. Getestet habe ich den Code im Firefox 2.0.

Links zum Thema hcard, vcard und microformats:

Originalcode:

http://24ways.org/2006/styling-hcards-with-css

 

>Zurück

 

© 1997 - 2019