قرار دادن یک عکس در کنار یک متن (html - css)
من یه منو باز شوند عمودی دارم و میخوام در کنار لیست های منو عکس مربوط به اون رو بزارم
میخوام در کنار "کتاب" یه عکس کتاب قرار بدم (به طرز زیبایی قرار بگیره - ایکن نباشه! عکس باشه با فرمت png)
بهترین روش برای این کار چیه؟
کد HTML:
<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>
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
نقل قول:
نوشته اصلی توسط
m2n
اندازه؟
کوچک باشه. دقیقا طوری که در منو جا بشه و ضایع نباشه
1 فایل پیوست
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
کد PHP:
<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
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
کاملا درسته و زیبا شده
اما دو تا مشکل هست:
۱- این روش کمی کد رو سنگین نمیکنه؟ روش جدیدتر وجود نداره؟
۲- قرار دادن دوباره لینک روی تصویر جالب نیست. دوباره کاری میشه
یه جورایی میخوام به صورت بک گراند در کنارش قرار بگیره
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
دقیق نگفتین، برای این مورد می تونید یا به تگ a خودتون کلاس تعریف کنید. اگر هم موقعیت به ترتیب تغییر نمی کنه می تونید از خاصیت child استفاده کنید.
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
نقل قول:
نوشته اصلی توسط
m2n
دقیق نگفتین، برای این مورد می تونید یا به تگ a خودتون کلاس تعریف کنید. اگر هم موقعیت به ترتیب تغییر نمی کنه می تونید از خاصیت child استفاده کنید.
تصاویر تغییر میکنه. پس بک گراند یکم دردسر داره
الان اگه بخواید یه لینک بهش بدید که تصویر هم همراه با متن لینک دار بشه چیکار میکنید؟
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
کد PHP:
<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 :)
