css ile resim üzerine yazı yazma.
arkadaşlar merhaba bi css ile resim üzerine yazı yazma konusunda yardımınıza ihtiyacım var..şimdiden teşekkür ederim.
index.php:
<link rel="stylesheet nofollow" type="text/css" href="../manset/css/style.css?v=1.0.6" media="screen" />
<script src="../manset/js/jquery-1.4.2.js"></script>
<script src="../manset/js/plugins-v1.js?v=1.0.6"></script>
<script src="../manset/js/home-v1.js?v=1.0.6"></script>
</head>
<body>
<div class="anamanset">
<div class="anamanset-resim-div">
<div class="anamanset-resim">
<ul>
<?php
$hbsorgu=mysql_query("select * from haber_haberler where haber_tur='headline' and haber_aktif='yes' order by haber_tarih desc limit 10");
$i=1;
while($hsatir=mysql_fetch_array($hbsorgu)):
$haber_id="$hsatir[0]";
$haber_kategori="$hsatir[1]";
$haber_baslik="$hsatir[2]";
$haber_paragraf="$hsatir[3]";
$haber_metni="$hsatir[4]";
$haber_etiket="$hsatir[5]";
$haber_kaynak="$hsatir[6]";
$haber_rating="$hsatir[7]";
$haber_tarih="$hsatir[8]";
$haber_manset_resim="$hsatir[9]";
$haber_ic_resim="$hsatir[10]";
$haber_tur="$hsatir[11]";
$haber_video="$hsatir[12]";
$haber_aktif="$hsatir[13]";
$basliklink = permayap($haber_baslik);
if ($haber_video != "") {
$vhaber_baslik = "$haber_baslik <font color=#FF0>(Video)</font>"; }
else {
$vhaber_baslik = $haber_baslik;
}
echo '<li title="'.$i.'" class=""><a href="haber-'.$haber_id.'-'.$basliklink.'.html"><img title="'.$haber_baslik.'" src="images_up/'.$haber_manset_resim.'" alt="'.$haber_baslik.'" /><span>'.$haber_baslik.'</span></a></li>';
$i++;
endwhile;?>
</ul></div></div>
<div class="anamanset-pager">
<ul>
<?php
$hbsorgu=mysql_query("select * from haber_haberler where haber_tur='headline' and haber_aktif='yes' order by haber_tarih desc limit 10");
$y=1;
while($hsatir=mysql_fetch_array($hbsorgu)):
$haber_id="$hsatir[0]";
$haber_kategori="$hsatir[1]";
$haber_baslik="$hsatir[2]";
$basliklink = permayap($haber_baslik);
if ($haber_video != "") {
$vhaber_baslik = "$haber_baslik <font color=#FF0>(Video)</font>"; }
else {
$vhaber_baslik = $haber_baslik;
}
if($y==1){$class="none";$current="current"; }else{$class="";$current="";}
echo '<li class="'.$class.'"><a href="haber-'.$haber_id.'-'.$basliklink.'.html" class="'.$current.'">'.$y.'</a></li>';
$y++;
endwhile;?>
</ul>
</div>
<div class="anamanset-buttons">
<a href="javascript:;" class="anamanset-left prev"><img src="manset/images/link.gif" alt="" width="20" height="20" /></a>
<a href="son-mansetler.html" class="anamanset-all"><img src="manset/images/link.gif" alt="" width="20" height="20" /></a>
<a href="javascripT:;" class="anamanset-right next"><img src="manset/images/link.gif" alt="" width="20" height="20" /></a></div>
</div>
style.css:
/* RESET */
ul,li{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}ol,ul{list-style:none;}blockquote,q{quotes:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}
/* Start LINKS */
/* Finish LINKS */
.anamanset { float:left; width:555px; margin-left:5px; height:335px; background:url(../images/man-nav.jpg) bottom no-repeat; margin-bottom:0px; position: relative; }
.anamanset-resim-div{ float:left; width:555px; height:296px; overflow:hidden; position:relative; }
.anamanset-resim{ float:left; height:296px; width:6050px; }
.anamanset-resim li{float:left;}
.anamanset-resim a{ width:555px; height:296px; display:block; position:relative; }
.anamanset-resim a img{ width:555px; height:296px; position:absolute; top:0px; left:0px; }
.anamanset-pager{ float:left; width:396px; height:40px;}
.anamanset-pager li{ float:left; width:35px; height:40px; display:inline; padding-left:1px; }
.anamanset-pager li.none{ padding-left:0; }
.anamanset-pager li a{ display:block; font:bold 16px calibri; color:#ffffff; width:35px; height:35px; text-align:center; padding-top:10px; }
.anamanset-pager li a:hover{ color:#fff; text-decoration:none; background:url(../images/man-hov.png) no-repeat; }
.anamanset-pager li a.current{ color:#fff; background:url(../images/man-hov.png) no-repeat; }
.anamanset-buttons{ float:left; width:159px; height:40px; }
.anamanset-left{ float:left; width:16px; height:40px; margin-left:12px; }
.anamanset-right{ float:left; width:16px; height:40px; margin-left:5px; }
.anamanset-all{ float:left; width:100px; height:18px; margin:11px 0 0 5px; }
.anamanset-left:hover{ float:left; width:16px; height:40px; margin-top:-1px; margin-left:12px; background:url(../images/anamanset-left-hov.jpg ) no-repeat; }
.anamanset-right:hover{ float:left; width:16px; height:40px; margin-top:-1px;margin-left:5px; background:url(../images/anamanset-right-hov.jpg ) no-repeat; }
.anamanset-all:hover{ float:left; width:100px; height:18px; margin-top:10px; background:url(../images/anamanset-all-hov.jpg ) no-repeat; }
.sport-wrap .anamanset-resim a span{ background:url(../images/man-trans-sport.png) no-repeat; }/* xxxx */
.sport-wrap .anamanset { float:left; width:555px; height:300px; background:url(../images/man-nav-sport.jpg) bottom no-repeat; margin-bottom:15px; }
.sport-wrap .anamanset-pager li a:hover{ color:#fff; background:url(../images/man-hov-sport.png) no-repeat; }
.sport-wrap .anamanset-pager li a.current{ color:#fff; background:url(../images/man-hov-sport.png) no-repeat; }
.sport-wrap .anamanset-left:hover{ float:left; width:16px; height:40px; margin-left:12px; background:url(../images/anamanset-left-hov-sport.jpg ) no-repeat; }
.sport-wrap .anamanset-right:hover{ float:left; width:16px; height:40px; margin-left:5px; background:url( ../images/anamanset-right-hov-sport.jpg ) no-repeat; }
.sport-wrap .anamanset-all:hover{ float:left; width:100px; height:18px; margin:11px 0 0 5px; background:url(../images/anamanset-all-hov-sport.jpg ) no-repeat; }
ul,li{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}ol,ul{list-style:none;}blockquote,q{quotes:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}
/* Start LINKS */
/* Finish LINKS */
.anamanset { float:left; width:555px; margin-left:5px; height:335px; background:url(../images/man-nav.jpg) bottom no-repeat; margin-bottom:0px; position: relative; }
.anamanset-resim-div{ float:left; width:555px; height:296px; overflow:hidden; position:relative; }
.anamanset-resim{ float:left; height:296px; width:6050px; }
.anamanset-resim li{float:left;}
.anamanset-resim a{ width:555px; height:296px; display:block; position:relative; }
.anamanset-resim a img{ width:555px; height:296px; position:absolute; top:0px; left:0px; }
.anamanset-pager{ float:left; width:396px; height:40px;}
.anamanset-pager li{ float:left; width:35px; height:40px; display:inline; padding-left:1px; }
.anamanset-pager li.none{ padding-left:0; }
.anamanset-pager li a{ display:block; font:bold 16px calibri; color:#ffffff; width:35px; height:35px; text-align:center; padding-top:10px; }
.anamanset-pager li a:hover{ color:#fff; text-decoration:none; background:url(../images/man-hov.png) no-repeat; }
.anamanset-pager li a.current{ color:#fff; background:url(../images/man-hov.png) no-repeat; }
.anamanset-buttons{ float:left; width:159px; height:40px; }
.anamanset-left{ float:left; width:16px; height:40px; margin-left:12px; }
.anamanset-right{ float:left; width:16px; height:40px; margin-left:5px; }
.anamanset-all{ float:left; width:100px; height:18px; margin:11px 0 0 5px; }
.anamanset-left:hover{ float:left; width:16px; height:40px; margin-top:-1px; margin-left:12px; background:url(../images/anamanset-left-hov.jpg ) no-repeat; }
.anamanset-right:hover{ float:left; width:16px; height:40px; margin-top:-1px;margin-left:5px; background:url(../images/anamanset-right-hov.jpg ) no-repeat; }
.anamanset-all:hover{ float:left; width:100px; height:18px; margin-top:10px; background:url(../images/anamanset-all-hov.jpg ) no-repeat; }
.sport-wrap .anamanset-resim a span{ background:url(../images/man-trans-sport.png) no-repeat; }/* xxxx */
.sport-wrap .anamanset { float:left; width:555px; height:300px; background:url(../images/man-nav-sport.jpg) bottom no-repeat; margin-bottom:15px; }
.sport-wrap .anamanset-pager li a:hover{ color:#fff; background:url(../images/man-hov-sport.png) no-repeat; }
.sport-wrap .anamanset-pager li a.current{ color:#fff; background:url(../images/man-hov-sport.png) no-repeat; }
.sport-wrap .anamanset-left:hover{ float:left; width:16px; height:40px; margin-left:12px; background:url(../images/anamanset-left-hov-sport.jpg ) no-repeat; }
.sport-wrap .anamanset-right:hover{ float:left; width:16px; height:40px; margin-left:5px; background:url( ../images/anamanset-right-hov-sport.jpg ) no-repeat; }
.sport-wrap .anamanset-all:hover{ float:left; width:100px; height:18px; margin:11px 0 0 5px; background:url(../images/anamanset-all-hov-sport.jpg ) no-repeat; }
2013-05-16 04:54:46 Edit:2013-05-16 04:55:55
css ile resim üzerine yazı yazma
bu resimdeki gibi nasıl yapabilirim?
2013-05-16 04:57:00
Php
Merhaba,
id bilgisine göre önce slayt resmini çekip ekranda gösterirsiniz daha sonra o slayt resmine ait yazıyı çekersiniz ve css kodları ile pozisyonu düzenleyebilirsiniz. Örneğin: <div name="slide_text" style="position:absolute; margin-top:100px; margin-left:100px"> text </div>
kullanmanız gereken anahtar kelime z-index
İyi çalışmalar.
2013-05-31 12:52:27
Sitede Ara
Özel Arama