PDA

View Full Version : سوال: مشکل div در css



cenazakhar
چهارشنبه 10 اردیبهشت 1393, 21:15 عصر
سوال داشتم
من میخوام قالب طراحی کنم ولی وقتی یه منو برای راست طراحی میکنم منو دوم که طراحی میکنم به جای اینکه زیرش بیاد کنارش میاد چی کار کنم؟
<div id="main">

<div id="category"> بک گراند منو اول

<div id="hcategory"> هدر منو اول

</div>
<Div id"ccategory">محتوای منوی اول
<p>&nbsp;</p>
</Div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>



<div id="fcategory">فوتر منوی اول
</div>


</div>
<div style="background-color:#666; height:100px"> منو دوم
</div>

Omid Jackson
چهارشنبه 10 اردیبهشت 1393, 22:32 عصر
سوال داشتم
من میخوام قالب طراحی کنم ولی وقتی یه منو برای راست طراحی میکنم منو دوم که طراحی میکنم به جای اینکه زیرش بیاد کنارش میاد چی کار کنم؟
<div id="main">

<div id="category"> بک گراند منو اول

<div id="hcategory"> هدر منو اول

</div>
<Div id"ccategory">محتوای منوی اول
<p>&nbsp;</p>
</Div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>



<div id="fcategory">فوتر منوی اول
</div>


</div>
<div style="background-color:#666; height:100px"> منو دوم
</div>

CSS کوش؟
از float استفاده نکردی؟

cenazakhar
چهارشنبه 10 اردیبهشت 1393, 22:54 عصر
<!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>Untitled Document</title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>


<body>


<div id="header">
</div>


<div id="main">


<div id="category">

<div id="hcategory">

</div>
<Div id"ccategory">
<p>&nbsp;</p>
</Div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>



<div id="fcategory">
</div>


</div>

<div id="content">
<div id="hcontent">

</div>

<Div id"pcontent">
<p>&nbsp;</p>
</Div>
<div id="fcontent">

</div>



</div>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="link">
<div id="hlink">
<p>&nbsp;</p>
<div class="backmenu"></div>
<p>&nbsp;</p>
<div id="flink"></div>
</div>

</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>




body{
background-image: url(image/background.jpg);
background-repeat: repeat-x;
height: 500px;
margin-top: 0px;
background-color: #E7F2F6;

}
#header
{
background-image: url(image/header.jpg);
margin: auto;
background-position: top;
height: 159px;
background-repeat: no-repeat;
width: 988px;

}
#main
{ background-color:#FFF;
min-height:990px;
width:988px;
margin:auto;
margin-top:12px;
padding-top:20px
}
#content
{ background-color:#fff;
min-height:200px;
width:520px;
margin:auto;
background-image:url(image/post_bg.gif);
overflow: auto


}
#hcontent
{
background-image:url(image/post_title.gif);
height:100px;


}
#fcontent
{
background-image:url(image/post_footer.gif);
height:100px;
background-repeat:no-repeat;
background-position:bottom;



}
#pcontent
{min-height:150px
}
#category
{
float:right;
width:200px;
background-image:url(image/sidebar_bg_right.jpg);
margin-right:10px
}
#hcategory
{
background-image:url(image/categories_title.jpg);
height:55px
}
#fcategory
{
background-image: url(image/sidebar_footer_right.jpg);
height: 20px;
background-repeat:no-repeat;
background-position:bottom;

}
#ccategory
{

min-height:300px
}
#hlink
{background-image:url(image/side-link.jpg);
}
#link
{
float: right;
width: 200px;
background-image: url(image/sidebar_bg_right.jpg);
min-height:100px;
margin-top:0px;
background-repeat:no-repeat;
margin-right:10px

}


#hlink
{

width: 200px;
background-image: url(image/side-link.jpg)
margin-right:0;
margin-left:5px
background-repeat:no-repeat;
height:55px;
background-position:top
}
#flink
{
background-image:url(image/sidebar_footer_right.jpg);
background-repeat:no-repeat;
background-position:bottom;
height:50px;



}
.backmenu
{
float:right;
width:200px;
background-image:url(image/sidebar_bg_right.jpg);
margin-top:15px;
min-height:100px

}

Omid Jackson
چهارشنبه 10 اردیبهشت 1393, 23:04 عصر
من نفهمیدم اینا چین، نه اسم گذاری طوری هست که معلوم باشه نه کامنت داره نه محتوا، برای همین از این چیزی نمیشه فهمید:متفکر:

masoud_pnu
چهارشنبه 10 اردیبهشت 1393, 23:52 عصر
دوست عزیزم خب این تعجبی نداره.اصولا بطور پیشفرض،المانها در htmlدرکنارهم قرارمیگیرن، نه زیرهم.مگه اینکه باcss بیاریدصون زیرهم.
شما پهنای(width)کانتنت منو رو 520گرفتی،بعد پهنای خود DIVمربوط به منو رو 200پیکسل گرفتی.حالا 320پیکسل در سمت چپ کانتنت خالیه.یعنی یه DIVبا پهنای 200پیکسلی دیگه کنارش جامیشه.به این دلیله که پایین نمیره.مورد بسیار مهم دیگه شما ازfloat استفاده نکردی.
البته کاش یه مقدار از کامنت هم استفاده میکردی که بهتر مشخص بشه.این استنباط بنده از کد شما بود.اون قسمتهای مربوط به هدر و mail رو کاش پاک میکردی.بنده در خدمتم.

