قرار گرفتن دو div در داخل یک div

من میخوام که 2 تا div را در داخل یک div قرار بدم به این شکل که هر کدام از این 2 تا در گوشه پایین DIV اصلی قرار بگیره. اما هر چی سعی کردم یکی از این دو تا در بالا قرار میگرفت.
ممنون میشم راهنمایی کنید.
 

echessdesign

مدیر انجمن طراحی وب
درود بر شما
اگر درست متوجه منظور شما شده باشم، راه حل این است که: به div مادر ، Padding-top دهید...
 
div.gif
 
آخرین ویرایش:

marSoul

Member
از این کد استفاده کنید :

کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Document</title>
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
#div1 {
    border:1px solid #FF0000;
    width:800px;
    height:600px;
}
#div2 {
    border:1px solid #0000FF;
    width:300px;
    height:200px;
    position:absolute;
    margin:390px 0 0 0;
    left: 0px;
    top: 0px;
}
#div3 {
    border:1px solid #66FF00;
    width:200px;
    height:200px;
    float:right;
    margin:370px 0 0 0;
}
-->
</style>
</head>
<body>
<div id="div1">DIV 1
  <div id="div2">DIV 2</div>
  <div id="div3">DIV 3</div>
</div>
</body>
</html>
 
میبخشید که یک سوال دیگه میپرسم
برای اجرای طرح زیر باید چکار کنم ( با توجه به اینکه میخوام DIV 2 و DIV 3 دارای پس زمینه باشند و تا لبه های پنجره مرورگر ادامه داشته باشند. )

div.gif
 

marSoul

Member
کد :

کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
#div1 {
    width:20%;
    float:left;
    background:#999999;
    text-align:center;
    height:600px;
}
#div2 {
    width:60%;
    float:left;
    background: #CCFF00;
    text-align:center;
    height:600px;
}
#div3 {
    width:20%;
    float:left;
    background:#999999;
    text-align:center;
    height:600px;
}
-->
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
 
از این کد استفاده کنید :

کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Document</title>
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
#div1 {
    border:1px solid #FF0000;
    width:800px;
    height:600px;
}
#div2 {
    border:1px solid #0000FF;
    width:300px;
    height:200px;
    position:absolute;
    margin:390px 0 0 0;
    left: 0px;
    top: 0px;
}
#div3 {
    border:1px solid #66FF00;
    width:200px;
    height:200px;
    float:right;
   [COLOR="Red"] margin:370px 0 0 0;[/COLOR]
}
-->
</style>
</head>
<body>
<div id="div1">DIV 1
  <div id="div2">DIV 2</div>
  <div id="div3">DIV 3</div>
</div>
</body>
</html>

تنها راه برای اینکه div سمت راست (div 3) را در گوشه پایین div 1 قرار دهیم، استفاده از margin میباشد یا اینکه راه دیگری هم وجود دارد؟
 

echessdesign

مدیر انجمن طراحی وب
ارادتمندم هلن جان
کافیه که شما اطراف div3 رو خالی کنید:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
#div1, #div2, #div3 {
    width:20%;
    float:left;
    background:#999;
    text-align:center;
    height:600px;
}
#div2 {
    width:60%;
    background: #CCFF00;
}
#div3 {
    background:red;
    clear:both;
}
-->
</style>
</head>
<body>
<div id="div1">111</div>
<div id="div2">222</div>
<div id="div3">333</div>
</body>
</html>
 
آخرین ویرایش:
فکر میکنم که منظورم را بد بیان کردم. چون خروجی این چیزی که شما فرمودید مد نظر من نیست. چیزی که میخوام دقیقا مانند تصویر زیر است.

div.gif


اما با این تفاوت که از margin برای فاصله div 3 از بالای div 1 استفاده نکنیم. یک چیزی شبیه valign و bottom
 
خیر.
در مثال قبل برای اینکه div 3 در پایین و در گوشه راست صفحه قرار بگیره ما از margin-top استفاده کردیم. اما اگر ارتفاع div 1 بخاطر محتوای زیاد تغییر کرد، div 3 در گوشه پایین قرار نمیگیره و در وسطهای صفحه قرار میگیرد.
 
من میخواهم div 2 که مقدار پهنای آن 800 پیکسل است در وسط صفحه قرار بگیرد و div 2 , 3 هر کدام در راست و چپ قرار بگیرند. و در سایزهای مختلف پنجره مرورگر تغییر سایز داشته باشند ( به سمت راست و چپ پنجره مرورگر بچسبند ) .
در کلیه tatorial هایی که در net پیدا کردم عکس این عمل اتفاق افتاده بود که نمی توانستند نیاز من را برآورده کنند (پهنای ستون وسط تغییر میکند و پهنای دو ستون کناری ثابت میماند).

کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
#div1 {
[COLOR="Red"]    width:50%;[/COLOR]
    float:left;
    background:#999999;
    text-align:center;
    height:600px;
}
#div2 {
[COLOR="Red"]    width:800px;[/COLOR]
    float:left;
    background: #CCFF00;
    text-align:center;
    height:600px;
}
#div3 {
[COLOR="Red"]    width:50%;[/COLOR]
    float:left;
    background:#999999;
    text-align:center;
    height:600px;
}
-->
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>

آرایش مورد نظر من:
div.gif
 
آخرین ویرایش:
اون مشکل 3 تا div که می خواستید دو تاش در گوشه های پایین div اصلی قرار بگیره با این کد به راحتی قابل درست کردنه

کد:
#div1 {
    border:1px solid #FF0000;
    width:800px;
    height:600px;
    position: relative
}
#div2 {
    border:1px solid #0000FF;
    width:300px;
    height:200px;
    position:absolute;
    left: 0px;
    bottom: 0px;
}
#div3 {
    border:1px solid #66FF00;
    width:200px;
    height:200px;
    position: absolute;
    bottom: 0;
    right: 0;
}

مشکل دوم رو دارم فکر میکنم
فکر نکنم به این راحتی ها بشه اون طرح رو به اون شکلی که شما می خوای پیاده کرد
 
راستش میدونید چرا درگیر این موضوع شدم؟! در template که طراحی کردم در سمت راست و سمت چپ ستون اصلی دو ستون با پهنای 30 پیکسل دارم که یک سایه ایجاد میکند و از آنجا که مجبور شدم بجای استفاده از فرمت GIF از فرمت PNG استفاده کنم و با توجه به اینکه فرمت فوق در نسخه هایی از IE به درستی نمایش داده نمیشود مجبور شدم که 2 تصویر با فرمت JPG و با عرض زیاد (500 پیسکل) برای هر دو طرف ستون اصلی ( ستونی که در وسط پنجره مرورگر قرار دارد) تهیه کنم و در دو ستونی کناری پنجره مرورگر بصورت background نمایش بدهم. به همین دلیل دو ستون کناری باید تا کناره پنجره مرورگر امتداد داشته باشد تا علاوه بر نمایش سایه ها بتوانم background اصلی صفحه را هم نمایش بدهم.

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



من برای bavkgroaund صفحه (ستون سمت راست و سمت چپ) دو فایل تهیه کردم ( فایلها به این پست attach شده اند)
عرض این دو فایل زیاد هست ( حدود 1000 پیکس برای هر کدام از این فایلها ). وقتی این template را با table پیاده سازی کرده بودم یک جدول با 3 ستون داشتم که ستون وسطی محتوای اصلی سایت در آن قرار میگرفت و پهنای ثابتی داشت و هرکدام از تصاویر پس زمینه در دو ستون کناری قرار داشتند که در resoletion های مختلف تغییر سایز پیدا میکردند و پس زمینه به درستی نمایش داده میشد. متاسفانه این template را نمیتونم با div اجرا کنم.
 

پیوست ها

  • bg_left.gif
    bg_left.gif
    19.5 کیلوبایت · بازدیدها: 1
  • bg_right.gif
    bg_right.gif
    19.4 کیلوبایت · بازدیدها: 2
خوب این مثل آب خوردنه
شما باید دو تا div تو هم داشته باشید.
div داخلی در اصل همون div هست که پس زمینه سفید رو داره.
اون div والد باید یه تصویر تو پس زمینش باشه
من فایل رو درست کردم و پیوست کردم. باز کنید و فایل رو ببینید. فکر نم کاملا واضح باشه. اگر سوالی بود بپرسید
 

پیوست ها

  • farhani.zip
    883 بایت · بازدیدها: 5
یک مشکل کوچولو وجود داره.
پس زمینه ای که در template من هست یک تصویر است که به شکل pattern هست و اون تصویر در پس زمینه تکرار میشه ( کنار هم چیده میشه).
برای اون راه حلی دارید؟
چیزی که به ذهن من رسید همون تکنیک دست و پا شکسته قبلی بود که شما اونو بهینه کردین.
 
خوب یه خورده کار سخت میشه
اگر بخواید از pattern استفاده کنید با این pattern رو در پس زمینه body قرار بدید
و برای اون سایه های دو سمت ستون کناری هم باید سایه مثلا 15 پیکسلی رو در زمینه شفاف ایجاد کنید و با فرمت png ذخیره کنید.
دقیقا همون تصویری که من برای پس زمینه ساختم رو باید بسازید ولی اون دو سایه چپ و راست باید transparency داشته باشن
متاسفانه IE از شفافیت فایل های png ساپورت نمی کنه و مجبورید از جاوا اسکریپت هم برای حل مشکل استفاده کنید
 

جدیدترین ارسال ها

بالا