قرار دادن یک عکس در کنار یک متن (html - css)

[سیدرضا بازیار]

من یه منو باز شوند عمودی دارم و میخوام در کنار لیست های منو عکس مربوط به اون رو بزارم

میخوام در کنار "کتاب" یه عکس کتاب قرار بدم (به طرز زیبایی قرار بگیره - ایکن نباشه! عکس باشه با فرمت png)

بهترین روش برای این کار چیه؟


<style>
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}

*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}

.container-kazerun {
width: 300px;
margin: 1px auto;
}
.container-kazerun > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}

.dropdown-kazerun {
position: relative;
}
.dropdown-kazerun a {
text-decoration: none;

}
.dropdown-kazerun [data-toggle="dropdown-kazerun"] {
display: block;
text-align:right;
color: white;
background: #C0392B;
-moz-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
-webkit-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown-kazerun [data-toggle="dropdown-kazerun"]:hover {
background: #cd3d2e;
}
.dropdown-kazerun [data-toggle="dropdown-kazerun"]:before {
position: absolute;
content: '\25BC';
font-size: 0.7em;
color: #fff;
top: 13px;
left:10px;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown-kazerun > .dropdown-menu-kazerun {
max-height: 0;
text-align:right;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown-kazerun > .dropdown-menu-kazerun li {
padding: 0;
}
.dropdown-kazerun > .dropdown-menu-kazerun li a {
display: block;
color: #6f6f6f;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown-kazerun > .dropdown-menu-kazerun li a:hover {
background: #f6f6f6;
}
.dropdown-kazerun > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.dropdown-kazerun > input[type="checkbox"]:checked ~ .dropdown-menu-kazerun {
max-height: 9999px;
display: block;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 2s ease-in-out;
-o-transition: max-height 2s ease-in-out;
-webkit-transition: max-height 2s ease-in-out;
transition: max-height 2s ease-in-out;
}
.dropdown-kazerun > input[type="checkbox"]:checked + a[data-toggle="dropdown-kazerun"]:before {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}

@keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
</style>

<div class="container-kazerun">
<ul>
<li class="dropdown-kazerun">
<input type="checkbox" />
<a href="#" data-toggle="dropdown-kazerun">لوازم التحریر</a>
<ul class="dropdown-menu-kazerun">
<li><a href="#">کتاب</a></li>
<li><a href="#">دفتر</a></li>
<li><a href="#">مداد</a></li>
<li><a href="#">پاک کن</a></li>
</ul>
</li>
<li class="dropdown-kazerun">
<input type="checkbox" />
<a href="#" data-toggle="dropdown-kazerun">تست</a>
<ul class="dropdown-menu-kazerun">
<li><a href="#">تست ۱</a></li>
<li><a href="#">تست ۲</a></li>
<li><a href="#">تست ۳</a></li>
<li><a href="#">تست ۴</a></li>
</ul>
</ul>
</div>

[m2n]

اندازه؟

[سیدرضا بازیار]

اندازه؟

کوچک باشه. دقیقا طوری که در منو جا بشه و ضایع نباشه

[m2n]

<style>
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container-kazerun {
width: 300px;
margin: 1px auto;
direction: rtl;
}
.container-kazerun > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.dropdown-kazerun {
position: relative;
}
.dropdown-kazerun a {
text-decoration: none;
}
.dropdown-kazerun [data-toggle="dropdown-kazerun"] {
display: block;
text-align: right;
color: white;
background: #C0392B;
-moz-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
-webkit-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown-kazerun [data-toggle="dropdown-kazerun"]:hover {
background: #cd3d2e;
}
.dropdown-kazerun [data-toggle="dropdown-kazerun"]:before {
position: absolute;
content: '\25BC';
font-size: 0.7em;
color: #fff;
top: 13px;
left: 10px;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown-kazerun > .dropdown-menu-kazerun {
max-height: 0;
text-align: right;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown-kazerun > .dropdown-menu-kazerun li {
padding: 0;
position: relative;
}
.dropdown-kazerun > .dropdown-menu-kazerun li i {
padding: 0;
display: inline-block;
float: right;
height: 24px;
width: 24px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
right: -5px;
text-indent: 0;
}
.dropdown-kazerun > .dropdown-menu-kazerun li a {
display: block;
color: #6f6f6f;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
text-indent: 27px;
}
.dropdown-kazerun > .dropdown-menu-kazerun li a:hover {
background: #f6f6f6;
}
.dropdown-kazerun > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.dropdown-kazerun > input[type="checkbox"]:checked ~ .dropdown-menu-kazerun {
max-height: 9999px;
display: block;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 2s ease-in-out;
-o-transition: max-height 2s ease-in-out;
-webkit-transition: max-height 2s ease-in-out;
transition: max-height 2s ease-in-out;
}
.dropdown-kazerun > input[type="checkbox"]:checked + a[data-toggle="dropdown-kazerun"]:before {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
@keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
</style>
<div class="container-kazerun">
<ul>
<li class="dropdown-kazerun">
<input type="checkbox" />
<a href="#" data-toggle="dropdown-kazerun">لوازم التحریر</a>
<ul class="dropdown-menu-kazerun">
<li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">کتاب</a></li>
<li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/star-alt-icon.png" /></i><a href="#">دفتر</a></li>
<li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">مداد</a></li>
<li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/star-alt-icon.png" /></i><a href="#">پاک کن</a></li>
</ul>
</li>
<li class="dropdown-kazerun">
<input type="checkbox" />
<a href="#" data-toggle="dropdown-kazerun">تست</a>
<ul class="dropdown-menu-kazerun">
<li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۱</a></li>
<li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۲</a></li>
<li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۳</a></li>
<li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۴</a></li>
</ul>
</ul>
</div>


اگه درست متوجه شده باشم

34154

[سیدرضا بازیار]

کاملا درسته و زیبا شده
اما دو تا مشکل هست:
۱- این روش کمی کد رو سنگین نمیکنه؟ روش جدیدتر وجود نداره؟
۲- قرار دادن دوباره لینک روی تصویر جالب نیست. دوباره کاری میشه

یه جورایی میخوام به صورت بک گراند در کنارش قرار بگیره

[m2n]

دقیق نگفتین، برای این مورد می تونید یا به تگ a خودتون کلاس تعریف کنید. اگر هم موقعیت به ترتیب تغییر نمی کنه می تونید از خاصیت child استفاده کنید.

[سیدرضا بازیار]

دقیق نگفتین، برای این مورد می تونید یا به تگ a خودتون کلاس تعریف کنید. اگر هم موقعیت به ترتیب تغییر نمی کنه می تونید از خاصیت child استفاده کنید.
تصاویر تغییر میکنه. پس بک گراند یکم دردسر داره

الان اگه بخواید یه لینک بهش بدید که تصویر هم همراه با متن لینک دار بشه چیکار میکنید؟

[m2n]

<li><a href="#"><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i>کتاب</a></li>


کافیه <i></i> بکشید داخل تگ a :)