cenazakhar
پنج شنبه 11 اردیبهشت 1393, 06:37 صبح
حل شد اون الان یه فاصله حدودا 10 پیکسلی بین فوتر و مین میفته
body{
background-image: url(image/background.jpg);
background-repeat: repeat-x;
height: 500px;
margin-top: 0px;
background-color: #E7F2F6;

}
#header
{
background-image: url(image/header.jpg);
margin: auto;
background-position: top;
height: 159px;
background-repeat: no-repeat;
width: 988px;

}
#main
{ background-color:#FFF;
min-height:990px;
width:988px;
margin:auto;
margin-top:12px;
padding-top:20px
}
#content
{ background-color:#fff;
min-height:200px;
width:520px;
margin:auto;
background-image:url(image/post_bg.gif);
overflow: auto


}
#hcontent
{
background-image:url(image/post_title.gif);
height:100px;


}
#fcontent
{
background-image:url(image/post_footer.gif);
height:100px;
background-repeat:no-repeat;
background-position:bottom;



}
#pcontent
{min-height:150px
}
#category
{
float:right;
width:200px;
background-image:url(image/sidebar_bg_right.jpg);
margin-right:10px
}
#hcategory
{
background-image:url(image/categories_title.jpg);
height:55px
}
#fcategory
{
background-image: url(image/sidebar_footer_right.jpg);
height: 20px;
background-repeat:no-repeat;
background-position:bottom;

}
#ccategory
{

min-height:300px
}
#hlink
{background-image:url(image/side-link.jpg);
}
#link
{
float: right;
width: 200px;
background-image:url(image/sidebar_bg_right.jpg);


margin-right:10px;
min-height:400px;

}


#hlink
{

width: 200px;
background-image: url(image/side-link.jpg)
margin-right:0;
margin-left:5px
background-repeat:no-repeat;
height:55px;

}
#flink
{
background-image: url(image/sidebar_footer_right.jpg);
height: 20px;
background-repeat:no-repeat;
background-position:bottom;




}
.backmenu
{
float:right;
width:200px;


margin-top:15px;
min-height:100px

}
#pbazdid
{
background-image:url(image/most_postview.jpg);
height:90px; width:90px; margin-top:10px; float:left ;
margin-left:10px;
width:220px;
min-height:200px

}
#fpbazdid
{
min-height:100px;
margin-top:50px
}
#lastpost
{
background-image: url(image/last_entries.jpg);
height:90px; width:90px; margin-top:10px; float:left ;

width:220px;
min-height:200px
}
#tlastpost
{
min-height:100px;
margin-top:50px
}
#randompost
{
background-image: url(image/random_posts.jpg);
height:90px; width:90px; margin-top:10px; float:left ;
width:220px;
min-height:200px
}
#frandompost
{
min-height:100px;
margin-top:50px
}
#footer
{min-height:290px;
width:988px;
background-color: #333;
margin:auto;


}


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


<div id="main">


<div id="pbazdid">
<div id="fpbazdid">
<p>d</p>
<p>d</p>
<p>&nbsp;</p>
<p>j</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="lastpost">
<div id="tlastpost">
</div>
</div>
<div id="randompost">
<div id="frandompost">
<p>m </p>
</div>
</div>
<p>&nbsp;</p>
</div>
<div id="category" >

<div id="hcategory">

</div>
<Div id"ccategory">
<p>&nbsp;</p>
</Div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>



<div id="fcategory">
</div>


</div>

<div id="content">
<div id="hcontent">

</div>

<Div id"pcontent">
<p>&nbsp;</p>
</Div>
<div id="fcontent">

</div>



</div>


<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


<div id="link" style="margin-right:10px">
<div id="hlink">


</div>
<div class="backmenu">
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="flink">
</div>



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

cenazakhar
پنج شنبه 11 اردیبهشت 1393, 16:17 عصر
لطفا یکی جواب بدههههههههه:گریه::گریه::گری ::گریه::گریه::گریه::گریه::گری ::گریه::گریه:

masoud_pnu
پنج شنبه 11 اردیبهشت 1393, 17:12 عصر
داداش گفتی حل شد!!اجازه بده الان مینویسم جوابشو میگم خدمتتون.

cenazakhar
پنج شنبه 11 اردیبهشت 1393, 17:38 عصر
داداش مشکل قبلی حل شد الان یه مشکل دیگست
فوترم به هدر نمیچسبهیه فاصله ای میافته بینشون
با ابسلوت حل میشه ولی میدونی که اگه ابسلوت بشه چی میشه

cenazakhar
پنج شنبه 11 اردیبهشت 1393, 21:25 عصر
نگفتی داداش چرا؟

masoud_pnu
پنج شنبه 11 اردیبهشت 1393, 21:43 عصر
آقا marginها رو auto گذاشتی.واسه footerمقادیر margin-topو padding-top رو برابر 0px;قرار بده.همینکارو واسه divمنو انجام بده با این تفاوت که بجایtopبنویس bottom.الان خودم میزنم ببینم چی میشه.چون همین جریان خیلی برام پیش اومده گفتم.امتحان کن.

cenazakhar
پنج شنبه 11 اردیبهشت 1393, 22:32 عصر
داداش مشکلو منو ها حل شده
الان مشکل فوتره

masoud_pnu
پنج شنبه 11 اردیبهشت 1393, 22:50 عصر
خب همین.منم واسه فوتر گفتم.دقیق مشکل چیه الان؟قرار یه DIVداشته باشیم که یه هدر داشته باشه،یه فوتر و محتواش که منو باشه.الان فوتر به انتهای منو نمیچسبه و فضای خالی داره.درسته؟

cenazakhar
جمعه 12 اردیبهشت 1393, 07:23 صبح
دزست شد ممنون