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

14morteza14

سه شنبه 05 آذر 1392, 15:53 عصر

دوستان لطفا کمک کنید واقعا داره رو مغزم راه می ره
واسه قالب سایت که دارم با html و css طراحیش می کنم. یه header ساختم براش و زیرش یک بلوک سمت راست برای دسته بندی (با عرض 180) و سمت چپ اون یک بلوک برای مطالب سایت (عرض 766). تا اینجا مشکلی نیست اما وقتی زوم منفی به صفحه مرورگر می دم نمی دونم چرا بلوک سمت چپی می افته پایین. تمامی این بلوک ها رو با تگ div درست کردم.
113246113245

mehbod.rayaneh

سه شنبه 05 آذر 1392, 18:49 عصر

درود
فک کنم بارها گفته شده و روش قدیمی هم هست!
برای حلش 1 دیو کلی درست کنید width:..px بدید و این دیوها را داخلش قرار بدید!
موفق باشید

14morteza14

سه شنبه 05 آذر 1392, 19:58 عصر

ممنون از جوابتوت اما این کار رو قبلا کرده بودم جواب نگرفته بودم.
اما جواب درستش پیدا کردم و اینه که باید از دستور position:absolute برای بلوک سمت چپ استفاده کرد.
absolute موقعیت یک عنصر را نسبت به پنجره ی مرورگر تعیین می کند یعنی نقطه شروع عنصر از یکی از گوشه های پنجره خواهد بود.

mehbod.rayaneh

چهارشنبه 06 آذر 1392, 02:22 صبح

درود
خیر دوست من! روشتون اونقدرا هم علیه السلام نیست!!!
چون توی ریزولیشنهای مختلف ب مشکل خواهید خورد!
درستش همون پوزیشن ریلتیو و قرار دادن توی 1 دیو کلی و فلوت چپ و راست دادن ب دو ستونه!
نمونه توی وبلاگ دوستمون :
http://blog.web-site-man.ir/%DA%86%D9%8A%D8%AF%D9%85%D8%A7%D9%86-div-%D8%A8%D8%B5%D9%88%D8%B1%D8%AA-%D8%A7%D9%81%D9%82%D9%8A-%D9%88-%D8%B9%D9%85%D9%88%D8%AF%D9%8A-%D8%AF%D8%B1-%D9%83%D9%86%D8%A7%D8%B1-%D9%87%D9%85/
میتونید از ویدئوهای آموزشی سایت مکتب خونه هم استفاده کنید!
موفق باشید

14morteza14

چهارشنبه 06 آذر 1392, 11:52 صبح

درسته حق با شما بود. دستور position:absolute اونی نبود که من می خواستم. اما با دستورات شما باز نتیجه نگرفتم. فایل رو گذاشتم یه نگاهی بندازید. اگه بتونید درستش کنید واقعا استاد html و css هستید. چون یه چند روز دارم بکوب روش کار می کنم اما نتیجه نگرفتم.
کل عرض قالب 960px و بلوک راست 180px و بلوک چپ هم 770px.

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8" />
<title>
sample
</title>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="all">

<div id="menu">
</div>

<div id="right">
</div>

<div id="left">
</div>

</div>

</body>
</html>

*{
text-decoration:none;
font-family:Tahoma, Geneva, sans-serif;
margin:0;
padding:0;
}
body{
direction:rtl;
background-color:#f9f9f9;
}
#all{
width:960px;
height:auto;
margin:0 auto;
}
#menu{
width:100%;
height:90px;
background:#fff;
border:1px;
border-style:solid;
border-color:#c0bebe;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#right{
width:180px;
height:500px;
background-color:#fff;
border:1px;
border-color:#c0bebe;
border-style:solid;
border-radius:5px;
float:right;
margin-top:10px;
}
#left{
width:770px;
height:500px;
background-color:#fff;
border:1px;
border-color:#c0bebe;
border-style:solid;
border-radius:5px;
float:right;
margin-top:10px;
margin-right:10px;
}

14morteza14

چهارشنبه 06 آذر 1392, 14:43 عصر

دوستان لطفا کمک کنند ! خیلی نیاز بهش دارم :متفکر:

بهزاد علی محمدزاده

