سلام
فرض کنید 6 تا عکس رو با css و با استفاده از float:right کنار هم قرار داده ایم و در دو خط قرار گرفته اند که در هر خط 3 عکس وجود دارد.
حالا فقط با استفاده از css و رویداد hover چجوری میشه کاری کرد که وقتی ماوس روی هر عکس قرار میگیره، بزرگتر بشه ولی روی عکس های کنار و پائین خودش اثر نذاره و اونا رو جابجا نکنه. یعنی بالای بقیه قرار بگیره ؟
دوست من اشکال کار اونجایی بود که شما دیو هایی که توش لینک هاتون قرار داشتن رو تو در تو قرار دادین که نباید اینطور باشه. حالا من یه فایلی پیوست کردم که حاوی 4 تا فایل هست. که فایل اولش همون فایل خودتون هست. و سه تا فایل دیگه هم هست که من هر چی راه بلد بودم واسه این مشکل توشون پیاده کردم . شما خودت ببین با کدوم بیشتر حال می کنی
دمت گرم داداش کارت درسته دیگه حالا برای اینکه بدونم : شما از دستور های :
display:inline-block;*display:inline;*zoom:1;
استفاده کردین و به هر یک از فایل ها خاصیت FLOAT درسته ؟ این دستورات بالا چکار می کنن ؟ منظورم می دونم inline افقی می کنه اما نمی دونم چرا چند تا رو کنار هم استفاده کردین و زوم همچنین ؟
و اصولا برای افقی طراحی کردن این منو ها از چه الگویی استفاده می شه ؟
دمت گرم داداش کارت درسته دیگه حالا برای اینکه بدونم : شما از دستور های :
display:inline-block;*display:inline;*zoom:1;
استفاده کردین و به هر یک از فایل ها خاصیت FLOAT درسته ؟ این دستورات بالا چکار می کنن ؟ منظورم می دونم inline افقی می کنه اما نمی دونم چرا چند تا رو کنار هم استفاده کردین و زوم همچنین ؟
و اصولا برای افقی طراحی کردن این منو ها از چه الگویی استفاده می شه ؟
نکته اول اینکه از display و float باهم استفاده نکردم. توی یک فایل از display و دیگری از float (به اون استایل های iinline توجه کنید فقط)
حالا این display چی هست و چرا استفاده شده؟
توی html دو نوع عنصر داریم که یا block هستند و یا inline . عناصر block عناصری هستند که تمام فضای عرضی خودشون رو در بر میگیرن مثل div و p و li ... . مثلا اگر چند تا div با هم داشته باشیم خود به خود زیر هم دیگه قرار میگیرن.
عناصر inline برعکس هستند یعنی فضای اطراف رو در بر نمیگیرن . مثل span برای همین اونجا که من از span استفاده کردم توی یکی از فایل ها دیگه display یا float نذاشتم.
حالا این inline-block چیه؟ از اونجایی که اگر عنصری مثل div که به خودی خود بلاک هست رو اینلاین کنید باعث میشه که توی فایرفاکس و کروم هر مقداری برای عرض بهش بدین قبول نمیکنه . یعنی مثلا اگر یه div دارین و توش نوشتین salam و بهش width:500 بدین فایر فاکس حرف شما رو گوش نمیکنه و همون عرضی رو میذاره که کلمه salam نیاز داره (مثلا حدود 50) پس این inline-block واسه اینه که اگر میخاین از div استفاده کنید بتونید بهش خاصیت اینلاین بودن رو بدین . و قسمت بعدی *display:inline واسه اینه که اینترنت اکسپلورر مشکل فایر فاکس رو با inline نداره و از طرفی کلا دستور inline-block رو نمیشناسه . و دستور *zoom:1 هم باگ inline روی توی IE6 بر طرف میکنه
سلام دوست من
من شخصا نظری که میتونم بدم اینه که برای این کار باید از position:absolute یا relative استفاده کنید.
بعید میدونم (شاید هم اشتباه میکنم) با همون float ها بشه کاری کرد
سلام
ممنون از جوابت دوست عزیز
اینا رو قبلا تست کردم و جواب نمیده
وقتی از float استفاده میکنی، دیگه این کارا جواب نمیده و همیشه اشیاء جابجا میشن
آیا راهی به جز استفاده از float برای کنار هم قرار دادن اشیاء وجود نداره ؟ www.lta.ir رو ببینید
تو صفحه اصلی این حالت رو ایجاد کرده.
کسی میدونه چجوری اینکار رو انجام داده ؟
کاری که این سایت کرده شاید یه کم با نمونه های مشابه تفاوت داشته باشه
شما از هر چیز دیگه ای به جز absolute استفاده کنید اشیا جابه جا میشن. هر جا هم من دیدم تنها کاری که کردن absolute هست.
شما خودتون همین سایتی که دادین توی فایرباگ نگاه کردین کدش رو؟؟
پیوست کردم . ممنون
