PDA

View Full Version : سوال: یک طراحی خیلی ساده



IMANAZADI
یک شنبه 15 دی 1392, 19:05 عصر
با سلام و خسته نباشید
دوستان من یک مشکل ساده واسم پیش آمده که بدجوری اعصابمو خورد کرده
من میخوام از طریق CSS یک صفحه ساده درست کنم که شامل 5 DIV هست که id اونها به ترتیب زیر می باشد
main
header
sidebar
contain
footer

div main اصلی هست
و 4 div دیگه که شامل هدر و سایدبارمنو و محتوی و فوتر می باشد داخل تگ div main می باشد


حالا میخوام div header از بالای صفحه 0 و عرض آن از دوطرف 180 px باشه و ارتفاعش 150 px باشه
div sidebar که واسه منو هست در سمت راست زیر هدر و به عرض 180 px و ارتفاعش برابر با هر چی ارتفاع div contain باشه
div contain به ترتیب زیر هدر و از سمت راست چسبیده به div sidebar تا انتهای سمت چپ و ارتفاع حداقل 300 px بطوریکه اگر محتویات داخل زیاد شده خود بخود به سمت پایین ارتفاعش بزرگتر شود
div footer زیر div contain به عرض هدر و ارتفاع 150 px

دوستان لطفا راه درست و اصولی رو بنویسید

ضمنا عکس و CSS که خودم نوشتم رو میزارم ولی درست جواب نمیده



کد CSS



#header
{
background-color: #0033CC;
height: 120px;
position: absolute;
right: 170px;
top: 0px;
left: 170px;

}

#sidebar
{
width: 190px;
position: absolute;
top: 120px;
float: right;
background-color: #CC3300;
right: 170px;
min-height: 300px;
}

#contain
{
min-height: 300px;
position: absolute;
background-color: #00FF66;
left: 170px;
right: 360px;
top: 120px;
}

#footer
{
background-color: #333399;
left: 170px;
right: 170px;
top: 300px;
position: static;
height: 120px;
}

meysam1366
یک شنبه 15 دی 1392, 19:18 عصر
سلام دوست عزیز

شما زیادی از position استفاده کردید که اصلا نیازی نسیت

شما به راحتی میتونید قسمتهای مختلف رو به وسیله float جایگذاری کنید

position ها رو پاک کنید و از float استفاده کنید سوالی هم داشتید همینجا بپرسید تا دوستان راهنماییتون کنن

موفق باشید

meysam1366
یک شنبه 15 دی 1392, 19:25 عصر
ببینید این خوبه


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="ya mahdi" />

<title>Untitled 1</title>
<style type="text/css">
#header
{
background-color: #0033CC;
height: 120px;
right: 170px;
top: 0px;
left: 170px;
border-radius: 5px;
}

#sidebar
{
width: 190px;
top: 120px;
float: right;
background-color: #CC3300;
right: 170px;
min-height: 300px;
}

#contain
{
min-height: 300px;
background-color: #00FF66;
left: 170px;
right: 360px;
top: 120px;
}

#footer
{
background-color: #333399;
left: 170px;
right: 170px;
top: 300px;
position: static;
height: 120px;
}
</style>
</head>

<body>
<div id="main">
<div id="header">

</div>
<div id="sidebar">

</div>
<div id="contain">

</div>
<div id="footer">

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

IMANAZADI
دوشنبه 16 دی 1392, 13:26 عصر
دوست گرامی ممنون از لطفت ولی یک مشکلی هست
زمانی که چندین <p> رو دورن div contain میزارم دایو contain اسکرول میخوره و ارتفاعش زیاد میشه که این درسته ولی div sidebar سر جای خودش باقی میمونه
و موضوع بعدی div contain زیر div sidebar هست این از نظر طراحی درسته ؟؟ نمیشه کاری کرد که از لبه دایو ساید بار شروع بشه ؟
در ضمن از سمت چپ و راست هم 170 پیکسل فاصله ندارند
با کدوم خاصیت css میشه ارتفاع div sidebar رو هم اندازه div contain کرد طوری که اگه دایو محتوا ارتفاعش زیاد شد دایو سایدبار هم ارتفاعش زیاد بشه
عکس زیر گویای همه چیز هست

meysam1366
دوشنبه 16 دی 1392, 13:53 عصر
سلام مجدد

ببینید دوست عزیز شما باید ارتفاع دایو ساید بار رو بهش خاصیت auto بدید تا اتوماتیک تنظیم بشه و اگر میخواید که با بالا و پایین اومدن اسکرول ساید بار حرکت کنه باید خاصیت position:fix بدید که نمونش رو میتونید

توی گوگل پیدا کنید و ازش نمونه بگیرید

IMANAZADI
دوشنبه 16 دی 1392, 14:44 عصر
دوست عزیز auto هم کردم فایده نداشت
میشه نمونه بزارید واسم