چهارشنبه 06 آذر 1392, 14:55 عصر

سلام . وقت نداشتم کدها و مشکلت و بررسی کنم باید خیلی سریع برم . اما توی این لینک (http://www.maxdesign.com.au/articles/css-layouts/) Layout هایی هستند که می تونی ازشون کمک بگیری . نتیجه رو بیا بگو شب نگاه کنم .

14morteza14

چهارشنبه 06 آذر 1392, 15:31 عصر

ممنون از جوابت
تمامی کارهایی که اون آدرس گفت رو انجام دادم ولی باز نتیجه نگرفتم !!!

Javidhb

چهارشنبه 06 آذر 1392, 16:30 عصر

شما وقتی میخاید عرض div و محاسبه کنید باید :
width + border + padding + margin رو مد نظر داشته باشید.
الان شما بخاطر عرض border هر دو دیو left و right، عرضشون بیشتر از عرض والد شده!

خط 47: (برای جبران عرض borderها اینو کم کنید)

margin-right:5px;

یا عرض div #all رو 5px افزایش بدید.

14morteza14

چهارشنبه 06 آذر 1392, 17:10 عصر

ممنون از همه دوستان. با اضافه کردن <div style="display: inline-flex;"> مشکلم حل شد !

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8" />
<title>
sample
</title>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="all">
<div id="menu"></div>
<div style="display: inline-flex;">
<div id="right"></div>
<div id="left"></div>
</div>
</div>
</body>
</html>

mehbod.rayaneh

چهارشنبه 06 آذر 1392, 17:19 عصر

درود
در اندازه ها باید width+border+margin+padding را حساب کنید!
شما اگه الان توی همین کد

#all{
width:964px;
}

باشه درست میشه!
ب همین راحتی!
موفق باشید

14morteza14

چهارشنبه 06 آذر 1392, 18:22 عصر

ممنون اما اگه همین کار رو بکنید باز نتیجه نمی گیرید. یه امتحان کنید می بینید که اولا لبه بلوک سمت چپ به لبه header نرسیده و هم این که اگه زوم منفی کنید باز بلوک چپی می افته پایین بلوک سمت راستی.

14morteza14

چهارشنبه 06 آذر 1392, 18:26 عصر

شما وقتی میخاید عرض div و محاسبه کنید باید :
width + border + padding + margin رو مد نظر داشته باشید.
الان شما بخاطر عرض border هر دو دیو left و right، عرضشون بیشتر از عرض والد شده!

خط 47: (برای جبران عرض borderها اینو کم کنید)

margin-right:5px;

یا عرض div #all رو 5px افزایش بدید.

ممنون از جوابتون. اما اگه این کاری رو که شما گفتید بکنم بلوک سمت چپ با header هم باد نمی شه و در واقع تو یه تراز قرار نمی گیره!

بهزاد علی محمدزاده

چهارشنبه 06 آذر 1392, 20:23 عصر

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

body {
direction: rtl;
background-color: #f9f9f9;
}

#all {
width: 960px;
height: auto;
margin: 0 auto;
}

#menu {
width: 100%;
height: 90px;
background: #fff;
border: 1px;
border-style: solid;
border-color: #c0bebe;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

#right {
width: 180px;
height: 500px;
background-color: #fff;
border: 1px;
border-color: #c0bebe;
border-style: solid;
border-radius: 5px;
float: right;
margin-top: 10px;
}

#left {
width: 770px;
height: 500px;
background-color: #fff;
border: 1px;
border-color: #c0bebe;
border-style: solid;
border-radius: 5px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="all">

<div id="menu">
</div>

<div id="right">
</div>

<div id="left">
</div>

</div>
</body>
</html>

سلام . این کد و تست کن . من امتحان کردم و با Zoom تغییر نکرد ...

14morteza14

چهارشنبه 06 آذر 1392, 21:58 عصر

ممنون از شما
کمک بزرگی کردید. درست شد :تشویق::تشویق::تشویق:

refugee

جمعه 08 آذر 1392, 01:35 صبح

سلام ؛

دوست من اگر شما اول طراحی یک دیو اصلی ( والد ) داشته باشید که معمولا با کلاس .container میشناسن . دیگه این اتفاق ها پیش نمیاد .

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