سوال: تغییر مکان دایوها با تغییر اندازه صفحه [بایگانی]

mmojbo

چهارشنبه 20 اردیبهشت 1391, 23:22 عصر

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

body
{
min-width:800px;
min-height:500px;
}
.redius
{
-moz-border-radius: 10px;
border-radius: 10px;
}
.status_bar_link{ color : White; text-decoration:none; }
.status_bar
{
position:fixed;
direction:rtl;
background:rgba(0, 0, 0, 0.6);
width:100%;
height:5%;
top:0px;
left:0px;
-moz-box-shadow: 1px 1px 2px 1px #000;
box-shadow: 1px 1px 2px 1px #000;
font-family: BKoodakBold, Arial, Helvetica, sans-serif;
z-index:999;
}
#div_header
{
position:relative;
margin-top:4%;
left:10%;
width:80%;
min-width:800px;
height:15%;
min-height:150px;
border:solid 2px black;
background:#000 url(images/check.jpg) repeat top left;
-moz-box-shadow: 1px 1px 2px 1px #000;
box-shadow: 1px 1px 2px 1px #000;
font-family: BKoodakBold, Arial, Helvetica, sans-serif;
}
#header_logo
{
position:absolute;
top:25px;
left:100px;
}
#div_position
{
position:absolute;
direction:rtl;
background:rgba(0, 0, 0, 0.4);
width:70%;
height:5%;
top:35%;
left:15%;
font-family: BKoodakBold, Arial, Helvetica, sans-serif;
}
#div_main
{
position:absolute;
direction:rtl;
top:42%;
left:10%;
width:80%;
min-width:800px;
height:auto;
border:solid 2px black;
padding:3px 5px 5px 3px;
font-family: BKoodakBold, Arial, Helvetica, sans-serif;
background:rgba(220, 135, 150, 0.4);
}
</style>

قبل تغییر:
86869

بعد تغییر:
86870

اما زمانی که مرورگر تغییر اندازه میده و کوچیک میشه، همه قاطی می شن
ممنون میشم کمکم کنید.

Saber Mogaddas

پنج شنبه 21 اردیبهشت 1391, 12:34 عصر

سلام
کد های html تون رو بدید تا بررسی کنم..شما از تگ position به درستی استفاده نکردید..از float هم استفاده نکردید..که اینا باید بررسی شه..

khanlo.javid

پنج شنبه 21 اردیبهشت 1391, 17:16 عصر

من یه همچین مشکلی داشتم که با clear:both حل شد شما هم تست کنید شاید جواب بگیرید.

mmojbo

پنج شنبه 21 اردیبهشت 1391, 19:23 عصر

ممنونم دوستان
من دارم با asp.net 2008 می نویسم

اینم کد HTML :

<body>
<form id="form1" runat="server">
<div class="status_bar">
                       
<asp:LoginStatus ID="LoginStatus1" runat="server" Font-Size="Large"
LoginText="ورود به سیستم" LogoutText="خروج از سیستم"
CssClass="status_bar_link" />
<asp:LoginName ID="LoginName1" runat="server" CssClass="status_bar_link"
/>
</div>
<div class="redius" id="div_header">
<div id="header_logo">
<img src="images/dec_header.png" />
</div>
</div>
<div class="redius" id="div_position">
<a href="Default.aspx"> صفحه اصلی</a>
</div>
<div class="redius" id="div_main">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>

من یه همچین مشکلی داشتم که با clear:both حل شد

ممنونم از راهنمایی تون
میشه راجع به این کد توضیح بدین؟

بازم از دوستان ممنونم

khanlo.javid

جمعه 22 اردیبهشت 1391, 08:43 صبح

اگه اشتباه نکنم این یه جورایی برای خنثی سازی تگ های دیو به کار میره مثلا وقتی شما توی 2 تگ دیو از float استفاده کنید باید از این دستور توی یه تگ دیو جدا زیر این دو تگ استفاده کنی حالا من هم تازه با این دستور آشنا شدم آقای صابر مقدس بیشتر میتونه توضیح بده میتونی بهش پ خ بدی.

موفق باشی.

mmojbo

جمعه 22 اردیبهشت 1391, 12:35 عصر

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

