رفتن به مطلب

لینک شدن یک جعبه


پست های پیشنهاد شده

سلام
وقت بخیر
من یه سوال داشتم اگه جواب بدید ممنون میشم.
من توی وبسایتم یه ستون دارم که آخرین مطالبو نشون میده. هر کدوم از مطالب هم در یه جعبه شامل تصویر شاخص و عنوان مطلبه. الان روی هر کدوم (تصویر یا عنوان) که کلیک میکنم میره داخل مطلب. اما من میخوام "کل جعبه" لینک بشه به مطلبم، نه فقط عکس و عنوان.
سایر قسمتهای وبسایتم هم به این موضوع نیاز دارم که اگه در این مورد یاد بگیرم میتونم اونجاها هم به کار ببرم.
این هم کد این جعبه:

(یعنی من میخوام rsidbare-box لینک بشه اما نمیدونم زیرش باید دقیقا چه کدی بذارم؟!)

             			<div class="rsidbare-box">
                        	<div class="rimg-box">
                    <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(45,45), array ('class' => 'alignleft')); ?></a>
                            </div>
                    		<div class="text-rsidbare">
                            <a href="<?php the_permalink() ?>"><?php if (strlen($post->post_title) > 80) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 80) . '...'; } else { the_title(); } ?></a>
			            	</div>
                       	</div>

 

 

ویرایش شده توسط صدرا
لینک به ارسال

قبل باکس مورد نظر 

 <a href="<?php the_permalink() ?>">

و بعد باکس مورد نظر 

<a/>

قرار بدید و داخل هر جا این لینک قرار داره بردارید، همون بیرون میزارید کافیه.

 

لینک به ارسال
در در ۱۳۹۶/۴/۱۷ ه‍.ش. at 22:11، Mirrajabi گفته است :

قبل باکس مورد نظر 


 <a href="<?php the_permalink() ?>">

و بعد باکس مورد نظر 

<a/>

قرار بدید و داخل هر جا این لینک قرار داره بردارید، همون بیرون میزارید کافیه.

 

درود فراوان... من این کارو میکردم ولی لینکهای داخلشو حذف نمیکردم!
خیلی متشکر از راهنمایی شما. این حل شد اما حالا یه سوال دیگه وجود داره.

با این کار، قسمت html حل شد اما در قسمت css این کد یه سوال دارم.
حالا چطور باید کاری کرد که با hover شدن کل جعبه، همزمان هم عکس و هم متن داخل این جعبه، استایلشون تغییر کنه؟؟ مثلا border-radius عکس و رنگ متن همزمان تغییر کنن...

 

لینک به ارسال
در 3 ساعت قبل، صدرا گفته است :

درود فراوان... من این کارو میکردم ولی لینکهای داخلشو حذف نمیکردم!
خیلی متشکر از راهنمایی شما. این حل شد اما حالا یه سوال دیگه وجود داره.

با این کار، قسمت html حل شد اما در قسمت css این کد یه سوال دارم.
حالا چطور باید کاری کرد که با hover شدن کل جعبه، همزمان هم عکس و هم متن داخل این جعبه، استایلشون تغییر کنه؟؟ مثلا border-radius عکس و رنگ متن همزمان تغییر کنن...

 

.rsidbare-box:hover .rimg-box{
border-radius:50px!important;
}
.rsidbare-box:hover .text-rsidbare a{
color:red!important;
}

حال به جای red , 50px . رنگ و اندازه مورد نظر بگذارید.

لینک به ارسال
در 11 ساعت قبل، Mirrajabi گفته است :

.rsidbare-box:hover .rimg-box{
border-radius:50px!important;
}
.rsidbare-box:hover .text-rsidbare a{
color:red!important;
}

حال به جای red , 50px . رنگ و اندازه مورد نظر بگذارید.

مهندس کارت درسته. اینم به خوبی حل شد.

البته با کمی دقت متوجه شدم که باید آخر خط اول کد بالا یه img هم بذاریم. یعنی اینجوری:

