تراز قالب با div

بازدید47.9kپست ها7آخرین فعالیت6 سال پیش
0
0

سلام
من یه قالب ساده طراحی کردم و لی تو تراز کردن قسمت main,sidebarبا سایر قسمت ها مشکل داشتم میخواستم ببینم که چه جوری میتونم همه رو با هم تراز کنم؟

<style type="text/css">

	body
	{
		background-color:#999; 
	}
	
	#header
	{
		width:900px;
		height:120px;
		background-color:#900; 
		margin:0 auto;
		 
	}
	
	#navigation
	{ 
		
		width:900px;
		height:150px;
		background-color:#69F;
		margin:0 auto; 
	} 
	
	#maincontent
	{
		width:500px;
		height:250px;
		background-color:#FC0;
		float:left; 
		margin-left:0 auto;
	}
	
	#sidebar
	{
		width:400px;
		height:250px;
		background-color:#FCC; 
		float:left; 
		margin-right:0 auto;
	} 
	
	#footer
	{
		background-color:#FFF;
		width:900px; 
		height:150px;
		margin:0 auto;
	}

	.clear
	{
		clear:both;
	}
	
</style>


</head>

<body>


	<div id="header">header</div>
    <div id="navigation">navigation</div>
    <div id="maincontent">maincontent</div>
   	<div id="sidebar">sidebar</div>
    <div class="clear"></div>
    <div id="footer">footer</div>
آخرین ویرایش: 17-08-2014 ساعت 19:53، توسط Daniel
0

برای اینکه این دو تا div رو تراز کنید میتونید یه div مادر برای این دو تا تعریف کنید
البته float بلاک sidebar رو باید right میکردید.

<style type="text/css">

	body
	{
		background-color:#999; 
	}
	
	#header
	{
		width:900px;
		height:120px;
		background-color:#900; 
		margin:0 auto;
		 
	}
	
	#navigation
	{ 
		
		width:900px;
		height:150px;
		background-color:#69F;
		margin:0 auto; 
	} 
	
	div#content {
	margin: 0 auto;
	width: 900px;
	}

	#maincontent
	{
		width:500px;
		height:250px;
		background-color:#FC0;
		float:left; 
	}
	
	#sidebar
	{
		width:400px;
		height:250px;
		background-color:#FCC; 
		float:left; 
	} 
	
	#footer
	{
		background-color:#FFF;
		width:900px; 
		height:150px;
		margin:0 auto;
	}

	.clear
	{
		clear:both;
	}
	
</style>


</head>

<body>

	<div id="header">header</div>
	
    <div id="navigation">navigation</div>
	
    <div id="content">
		<div id="maincontent">maincontent</div>
		<div id="sidebar">sidebar</div>
	</div>
	
    <div class="clear"></div>
    <div id="footer">footer</div>
0

درود برشما خیلی سپاس گذارم
شرمنده مشکل این کد کجاست که صفت های cssروی دستورات(footer.copyright)htmlاجرا نمیشه؟

<style type="text/css"> body { background-color:#69C; direction:ltr; } #header { background-color:#6F9; width:1170px; height:120px; margin:0 auto; } #navigation { background-color:#63C; width:1170px; height:150px; margin:0 auto; } #maincontent { margin:0 auto; width:1170px; } #sidebarleft { background-color:#FFF; width:292px; height:250px; float:left; } #maincontent1 { background-color:#C99; width:585px; height:250px; float:left; } #sidebarright { background-color:#FFF; width:292px; height:250px; float:right; } #footer { background-color:#FFF; width:1170px; height:200px; margin:0 auto; } #copyright { background-color:#999; width:1170px; height:250px; margin:0 auto; } </style> </head> <body>
	<div id="header">header</div> 
    <div id="navigation">navigation</div> 
    <div id="maincontent">
    
    		
            	<div id="sidebarleft">sidebarleft</div>
               			 <div id="maincontent1">maincontent</div>
                
                	<div id="sidebarright">sidebarright</div>
    
    </div> 
    
    
    	<div id="footer">footer</div> 
       
        <div id="copyright">copy</div>
0

اگر دوباره کد ها رو به این صورت قرار بدید اخطار دریافت میکنید
کافیه نوع کد رو از ویرایشگر انتخاب کنید:

[align=center]

[/align]

0
clear: both;

رو به استایل فوتر اضافه کنید

0

بی نهایت سپاس گذارم کمک خیلی بزرگی بهم کردین:khodeshe:

0

چطور میتونم برای <body> گردینت بذارم(مشکل کار من اینجاست که گردینت من بصورت تک رنگ به زمینم اعمال میشه)؟

0

سلام
قوانین رو مطالعه کنید
برای این سوال باید تاپیک جداگانه ایجاد کنید.

سوال برنامه نویسی دارید؟

هیچ وقت در پرسیدن سوال شک نکنید

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.