body
{
min-width:800px;
min-height:500px;
}
.redius
{
-moz-border-radius: 10px;
border-radius: 10px;
}
.status_bar_link{ color : White; text-decoration:none; }
.status_bar
{
position:fixed;
direction:rtl;
background:rgba(0, 0, 0, 0.6);
width:100%;
height:30px;
top:0px;
left:0px;
-moz-box-shadow: 1px 1px 2px 1px #000;
box-shadow: 1px 1px 2px 1px #000;
font-family: BKoodakBold, Arial, Helvetica, sans-serif;
z-index:999;
}
#div_header
{
margin:4% 10% 0px 10%;
width:80%;
min-width:800px;
height:50px;
min-height:150px;
float:inherit;
border:solid 2px black;
background:#000 url(images/check.jpg) repeat top left;
-moz-box-shadow: 1px 1px 2px 1px #000;
box-shadow: 1px 1px 2px 1px #000;
font-family: BKoodakBold, Arial, Helvetica, sans-serif;
}
#div_header h1
{
text-align:center;
color: #777;
text-shadow: 0 0px 0 #777, 0 -1px 0 #000;
}
#header_logo
{
margin-top:-70px;
margin-left:20px;
}
#div_position
{
direction:rtl;
background:rgba(0, 0, 0, 0.4);
min-width:800px;
margin:1% 10% 0px 10%;
width:80%;
height:5%;
float:inherit;
font-family: BKoodakBold, Arial, Helvetica, sans-serif;
}
#div_main
{
float:inherit;
margin:1% 10% 0px 10%;
direction:rtl;
width:80%;
min-width:800px;
height:auto;
border:solid 2px black;
padding:3px 5px 5px 3px;
font-family: BKoodakBold, Arial, Helvetica, sans-serif;
background:rgba(220, 135, 150, 0.4);
}

Saber Mogaddas

شنبه 23 اردیبهشت 1391, 15:54 عصر

سلام
شما کدهای css رو به این صورت تنظیم کنید :

body
{
min-width:800px;
min-height:500px;
}
.redius
{
-moz-border-radius: 10px;
border-radius: 10px;
}
.status_bar_link{ color : White; text-decoration:none; }
.status_bar
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
box-shadow: 1px 1px 2px 1px #000000;
direction: rtl;
float: right;
height: 30px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
#div_header
{
background: url("images/check.jpg") repeat scroll left top #000000;
border: 2px solid black;
box-shadow: 1px 1px 2px 1px #000000;
font-family: BKoodakBold,Arial,Helvetica,sans-serif;
height: 50px;
margin: 40px auto auto;
min-height: 150px;
min-width: 800px;
width: 80%; }
#div_header h1
{
text-align:center;
color: #777;
text-shadow: 0 0px 0 #777, 0 -1px 0 #000;
}
#header_logo
{
margin-top:-70px;
margin-left:20px;
}
#div_position
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
direction: rtl;
font-family: BKoodakBold,Arial,Helvetica,sans-serif;
height: 5%;
margin: 10px auto auto;
min-width: 800px;
width: 80%; }
#div_main
{
background: none repeat scroll 0 0 rgba(220, 135, 150, 0.4);
border: 2px solid black;
direction: rtl;
font-family: BKoodakBold,Arial,Helvetica,sans-serif;
height: auto;
margin: 8px auto auto;
min-width: 800px;
padding: 3px 5px 5px 3px;
width: 80%; }

کار تگ clear خنثی کردن دستور float هست..
برای اینکه کامل متوجه این دستور بشید..
داخ یه دیو 100px دو تا دیو 50px دروست کنید و به هر دوی این دیو ها float right بدید حال نتیجه رو نگاه کنید حال ما نیاز داریم که این دو به هم نچسبه به صورت افقی ..ما می خوایم تگ دومی در پایین دیو اولی قرار بگیره کافی هست که clear دیو سمت چپ رو right تنظیم کنیم..

آموزش CSS - تفاوت ویژگی Float و Clear در CSS
آموزش CSS - تفاوت ویژگی Float و Clear در CSS

برای ایجاد سایت های چند ستونه توسط CSS یکی از بهترین خاصیت هایی که میتوانید به تگ ها بدهید ، خاصیت Float است.

http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/06/float-css.jpg

وقتی به یک المان در کد خود float به سمت چپ یا راست میدهید ، المان مورد نظر به آن سمت خاص میرود و بقیه المان هایی که بعد از تگ مذکور آمده اند و float ندارند به سمت مخالف رانده میشوند و اطراف المان مورد نظر را فرا می گیرند.

در استفاده از خاصیت float و clear در تگ های html چند نکته است که باید مدنظر داشته باشید :

اگر میخواهید المان های دیگر اطراف المان float شده را بگیرند باید بصورت inline باشند یا اگر float دارند باید جهت float آنها با جهت float المان اولیه یکی باشد.

المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، المان مورد نظر کوچک میشه . برای رفع این مشکل باید width رو به المانی که float دارد بدهید.

اگر در یک المان block چند تا المان float داشته باشید ، المان بلاک جمع میشه و گاهی المان های float از پایین ، از المان parent خود بیرون می زنند. برای رفع این مشکل را بخوانید .
اگر المانی که بعد ازالمان float شده میاد، خاصیت clear داشته باشد، دیگه اطراف المان فلوت شده را فرا نمی گیرد.
المانی که خاصیت clear=both دارد و float نیز شده است، فقط المان هایی را که قبل از خودش آمده است، clear میکند . نه المان های بعدی را . ( )

موفق باشی..

mmojbo

یک شنبه 24 اردیبهشت 1391, 10:46 صبح

ممنونم از اینکه وقت گذاشتین برای من saber mogaddas
موفق باشین