Textlink oder Button

by Bianca Kuehweidner

HTML

<table>
    <tr>
        <td>
            <a href="http://hitchhiker.travel/website/aspx/contentpages/offerlist2.aspx?cat=-&amp;search=melbourne" class="TilePlace"><b>Melbourne</b></a>
        </td>
    </tr>
    <tr>
        <td>
            <img style='background-position: -104px 0px; width: 26px; height: 26px; margin-right: 10px; margin-left: 10px; float: left; background-image: url("http://hitchhiker.travel/website/Images/weatherSprite.png");' alt="" src="http://hitchhiker.travel/website/Images/transparent.gif"/>
            </td>
        </tr>
    <tr>
        <td>
            <font class="TileTemperature"><b><font class="TileTemperature"><b>11°C</b></font></b></font>
        </td>
    </tr>
</table>



<table width="100%" cellpadding="4">
<tr>
    <td class="TileItem" valign="top">
        <a class="TileItem" href="http://hitchhiker.travel/website/aspx/contentpages/offerlist2.aspx?cat=-&amp;search=melbourne+ab+deutschland+return">Melbourne ab Deutschland return
            <span class="TileItem">119,00€</span>
        </a>
    </td>    
</tr>
<tr>
    <td class="TileItem" valign="top">
        <a class="TileItem" href="http://hitchhiker.travel/website/aspx/contentpages/offerlist2.aspx?cat=-&amp;search=melbourne+ab+deutschland+return">Melbourne ab Deutschland return
        <span class="TileItem">119,00€</span>
        </a>
    </td>
</tr>
<tr>
    <td class="TileItem" valign="top">
        <a class="TileItem" href="http://hitchhiker.travel/website/aspx/contentpages/offerlist2.aspx?cat=-&amp;search=auto+in+melbourne">Auto in Melbourne
        <span class="TileItem">23,86€</span>
        </a>
    </td>
</tr>
</table>

CSS

body { 
    font-family: arial; 
    font-size: 12px; 
    background-color: #379; 
}

a.TilePlace { 
    font-size: 16px; 
    text-decoration: none; 
    color: #fff;
}
a.TileItem span.TileItem { 
    float: right; 
    text-align: right; 
    min-width: 70px; 
    background-color: inherit; 
}


@media only screen and (max-width: 959px) {
    a.TileItem { 
        color: #fff;
    }
    a.TileItem:hover {
        color: yellow;
    }
}

@media only screen and (max-width:959px) and (min-width:768px) {
    /* Tablet landscape */
}

@media only screen and (max-width:767px) and (min-width:480px) {
    /* Tablet portrait */
}

@media only screen and (max-width: 479px) {
    a.TileItem { 
        color: #000;
        background-color: #fff;
        opacity: 0.5;
        display: block;
        padding: 5px 4px;
        border-radius: 4px;
        text-decoration: none;
    }  
    a.TileItem:hover {
        color: #000;
        background-color: yellow; 
    }
}