CSS konusunda Yardım

Kodla Büyü
C

compteach

Aktif Üye
Mesajlar
209
Arkadaşlar resimdeki bir görüntüyü css kullanarak div lerle nasıl yapacağız yada yapabilir miyiz?
 

Ekli dosyalar

  • nobet.jpg
    nobet.jpg
    63.7 KB · Görüntüleme: 504
hiç deneme yapmadan direk buraya yazıyorum. sen artık incele mantığını kapmaya çalış

Kod: 
<div class="menu_ogesi" id="birinci_menu">
    <div class = "kucuk_yazi">
     Zemin <br> Kat 1
     </div>
</div>
<div class="menu_ogesi" id="ikinci_menu">
    <div class = "kucuk_yazi">
     Zemin <br> Kat 2
     </div>
</div>

<style>
   .menu_ogesi{
      position:relative:
      folat :left
       width:150px;
      height:48px;
      border:1px solid #ccc;
      borderder-radius:5px;
    }

.kucuk_yazi{
    position:relative:
    float:left   
    height:45px
    width:45px;
    margin:2px;
   font-size:10px;
}

#birinci_menu{
   backgroud-color:#00ff00;
}

#ikinci_menu{
   backgroud-color:#ff00ff;
}
</style>
 
Hocamın yaptığının düzeltilmiş ve tam dediğiniz şekli :)

<style>
.menu_ogesi{ position:relative;
folat :left;
width:300px;
height:48px;
border:1px solid #CCC;
border-radius:10px;
display: table;
}

.kucuk_yazi{
position:relative;
float:left ;
height:45px;
width:45px;
margin:2px;
font-size:10px;
background-color:#FFFFFF;
opacity: 0.8;
border-radius:10px;
text-align:center;
display: table;
}
.kucuk_yazi p {
display: table-cell;
vertical-align: middle;
text-align: center
}

#birinci_menu{
background-color:#0F0;
margin-bottom:2px;
}

#ikinci_menu{
background-color:#F60;
margin-bottom:2px;
}
</style>
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri
Üst