سوال: مشکل در کار با div [بایگانی]

ahmad_lovely

پنج شنبه 06 مرداد 1390, 18:19 عصر

با سلام
من یه div دارم که دو تا فرزند div داره، که می خوام یکی از فرزندا که اندازش witdth=200px هستش بره سمت راست، این کار رو با float انجام میدم، ولی وقتی که اندازه ی فرزندی که سمت راسته رو بزرگ می کنم، از اندازه ی والد بزرگتر میشه ولی اندازه ی والد تغییری نمی کنه! در حالی که فرزندی که سمت چپه رو بزرگ می کنم اندازه ی والد هم تغییر میکنه،
می خواستم بدونم چطوری می تونم کاری کنم که فرزند سمت راست هم وقتی اندازش بزرگتر از والد شد، اندازه ی والد هم تغییر کنه
با تشکر

ghasemweb

پنج شنبه 06 مرداد 1390, 21:41 عصر

سورستو بذار ببینیم موضوع از چه قراره

ahmad_lovely

پنج شنبه 06 مرداد 1390, 23:36 عصر

نمیدونم چرا ضمیمه نشد !
این کدشه !

Css :

#AllPage
{
margin: 25px 25px 25px 25px;
background-color:Black;
}
#Header
{
height: 151px;
padding: 0 10px 0 10px;
background-color:Fuchsia;
}

#Tab
{
float:right;
background-color:Green;
width:192px;
height:68px;
}
#Search
{
background-color:Navy;
width:150px;
height:102px;
}

ASP :

<div id="AllPage">

<div >

<div id="Header">
</div>

<div id="Tab">
</div>

<div id="Search">
</div>
</div>
</div>

ghasemweb

جمعه 07 مرداد 1390, 10:42 صبح

استایل رو به این صورت تغییر بده دوست عزیز.

<style type="text/css">
#AllPage
{
margin: 25px 25px 25px 25px;
background-color:Black;
height:auto;
overflow:auto
}
#Header
{
height: 151px;
padding: 0 10px 0 10px;
background-color:Fuchsia;
}

#Tab
{
float:right;
background-color:Green;
width:192px;
height:298px;
}
#Search
{
float:left;
background-color:Navy;
width:150px;
height:122px;
}
</style>

موفق باشید:چشمک:

ahmad_lovely

سه شنبه 11 مرداد 1390, 01:05 صبح

ممنون از جوابتون ولی من منظورم این نبود، منظورم این بود که اگر یکی از دیو ها رو ارتفاع شو زیاد شد، ارتفاع والد اون دیو هم زیاد بشه !
ولی این کد رو نوشتم، جواب نداد

ghasemweb

سه شنبه 11 مرداد 1390, 02:36 صبح

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div</title>
<style type="text/css">
#AllPage
{
margin: 25px 25px 25px 25px;
background-color:Black;
height:300px;

}
#Header
{
height: 50%;
padding: 0 10px 0 10px;
background-color:Fuchsia;
}

#Tab
{
float:right;
background-color:Green;
width:192px;
height:50%;
}
#Search
{
float:left;
background-color:Navy;
width:150px;
height:50%;
}
</style>

</head>

<body>

<div id="AllPage">



<div id="Header">
</div>

<div id="Tab">
</div>

<div id="Search">
</div>

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

الان اگه ارتفاع allpage رو تغییر بدی نصف ارتفاع میره واسه قسمت صورتی و نصفش هم واسه اون دوتا دایو کوچیک به کد استایل توجه کنی راحت میفهمی

موفق باشی

ahmad_lovely

سه شنبه 11 مرداد 1390, 14:51 عصر

حرفتون درسته ولی ...
ببینید، توی همین کدی که نوشتید، دایو های صورتی، آبی و سبز، فرزنده دایو مشکی هستند، درسته؟
خب، من وقتی دایو آبی رو ارتفاعشو بزرگ می کنم به صورت دستی (تو design)، ولی ارتفاعه دایو مشکی بزرگ نمیشه ! یعنی دایو آبی از مشکی میزنه بیرون، من میخوام که یه کاری کنید که ارتفاع مشکی هم متناسب با آبی بزرگ بشه !
اگر دقت کنید وقتی دایو صورتی رو ارتفاعشو بزرگ کنید، دایو صورتی روی دایو های آبی و سبز نمیفته ولی دایو آبی و سبز از دایو مشکی میزنن بیرون!
من می خوام که اگر دایو های آبی یا سبز اندازشون بزرگ شد، اندازه ی دایو مشکی هم بزرگ شه!
این حالت فک کنم به خاطر اینه که با float دایو ها رو به چپ یا راست بردیم، اگر از float استفاده نکنیم، همونیه که من می خوام، ولی خب اون موقع باید یه فکری به حال بردن به چپ یا راست کرد !

mamali-mohammad

سه شنبه 11 مرداد 1390, 15:45 عصر

دوست عزیز باید clear کنید

اینطوری :

<div class="mother">
<div class="boy">
</div>
<div class="boy">
</div>
<br style="clear:both" />
</div>

کلاس boy رو باید float کنی

ahmad_lovely

سه شنبه 11 مرداد 1390, 17:25 عصر

میتونید روی کد قبلی انجام بدید، من نتونستم به جواب برسم !

mamali-mohammad

سه شنبه 11 مرداد 1390, 19:32 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div</title>
<style type="text/css">
#AllPage
{
margin: 25px 25px 25px 25px;
background-color:Black;
}
#Header
{
height: 151px;
padding: 0 10px 0 10px;
background-color:Fuchsia;
}

#Tab
{
float:right;
background-color:Green;
width:192px;
}
#Search
{
background-color:Navy;
width:150px;
height:102px;
float:left;
}
</style>

</head>

<body>

<div id="AllPage">

<div >

<div id="Header">
</div>

<div id="Tab">
salam<br />salam<br />salam<br />salam<br />salam<br />salam<br />salam<br />salam<br />
</div>

<div id="Search">
</div>
<br style="clear:both;" />
</div>
</div>

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

ahmad_lovely

چهارشنبه 12 مرداد 1390, 01:47 صبح

آقا بازم نشد !
خواهش می کنم خودتون یه بار تست کنید، آخه کارم گیره !