ورود

View Full Version : جابه جاشدن div ها بهنگام بزرگنمایی صفحه


نیلوفر66
شنبه 26 بهمن 1392, 22:06 عصر
سلام
کد زیر رو برای ساخت یک منو نوشتم که داخلش چندتا عکس هست.با بزرگنمایی صفحه عکس ها جابه جا میشن!!!!




<div style="margin:0 auto; height:70px;width:70%;margin-top:25px;">
<div style=" float:right;position:relative; width:80px;">
<a href="?page=news" class="imPop" ><img id="myPicture1" src="img/sound-icon.png" width="45" height="53" class="border" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(45,53,this)">
<span style="font-style:italic;">اطلاعیه ها</span></a>
</div>
</div>
e_a_23
شنبه 26 بهمن 1392, 22:52 عصر
من فکر می کنم مشکل از position:relative هست.
e_a_23
یک شنبه 27 بهمن 1392, 10:54 صبح
این روش رو امتحان کنید : به دایو والدتون که احتمالا منو هست position:relative بدید و بعد به عکس ها position:absolute بدید و با top , right یا left ,.. تنظیم کنید مکانش رو. در ضمن کد css هم بذارید تا ببینیم تو کلاس هاتون چی نوشتید.
نیلوفر66
یک شنبه 27 بهمن 1392, 20:37 عصر
این کار رو انجام دادم ولی جواب نگرفتم!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
کدهای css همه absolute هست.دایو اول دایو والد هست.


<div style="margin:0 auto; height:70px;width:70%;margin-top:25px;position:relative;">
<div style="float:right;position:absolute;width:112px;right:35 %;">
<a href="?page=pweekly" class="imPop" ><img id="myPicture3" src="img/file-manager-icon.png" width="45" height="53" class="border" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(45,53,this)">
<span style="font-style:italic;">برنامه هفتگی</span></a>
</div>
<div style="float:right;position:absolute;width:112px;right:40 %">
<a href="?page=book" class="imPop" ><img id="myPicture4" src="img/8.png" width="45" height="53" class="border" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(45,53,this)">
<span style="font-style:italic;">معرفی کتاب ها</span></a>
</div>
</div>
mehbod.rayaneh
یک شنبه 27 بهمن 1392, 22:24 عصر
درود
دلتون بسوزه ما 1 منو ساختیم عکساش جابجا نمیشن! :لبخند:
من متوجه نشدم ک میخواید چیکار کنید! بیشتر توضیحی میدید؟ ینی چی عکسها جابجا میشن؟ اگه عکس هم بذارید ک چ بهتر!
نیلوفر66
دوشنبه 28 بهمن 1392, 21:49 عصر
با بزگنمایی عکس ها بهم نزدیک میشن !و مکانشون عوض میشه،هرکدوم از عکیها داخل یک دایو جداگانست.
بهزاد علی محمدزاده
دوشنبه 28 بهمن 1392, 22:19 عصر
سلام . به نظرت الان ما عکس و از کجا بیاریم ؟ گاهی برای سوالمون حاضر نمیشیم وقت بذاریم ولی می خوایم بقیه برای جوابش وقت بذارن !

این کد و به ابتدای صفحه اضافه کنید ببینید مشکل حل میشه یا نه . چون کد بد نوشته شده خوندنش سخته . 125.5px این چطور سایز دهی هست ؟


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

یکی از دلایل به هم ریختگی رعایت نکردن css box model برای سایز دهی ها هست . یعنی اگر به یه box می خواید 40px بدین . ولی یه border با اندازه 1px داری . باید این رو محاسبه کنی . یعنی از چپ 1px اضافه میشه . از راست هم 1px اضافه میشه . پس ساز box شما میشه 38px .

اون کد این قانون و حذف می کنه .
refugee
سه شنبه 29 بهمن 1392, 00:11 صبح
من فکر کنم مشکل شما استفاده از position: obsulot; است . باعث شده ثابت بمونه . اما رو هوا که نمیشه حرف زد لطفا یا کد های دقیق تری بذارید یا یه دمو یا عکسی بذارید بفهمیم چیکار کردی .
qartalonline
سه شنبه 29 بهمن 1392, 01:11 صبح
برای ایجاد هر منویی بهتره از تگ ul یا ol استفاده کنید و با استفاده از css استایل مورد نظرتون رو اعمال کنید.

من کدتون رو بصورت زیر اصلاح کردم سایر موارد میتونید بهش اضافه کنید:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>menu ex</title>
<style type="text/css">
ul{
display: block;
list-style: none;
clear: both;
}
ul li{
display: block;
float: right;
}
ul li a{
background-color: #000;
display: block;
height: 70px;
line-height: 70px;
padding-right: 54px;
}
ul li.imPop a{
background: url(img/file-manager-icon.png) no-repeat center right;
}
</style>
</head>
<body>

<ul>
<li class="imPop"><a href="?page=news">اطلاعیه ها</a></li>
</ul>

</body>
</html>
نیلوفر66
سه شنبه 29 بهمن 1392, 13:21 عصر
مشکل از position:absolute بود ولی قبلا از این استفاده کردم و چنین مشکلی نداشت. position:relative گذاشتم درست شد.
از کد qartalonline (http://barnamenevis.org/member.php?249869-qartalonline) ممنون که با حوصله پاسخ دادید.
دیدم اساتید اینجا زیاد هستن و سریع جواب سوالات رو بدون حتی دیدن کد کامل پاسخ میدن !!!و نیمی از کد رو گذاشتم...