Tables in Divs

by Phil Wolpers

HTML

<div class='notification-popup-container-main'>
    <div class='notification-popup-container update'> <a class='notification-popup-delete' href='#'><img src='http://png-3.findicons.com/files/icons/2232/wireframe_mono/16/trash.png' title='Delete Notification' alt='Delete' /></a>

        <table class='notification-popup-body'>
            <tbody>
                <td class='notification-popup-type'>
                    <img src="http://www.fancyicons.com/free-icons/222/simple/png/32/jsfiddle_32.png" />
                </td>
                <td class='title-message'>
                    <div class="notification-popup-title">Lorem Ipsum</div>
                    <div class="notification-popup-message">Lorem ipsum dolor sit amet, vix an civibus evertitur, quo ex iusto causae. Nam ex tation nostrud adversarium. An apeirian tacimates omittantur mel, no ullum vitae facilis mei, no vim simul recusabo. Omnium cetero accusata vim no, nam in putant mentitum repudiare. Denique invidunt postulant ex qui, quaeque dissentias ius ex. Ei sit clita argumentum.</div>
                </td>
            </tbody>
        </table>
    </div>
    <div class='notification-popup-container downtime'> <a class='notification-popup-delete' href='#'><img src='http://png-3.findicons.com/files/icons/2232/wireframe_mono/16/trash.png' title='Delete Notification' alt='Delete' /></a>

        <table class='notification-popup-body'>
            <tbody>
                <td class='notification-popup-type'>
                    <img src="http://www.fancyicons.com/free-icons/222/simple/png/32/jsfiddle_32.png" />
                </td>
                <td class='title-message'>
                    <div class="notification-popup-title">Lorem Ipsum</div>
                    <div class="notification-popup-message">Lorem ipsum dolor sit amet, vix an civibus evertitur, quo ex iusto causae. Nam ex tation nostrud adversarium. An apeirian tacimates omittantur mel, no ullum vitae facilis mei, no vim simul recusabo....

CSS

.notification-popup-container-main {
    position: absolute;
    top: 55px;
    left: 55px;
    z-index: 98;
}
.notification-popup-container {
    background-color: #fff;
    border: 2px solid;
    border-bottom: none;
    border-color: #75C3E0;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    overflow: visible;
    width: 400px;
    z-index: 99;
    display: block;
    position: relative;
}
.notification-popup-container.update {
    border-color: #75C3E0;
}
.notification-popup-container.downtime {
    border-color: #FFD324;
}
.notification-popup-container.update:last-child {
    border: 2px solid;
    border-color: #75C3E0;
}
.notification-popup-container.downtime:last-child {
    border: 2px solid;
    border-color: #FFD324;
}
.notification-popup-title {
    font-family:"Century Gothic", "Helvetica", "Arial", sans-serif;
    font-weight: bold;
    font-size: 11pt;
    padding-left: 5px;
}
.notification-popup-message {
    font-family:"Tahoma", "Geneva", sans-serif;
    font-size: 10pt;
    color: #655d57;
    padding-left: 5px;
    width: 320px;
}
.notification-popup-type {
    padding: 8px;
}
.notification-popup-delete {
    float: right;
}

JavaScript

$(function () {
    var nContainer = $(".notification-popup-container");

    //notification popup fade in on page load
    $(function () {
        nContainer.fadeIn("slow");
    });

    $("a.notification-popup-delete").click(function (e) {
        e.preventDefault();
        $(this).closest(nContainer).remove();
    });
});