Printable View
دوستان لطفا کمک کنید واقعا داره رو مغزم راه می ره
واسه قالب سایت که دارم با html و css طراحیش می کنم. یه header ساختم براش و زیرش یک بلوک سمت راست برای دسته بندی (با عرض 180) و سمت چپ اون یک بلوک برای مطالب سایت (عرض 766). تا اینجا مشکلی نیست اما وقتی زوم منفی به صفحه مرورگر می دم نمی دونم چرا بلوک سمت چپی می افته پایین. تمامی این بلوک ها رو با تگ div درست کردم.
ضمیمه 113246ضمیمه 113245
درود
فک کنم بارها گفته شده و روش قدیمی هم هست!
برای حلش 1 دیو کلی درست کنید width:..px بدید و این دیوها را داخلش قرار بدید!
موفق باشید
ممنون از جوابتوت اما این کار رو قبلا کرده بودم جواب نگرفته بودم.
اما جواب درستش پیدا کردم و اینه که باید از دستور position:absolute برای بلوک سمت چپ استفاده کرد.
absolute موقعیت یک عنصر را نسبت به پنجره ی مرورگر تعیین می کند یعنی نقطه شروع عنصر از یکی از گوشه های پنجره خواهد بود.
درود
خیر دوست من! روشتون اونقدرا هم علیه السلام نیست!!!
چون توی ریزولیشنهای مختلف ب مشکل خواهید خورد!
درستش همون پوزیشن ریلتیو و قرار دادن توی 1 دیو کلی و فلوت چپ و راست دادن ب دو ستونه!
نمونه توی وبلاگ دوستمون :
http://blog.web-site-man.ir/%DA%86%D...-%D9%87%D9%85/
میتونید از ویدئوهای آموزشی سایت مکتب خونه هم استفاده کنید!
موفق باشید
درسته حق با شما بود. دستور position:absolute اونی نبود که من می خواستم. اما با دستورات شما باز نتیجه نگرفتم. فایل رو گذاشتم یه نگاهی بندازید. اگه بتونید درستش کنید واقعا استاد html و css هستید. چون یه چند روز دارم بکوب روش کار می کنم اما نتیجه نگرفتم.
کل عرض قالب 960px و بلوک راست 180px و بلوک چپ هم 770px.
کد HTML:<!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;
}
دوستان لطفا کمک کنند ! خیلی نیاز بهش دارم :متفکر:
سلام . وقت نداشتم کدها و مشکلت و بررسی کنم باید خیلی سریع برم . اما توی این لینک Layout هایی هستند که می تونی ازشون کمک بگیری . نتیجه رو بیا بگو شب نگاه کنم .
ممنون از جوابت
تمامی کارهایی که اون آدرس گفت رو انجام دادم ولی باز نتیجه نگرفتم !!!
شما وقتی میخاید عرض div و محاسبه کنید باید :
width + border + padding + margin رو مد نظر داشته باشید.
الان شما بخاطر عرض border هر دو دیو left و right، عرضشون بیشتر از عرض والد شده!
خط 47: (برای جبران عرض borderها اینو کم کنید)
margin-right:5px;
یا عرض div #all رو 5px افزایش بدید.
ممنون از همه دوستان. با اضافه کردن <div style="display: inline-flex;"> مشکلم حل شد !
کد HTML:<!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>
درود
در اندازه ها باید width+border+margin+padding را حساب کنید!
شما اگه الان توی همین کد
#all{
width:964px;
}
باشه درست میشه!
ب همین راحتی!
موفق باشید
ممنون اما اگه همین کار رو بکنید باز نتیجه نمی گیرید. یه امتحان کنید می بینید که اولا لبه بلوک سمت چپ به لبه header نرسیده و هم این که اگه زوم منفی کنید باز بلوک چپی می افته پایین بلوک سمت راستی.
ممنون از جوابتون. اما اگه این کاری رو که شما گفتید بکنم بلوک سمت چپ با header هم باد نمی شه و در واقع تو یه تراز قرار نمی گیره!نقل قول:
نوشته شده توسط Javidhb
<!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 تغییر نکرد ...
ممنون از شما
کمک بزرگی کردید. درست شد :تشویق::تشویق::تشویق:
سلام ؛
دوست من اگر شما اول طراحی یک دیو اصلی ( والد ) داشته باشید که معمولا با کلاس .container میشناسن . دیگه این اتفاق ها پیش نمیاد .
* توجه کنید که همیشه بعد از هر چند خط نوشتن کد قالب را با چند مرورگر معروف تست کنید . تا به مشکلی بر نخورده باشید در صورت نیاز مشکل را برطرف و یا به عقب بازگردید .