.rsidbare-box:hover .rimg-box img{

البته در خط چهارم هم دیگه به a نیازی نیست. چون در مرحله قبل برداشتیمش.

اینا رو میگم که نفر بعدی که اینو میبینه راحت متوجه بشه.

 

ولی مهندس چون خیلی خوب پاسخ میدید یه سوال دیگه هم دارم که به همین موضوع مربوطه. اینم یاد بدید دیگه قول میدم آخرین سوالم باشه ;)

من دسته های وبسایتم رو با آموزشهای موجود به شکلی کردم که به صورت "منوی هوشمند" وقتی روی لینک عنوان دسته کلیک میکنیم و میریم به صفحۀ دسته، تا وقتی که داخل اون صفحه‌ایم، عنوان دسته، استایل متفاوت داره.

حالا میخام همین کاری که بهم یاد دادید رو برای این مِنو هم بکنم، اما لینکهاش به هم میریزه.

کدها دقیقا به این شکل هستند:

<div class="sidbare-content">
	<ul class="ul-sidebar">
		<li <?php echo $class_1 ?>><a href="http://website.com/?cat=1">دستۀ 1</a></li>
		<li <?php echo $class_2 ?>><a href="http://website.com/?cat=2">دستۀ 2</a></li>
	</ul>
</div>

کدهای مربوطه در function.php هم به این صورت هستند:

<?php
$cat = $_GET['cat'];
if ($cat == '1'){
    $class_1 = 'class="menu-on"';
}else{
    $class_1 = 'class="menu-off"';
}
if ($cat == '2'){
    $class_2 = 'class="menu-on"';
}else{
    $class_2 = 'class="menu-off"';
}
?>

کدها رو به صورت خلاصه و جمع و جور نوشتم که بررسیش راحت بشه.

به نظرم دلیل مشکل اینه که من میخوام مثل آموزش بالا که گفتید، اینجا هم li ها رو بذارم داخل تگ a و لینک داخل li ها رو حذف کنم. به این شکل:

<a href="<?php the_permalink() ?>">
	[...]
</a>
  

ولی چون آدرس لینکهای داخل li به صورت php the_permalink نیست، این مشکل پیش میاد. درسته؟

آیا راهی هست؟

پیشاپیش متشکرم...

ویرایش شده توسط صدرا
لینک به ارسال

من دقیقا متوجه نشدم می خواید چیکار کنید.

الان می خواید ul li بردارید؟  فقط تگ a باشه؟  

ویرایش شده توسط Mirrajabi
لینک به ارسال

اینم حل شد.

میخواستم به جای اینکه فقط متنِ داخلِ li لینک بشه، کل li لینک بشه: که لینکها رو از داخل هر li آوردم بیرونش و درست شد.

بعد میخواستم با hover شدن li ، استایل متن داخلش هم تغییر کنه: که متن داخل li رو گذاشتم داخل span و متناسب با این تغییرات و با استفاده از آموزش شما، استایل تعریف کردم و درست شد.

کد بالا نهایتا اینجوری شد:

<div class="sidbare-content">
	<ul class="ul-sidebar">
		<a href="http://website.com/?cat=1"><li <?php echo $class_1 ?>><span>دستۀ 1</span></li></a>
		<a href="http://website.com/?cat=2"><li <?php echo $class_2 ?>><span>دستۀ 2</span></li></a>
	</ul>
</div>

تشکر از شما.

ویرایش شده توسط صدرا
لینک به ارسال

کدتون اشتباهه،  هیچ وقت نباید از li چیزی بیرون بیاد،  همون کد قبلی درسته ، فقط تک  a,  display :block کنید تا به جای a, کل li لینک بشه.

لینک به ارسال
در 53 دقیقه قبل، Mirrajabi گفته است :

کدتون اشتباهه،  هیچ وقت نباید از li چیزی بیرون بیاد،  همون کد قبلی درسته ، فقط تک  a,  display :block کنید تا به جای a, کل li لینک بشه.

