merhaba arkadaşlar elimde şöyle bir png resim var ben psd to css i yavaş yavaş öğrenmeye çalışıyorum bir yerde bi video izlemiştim ama tekrar orayı bulamadım adam resimin köşelerini kesip tek tek kaydediyordu. daha sonra html/css te kod yazarak bunları birleştiriyordu. içine ne kadar çok içerik girilirse o oranla o alan büyüyor bende bu işlemi yaptırmak istiyorum.yani aşağıdaki resim benim içerik alanım olacak içine aşağı doğru yazıları doldurdukça aşağı tarafı uzayacak bu işlemi nasıl yapabilirim ?
elimdeki resim
Merhabalar,
2 seçenek var:
bu resmi alıp bir "div" kutusunun içine koyup ve o div'in içindede bir div oluşturup o div'e scrollbar yani kayan haline getirmek...
Örnek veriyorum:
HTML Kod:
<div id="anakutu">
<div class="icerik">
ICERIK YAZISI
</div>
</div>
CSS Kod:
<style type="text/css">
#anakutu {
width: 706px;
height: 626px;
position: relative;
background: url("https://g1212.hizliresim.com/14/1/gglv0.png") no-repeat;
}
#anakutu .icerik {
position: absolute;
left: 50px;
top: 50px;
width: 630px;
height: 510px;
overflow: auto;
}
</style>
Rakamlarla oynayıp istediğin gibi şekillendirebilirsin...
ikinci seçenek ise şöyle:
öncelikle png yi 3 e bölüyorsun "baş" - "gövde" - "alt" kısımlarına
ve gövde kısmını tekrarlatıyorsun...
onunda kodlarını hazırlayıp vereyim.
HTML Kod:
<div id="ust"> </div>
<div id="govde">
<div class="icerik">
ICERIK YAZISI
</div>
</div>
<div id="alt"> </div>
CSS Kod:
<style type="text/css">
#ust {
width: 706px;
height: 66px;
background: url("https://www.imageto.org/images/7PHki.png") no-repeat;
}
#alt {
width: 706px;
height: 66px;
background: url("https://www.imageto.org/images/yaWqi.png") no-repeat;
}
#govde {
width: 706px;
background: url("https://www.imageto.org/images/XgZpR.png") repeat-y;
}
#govde .icerik {
margin-left: 50px;
width: 650px;
}
</style>
kendim denedim oldu birde sen dene...
kolay gelsin
