قرارگیری دو منو در کنار هم داخل بکگراند اصلی

30min · Feb 18, 2012

سلام .
راستش من آشنایی زیادی با Css ندارم چون اصلا کارم این نیست .
اما از روی مجموعه آموزشی سی جی تی وی که در سایت هست دارم آشنا میشم باهش و برام خیلی هم جالب هستش .
راستش من میخوام یک قالب رو به css تبدیل کنم .
کد زیر رو تا اینجا نوشتم .

این کد index :

کد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SiminHafezi</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="mainborder">
 
    <div id="header">
    <img src="images/design_psd3_03.gif" width="719" height="158" /></div>
    <div class="menu">
 
    </div>
 
    <div class="content">
 
    </div>
 
</div>
 
</body>
</html>

اینم کد Css :

HTML:

body{
 background-image:url(images/design_psd3_06.gif);
}
#mainborder{
 width:720px;
 height:800px;
 background-color:#FFF;
 margin:auto;
}
#header{
 margin-left:1px;
    padding-top:1px;
}
.menu{
 width:200px;
 height:200px;
 margin-left:2px;
 background-color:#E9E9E9;
 border:#CCC solid 1px;
}
.content{
 width:400px;
 height:400px;
 float:right;
 margin-right:2px;
 background:#E9E9E9 ;
 border:#CCC solid 1px;
}

اما دو تا منوی Content و menu کنار هم قرار نمیگیرن و یکی زیر اون یکی میفته .
باید چکار کنم ؟
متشکرم .

pro_man · Feb 18, 2012

توی فایل CSS در کلاس content ، مقدار float رو left بزار

30min · Feb 18, 2012

pro_man گفت:
توی فایل CSS در کلاس content ، مقدار float رو left بزار

خوب نمیشه بازم .
مگه Float همون حالت راست چین چپ چین رو نداره ؟
اگه Float رو left بزام میپره سمت چپ و بالا نمیره .
حتی float رو left میزارم و Margin-left رو هم 300 میزارم باز هم نمیشه .

pro_man · Feb 18, 2012

معذرت میخوام اولش تند تند تاپیکت رو خوندم منظورت رو درست متوجه نشدم :green:

کد:

.content{
 width:400px;
 height:400px;
 float:right;
 margin-right:50px;
 margin-top:-300px;
 background:#E9E9E9 ;
 border:#CCC solid 1px;
}

کدهای کلاس content رو به این صورت تغییر بده درست میشه.
البته منم مثل شما تازه کارم شاید این کاری که کردم استاندارد نباشه..ولی فکر کنم همون چیزیه که میخواستین

30min · Feb 18, 2012

ممنون proman درست شد .
راستی میتونی برام توضیح بدی چرا مقدار margin top رو منفی گذاشتی ؟

pro_man · Feb 19, 2012

30min جان کلا margin-top واسه حاشیه دادن از بالا استفاده میشه.اما چرا مقدارش 300- باید باشه تا بیاد بالاتر.
این فایلی رو که پیوست کردم دانلود کن.همین کد های خودت بود که یکم تغییر دادمش.یکم مرتب نوشتم که بتونم بهت توضیح بدم.
توی کدهای HTML دقت کن یه Div داری که بقیه Div iها توی اون قرار گرفتن.منظورم از اولین Div اونیه که از آیدی mainborder استفاده کرده.حالا یکم بیا پایین تر.داخل این Div یه Div دیگه هم داری که هدر سایت هستش.باز بیا پایینتر.این یکی Div واسه منوی سایت و زیر اون هم Div محتوا قرار گرفته.اگه یکم دقت کنی جواب سوالت رو میگیری.
ببین اول هدر
چون زیرش کد Div منو رو نوشتیم پس منو میاد زیر هدر
چون بعد از منو کد Div محتوا رو نوشتیم پس محتوا هم میاد زیر منو.
حالا چون محتوا اومده زیر منو باید مقدار Margin-top رو منفی بدیم که بیاد بالا.
گرفتی چی شد؟ :green:

دوستان دیگه هم اگه نظری دارن بدن که ما هم استفاده کنیم