-
November 17th, 2016, 20:15
#1
عضو انجمن
قرار دادن یک عکس در کنار یک متن (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>
-
-
November 17th, 2016 20:15
# ADS
-
November 17th, 2016, 20:18
#2
عضو انجمن
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
-
تعداد تشکر ها از m2n به دلیل پست مفید
-
November 17th, 2016, 20:20
#3
عضو انجمن
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)

نوشته اصلی توسط
m2n
اندازه؟
کوچک باشه. دقیقا طوری که در منو جا بشه و ضایع نباشه
-
-
November 17th, 2016, 20:31
#4
عضو انجمن
پاسخ : قرار دادن یک عکس در کنار یک متن (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>
اگه درست متوجه شده باشم
-
تعداد تشکر ها از m2n به دلیل پست مفید
-
November 17th, 2016, 20:39
#5
عضو انجمن
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
کاملا درسته و زیبا شده
اما دو تا مشکل هست:
۱- این روش کمی کد رو سنگین نمیکنه؟ روش جدیدتر وجود نداره؟
۲- قرار دادن دوباره لینک روی تصویر جالب نیست. دوباره کاری میشه
یه جورایی میخوام به صورت بک گراند در کنارش قرار بگیره
ویرایش توسط سیدرضا بازیار : November 17th, 2016 در ساعت 20:41
-
-
November 17th, 2016, 20:49
#6
عضو انجمن
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)
دقیق نگفتین، برای این مورد می تونید یا به تگ a خودتون کلاس تعریف کنید. اگر هم موقعیت به ترتیب تغییر نمی کنه می تونید از خاصیت child استفاده کنید.
-
تعداد تشکر ها از m2n به دلیل پست مفید
-
November 17th, 2016, 20:57
#7
عضو انجمن
پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)

نوشته اصلی توسط
m2n
دقیق نگفتین، برای این مورد می تونید یا به تگ a خودتون کلاس تعریف کنید. اگر هم موقعیت به ترتیب تغییر نمی کنه می تونید از خاصیت child استفاده کنید.
تصاویر تغییر میکنه. پس بک گراند یکم دردسر داره
الان اگه بخواید یه لینک بهش بدید که تصویر هم همراه با متن لینک دار بشه چیکار میکنید؟
-
-
November 17th, 2016, 21:00
#8
عضو انجمن
پاسخ : قرار دادن یک عکس در کنار یک متن (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
-