Forum

HTML'de <div>...
 
Bildirimler
Hepsini Temizle

HTML'de <div> kullanımı

3 Yazılar
2 Üyeler
0 Reactions
2,310 Görüntüleme
(@GurkanISIK)
Gönderiler: 13
Eminent Member
Konu başlatıcı
 

Merhaba.

Aşağıda yaptıgım divlerin kodları bulunmakta. Sorum şu; divleri nasıl yan yana(yatay şekilde) dizebilirim.Kodları şu siteden çalıştırabilirsiniz =>  http://www.htmlogren.com/kendindene.php

 

 

<html>
<head>
<style type="text/css">

div.yan{

float:left;

}

</style>
</head>
<body bgcolor="#DCDCDC">

<div class="kpi-item-label" style="cursor:pointer;font-size:large;font-weight:bold;text-align:center;color:black;background-color:white;width:150px;height:50;padding-top:20px">Cur. Month<br> Forecast</div>
<div class="kpi-item-content" style="cursor:pointer;font-size:xx-large;font-weight:bold;text-align:center;color:#0096d6;background-color:white;width:150px;height:50">0</div>

 

<div class="kpi-item-label" style="cursor:pointer;font-size:large;font-weight:bold;text-align:center;color:black;background-color:white;width:150px;margin-top:10;height:50;padding-top:20px">Cur. Month<br> Actuals</div>
<div class="kpi-item-content" style="cursor:pointer;font-size:xx-large;font-weight:bold;text-align:center;color:#0096d6;background-color:white;width:150px;height:50">0</div>

 

<div class="kpi-item-label" style="cursor:pointer;font-size:large;font-weight:bold;text-align:center;color:black;background-color:white;width:220px;margin-top:10;height:50;padding-top:20px">Cur. Month<br> Forecast<br>Resources</div>
<div class="kpi-item-content" style="cursor:pointer;font-size:xx-large;font-weight:bold;text-align:center;color:#0096d6;background-color:white;width:220px;height:50;padding-top:20px">0 FTE</div>

 

<div class="kpi-item-label" style="cursor:pointer;font-size:large;font-weight:bold;text-align:center;color:black;background-color:white;width:130px;margin-top:10;height:50;padding-top:20px">Cur. Month<br> Allocated <br>Resources</div>
<div class="kpi-item-content" style="cursor:pointer;font-size:xx-large;font-weight:bold;text-align:center;color:#0096d6;background-color:white;width:130px;height:50;padding-top:20px">0 FTE</div>

 

<div class="kpi-item-label" style="cursor:pointer;font-size:large;font-weight:bold;text-align:center;color:black;background-color:white;width:220px;margin-top:10;height:50;padding-top:20px">Avg Project Duration</div>
<div class="kpi-item-content" style="cursor:pointer;font-size:xx-large;font-weight:bold;text-align:center;color:#0096d6;background-color:white;width:220px;height:50">DAYS</div>

 

</body>
</html>

 

 
Gönderildi : 07/01/2016 19:54

(@YasinErgene)
Gönderiler: 15
Active Member
 

Merhaba, aşağıdaki şekilde kullanırsanız isteğinize yakın bir sonuç olabilir.

Kolay gelsin.

 

<!DOCTYPE html>
<html>

<head>

<style type="text/css">
*{ box-sizing:padding-box;}
body { background-color:#DCDCDC;}
.kpi { float:left;margin-right:8px;padding:8px; background-color:white;text-align:center;font-weight:bold;cursor:pointer;width:140px;}
.kpi-item-label { font-size:large;color:black; width:100%;height:100px;padding-top:20px;clear:both;}
.kpi-item-content { font-size:xx-large; color:#0096d6;width:100%;clear:both;}
</style>
</head>
<body>

<div class="kpi">
    <div class="kpi-item-label" >Cur. Month<br> Forecast</div>
    <div class="kpi-item-content">0</div>
</div>
 
<div class="kpi">
    <div class="kpi-item-label">Cur. Month<br> Actuals</div>
    <div class="kpi-item-content">0</div>
</div>
 
<div class="kpi">
    <div class="kpi-item-label">Cur. Month<br> Forecast<br>Resources</div>
    <div class="kpi-item-content">0 FTE</div>
</div>
 
<div class="kpi">
    <div class="kpi-item-label">Cur. Month<br> Allocated <br>Resources</div>
    <div class="kpi-item-content">0 FTE</div>
</div>
 
<div class="kpi">
    <div class="kpi-item-label">Avg Project Duration</div>
    <div class="kpi-item-content">DAYS</div>
</div>

</body>
</html>

 
Gönderildi : 08/01/2016 00:35

(@GurkanISIK)
Gönderiler: 13
Eminent Member
Konu başlatıcı
 

Çok teşekkür ederim.

 
Gönderildi : 08/01/2016 12:32

Paylaş: