0
Kayıt Ol

CSS Barkod Şablonu.

7

●

407

  • 02-07-2019, 18:27:46
    #1
    SunHiz
    SunHiz
    Merhaba kolay gelsin,

    CSS'de ufak bir şablona ihtiyacım var tam denk getiremiyorum malesef yapmak istediğimi.

    Yukarıdan aşağı 4cm soldan sağa 2cm şeklinde 5 adet yan yana etiketim var her sıra 5li yani.

    Yapmak istediğime en yaklaştığım hali : https://i.hizliresim.com/P7Bgq9.png

    Bu konuda yardımcı olabilirmisiniz?
  • 02-07-2019, 18:34:15
    #2
    Oktav
    Oktav
    Kimlik doğrulama veya yönetimden onay bekliyor.
    Selamlar, sorununuzu tam olarak kavrayamadım ama padding değerleri vermeyi denediniz mi?
  • 02-07-2019, 18:36:37
    #3
    SunHiz
    SunHiz
    Oktav adlı üyeden alıntı: mesajı görüntüle
    Selamlar, sorununuzu tam olarak kavrayamadım ama padding değerleri vermeyi denediniz mi?
    Merhaba bişeyler denedim ama kodları ekliyorum css konusunda hiç iyi değilim resimde gösterdiğim en yakın sonucu bu şekilde aldım ama stabil birşey değil malesef.

    <style>
#resim {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-45px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi {
float: left;
display: inline-block;
margin-left:-48px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim1 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-77px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi1 {
float: left;
display: inline-block;
margin-left:-80px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim2 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi2 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim3 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi3 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim4 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi4 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
</head>

<body>
<div id="yazi">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim" /></div>
<div id="yazi1">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim1" /></div>
<div id="yazi2">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim2" /></div>
<div id="yazi3">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim3" /></div>
<div id="yazi4">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim4" /></div>
  • 02-07-2019, 18:46:49
    #4
    Oktav
    Oktav
    İnceliyorum hocam biraz bekleteceğim.

    SunHiz adlı üyeden alıntı: mesajı görüntüle
    Merhaba bişeyler denedim ama kodları ekliyorum css konusunda hiç iyi değilim resimde gösterdiğim en yakın sonucu bu şekilde aldım ama stabil birşey değil malesef.

    <style>
#resim {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-45px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi {
float: left;
display: inline-block;
margin-left:-48px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim1 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-77px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi1 {
float: left;
display: inline-block;
margin-left:-80px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim2 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi2 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim3 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi3 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#resim4 {
float: left;
display: inline-block;
margin-top:35px;
margin-left:-79px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#yazi4 {
float: left;
display: inline-block;
margin-left:-82px;
position:absolute;
font-size:9px;
margin-top:45px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
</head>

<body>
<div id="yazi">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim" /></div>
<div id="yazi1">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim1" /></div>
<div id="yazi2">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim2" /></div>
<div id="yazi3">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim3" /></div>
<div id="yazi4">3001-Siyah/Kahverengi</div>
<div id="div"><img src="3001-100.png" width="132" height="40" id="resim4" /></div>
  • 02-07-2019, 19:07:51
    #6
    Oktav
    Oktav
    Ne kadar verimli bir yöntem emin değilim fakat bu şekilde aynı classlar ile bir çok kez ekleme yapabiliyorsunuz. Yani her barkod için yeniden css yazmanıza gerek yok

    Gerekli olan CSS kodları:
    .barkod {
display: inline-block;
position: relative;
margin-right: -70px;
margin-top: 40px;
}

.barkod-yazi {
transform: rotate(-90deg);
font-size: 9px;
position: absolute;
left: -5px;
}

.barkod-img {
transform: rotate(-90deg);
}

    Bu HTML i ne kadar barkod istiyorsanız o kadar kopyalayın.
    <div class="barkod">
<p class="barkod-yazi">3001-Siyah/Kahverengi</p>
<img class="barkod-img" src="3001-100.png" width="132" height="40" />
    </div>
    Sormak istediğiniz bir şey olursa ulaşmaktan çekinmeyin
  • 02-07-2019, 21:01:19
    #7
    SunHiz
    SunHiz
    Hocam çok teşekkür ederim size. Yarın deneyeceğim iş yerinde. Elinize sağlık.

    Oktav adlı üyeden alıntı: mesajı görüntüle
    Ne kadar verimli bir yöntem emin değilim fakat bu şekilde aynı classlar ile bir çok kez ekleme yapabiliyorsunuz. Yani her barkod için yeniden css yazmanıza gerek yok

    Gerekli olan CSS kodları:
    .barkod {
display: inline-block;
position: relative;
margin-right: -70px;
margin-top: 40px;
}

.barkod-yazi {
transform: rotate(-90deg);
font-size: 9px;
position: absolute;
left: -5px;
}

.barkod-img {
transform: rotate(-90deg);
}
    Bu HTML i ne kadar barkod istiyorsanız o kadar kopyalayın.
    <div class="barkod">
<p class="barkod-yazi">3001-Siyah/Kahverengi</p>
<img class="barkod-img" src="3001-100.png" width="132" height="40" />
    </div>
    Sormak istediğiniz bir şey olursa ulaşmaktan çekinmeyin
  • 02-07-2019, 22:44:01
    #8
    Oktav
    Oktav
    Rica ederim hocam ne demek
    SunHiz adlı üyeden alıntı: mesajı görüntüle
    Hocam çok teşekkür ederim size. Yarın deneyeceğim iş yerinde. Elinize sağlık.