درود بر شما... تگ a رو بردم سر جاش و استایلی که گفتید هم انجام دادم درست شد! بسیار ممنون.

1- ولی چرا هیچ وقت نباید از li چیزی بیرون بیاد؟ در صورتی که اونجوری هم کار میکنه.

2- ضمنا این مِنو یه list-style هم داره که عکسه. با این روشی که گفتید، این لیست استایل، لینک نمیشه. راهی داره که اینم لینک بشه؟

3- تغییری که داخل li دادم و متن رو گذاشتم داخل span اشکال نداره؟

4- مگه این استایلِ display:block کارش چیه؟ اینجا دقیقا چیکار کرد؟

ویرایش شده توسط صدرا
لینک به ارسال

1، چون ی سری چیزا استاندارد،  مثل li در ul و یا اینکه div تو span نباید قرار بگیره و.... همه این چیزا یک استاندارد و باید رعایت بشه.

2، خیر،  مگر اینکه آون عکس به after تگ a بدید.

3،خیر، مشکلی نیست. 

4،در حالت کلی display تگ a,  inline,  و به اندازه  متنی که هست لینک می خوره ، ولی وقتی Block. می کنید یعنی میگید، تگ a کل یک سطر بگیره. 

لینک به ارسال
در ۱ ساعت قبل، Mirrajabi گفته است :

1، چون ی سری چیزا استاندارد،  مثل li در ul و یا اینکه div تو span نباید قرار بگیره و.... همه این چیزا یک استاندارد و باید رعایت بشه.

2، خیر،  مگر اینکه آون عکس به after تگ a بدید.

3،خیر، مشکلی نیست. 

4،در حالت کلی display تگ a,  inline,  و به اندازه  متنی که هست لینک می خوره ، ولی وقتی Block. می کنید یعنی میگید، تگ a کل یک سطر بگیره. 

درود بر شما

با after , before آشنایی نداشتم. یه جستجویی کردم. چیز جالبی بود.

بعد انجامش دادم اما میخواستم لینک بشه که نشد. اولا چون به تگ a استایل display:block دادیم، توی یه خط قرار نمیگیرن، مقدار before هم لینک نمیشه. خواستم گولش بزنم با جابجا کردنش ببرمش توی یه خط ولی باز لینک نشد. ثانیا بدون این استایل (که توی یه خط قرار میگیرن) هم لینک نمیشه. چندان هم مهم نیست.

از راهنمایی شما بسیار ممنونم. خیلی وقته میخواستم تنهایی این چیزا رو یاد بگیرم اما نمیتونستم. ولی از شما یاد گرفتم. متشکر.

-------------------

ضمنا الان که میخواستم درباره after جستجو کنم یه سایت جالب دیدم که میفرستم شما و دوستان هم اگه ندیدید ببنید. جالبه. شکلهایی که فقط با "یک عنصر" درست شدن رو نشون میده:  one-div.com

اینو هم از سایت css-tricks.ir دیدم. این سایت هم در مورد css عالیه. چند روزه باهاش آشنا شدم و برای حل مشکلات css اول میرم اینجا. مثل بعضی سایتهای دیگه "رفع تکلیفی" مطلب نمیزنه!

ویرایش شده توسط صدرا
لینک به ارسال
در 21 دقیقه قبل، صدرا گفته است :

بعد انجامش دادم اما میخواستم لینک بشه که نشد. اولا چون به تگ a استایل display:block دادیم، توی یه خط قرار نمیگیرن، مقدار before هم لینک نمیشه.

آقا اشتباه از من بود. یکم عجله کردم. باید برای خودِ تگِ a استایل before رو اجرا میکردم که اشتباها برای li این کارو کردم. در توضیحات جناب میر رجبی هم بود ولی من دقت نکردم.

یعنی باید اینجوری باشه:

.ul-sidebar li a::before {
	content: url(image.png);
}

اینم حل شد. درود فراوان...

موفق باشید

ویرایش شده توسط صدرا
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...