CSS Garden

Tipps und Tricks über Stylesheets

 

    Web Server's Default Page
    Web Server's Default Page

    This page is generated by Plesk, the leading hosting automation software. You see this page because there is no Web site at this address.

    You can do the following:

    • Create domains and set up Web hosting using Plesk.
    What is Plesk

    Plesk is a hosting control panel with simple and secure web server and website management tools. It was specially designed to help IT specialists manage web, DNS, mail and other services through a comprehensive and user-friendly GUI. Learn more about Plesk.

Picture Box

Eine etwas andere Möglichkeit zum Anzeigen von Bilder. Dies ist ein einfaches Beispiel, wie die Eigenschaften 'display:none' und 'display:block' eingesetzt werden können.

Bei 'hover' kann natürlich auch anstelle von einem Bild - wie in diesem Beispiel - Text angezeigt werden.

CSS-Teil

.button
{
background-color: #99CCFF;
width:100px;
margin-bottom: 2px;
}

.button a
{
color:#000066;
border:1px solid black;
display: block;
text-decoration:none;
padding:5px;
}

.button a:hover
{
width:365px;
}

.button a span {display:none;}

.button a:hover span
{
background:#ffffff;
border: 0 none;
display:block;
padding:10px;
}

.button img
{
border: 0 none;
}

HTML-Code

<div class="button">
<a href="#">Sardinien<span><img src="sardinien.jpg"/></span></a>
</div>
<div class="button">
<a href="#">Elba<span><img src="elba.jpg"/></span></a>
</div>
<div class="button">
<a href="#">Korsika<span><img src="korsika.jpg"/></span></a>
</div>

Original Code-Konzept von http://css.fractatulum.net/

 

>Zurück

 

© 1997 - 2019