Css-Thema Bilgi Paylaşım Platformu..

Bilgi Mesajlari


 

 

Css:


body {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-image: url('https://img.webme.com/pic/c/css-thema/bg.png');
margin-left: auto;
margin-right: auto;
width: 400px;
margin-top: 100px;
}
#uyari {
background-image: url('https://img.webme.com/pic/c/css-thema/bilgilendirme.png');
background-repeat: no-repeat;
width: 365px;
height: 46px;
color: #4f4d30;
text-shadow: 1px 1px #ffffff;
font-size: 9pt;
padding-left: 55px;
margin-bottom: 20px;
}
#hata {
background-image: url('https://img.webme.com/pic/d/dream-tube/bilgilendirme.png'');
background-repeat: no-repeat;
background-position: 0px -46px;
width: 365px;
height: 46px;
color: #9c394b;
text-shadow: 1px 1px #ededed;
font-size: 9pt;
padding-left: 55px;
margin-bottom: 20px;
}
#basarili {
background-image: url(''https://img.webme.com/pic/d/dream-tube/bilgilendirme.png'');
background-repeat: no-repeat;
background-position: 0px -92px;
width: 365px;
height: 46px;
color: #535d3a;
text-shadow: 1px 1px #ededed;
font-size: 9pt;
padding-left: 55px;
margin-bottom: 20px;
}
.baslik {
font-size: 10pt;
font-weight: bold;
padding: 5px 0px 4px 0px;;
}
.kapat {
position: absolute;
margin-left: 292px;
padding-top: 5px;
font-weight: bold;
font-family: Tahoma;
font-size: 10px;
cursor: pointer;
}
.ku {
color: #ecd17f;
}
.kh {
color: #ff92a0;
}
.kb {
color: #bdd19a;
}


 

Mesaj Kodu:


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<title>Bilgilendirme</title>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://bilgiliweb.byethost4.com/dream-tube/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

$('.ku').click(function() {
$('#uyari').fadeTo('slow', 0);
$(this).slideUp(0);
});

$('.kh').click(function() {
$('#hata').fadeTo('slow', 0);
$(this).slideUp(0);
});

$('.kb').click(function() {
$('#basarili').fadeTo('slow', 0);
$(this).slideUp(0);
});

});
</script>
</head>

<body>

<div id="uyari">

<span class="kapat ku">X</span>
<div class="baslik">
Uyarı Mesaj Başlığı</div>
<div>
Merhaba. Ben bir uyarı mesajıyım.</div>
</div>
<div id="hata">
<span class="kapat kh">X</span>

<div class="baslik">
Hata Mesaj Başlığı</div>
<div>
Hata. bu mesajı görüyorsanız birşeyler ters gidiyor.</div>
</div>
<div id="basarili">
<span class="kapat kb">X</span>
<div class="baslik">

Başarılı Mesaj Başlığı</div>
<div>
Bu mesajı görüyorsanız başarılı oldunuz demektir.</div>
</div>

</body>

</html>

 
 
Bugün 2 ziyaretçikişi burdaydı!
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol