تراز قالب با div

وبمستر

توسط hasti در 6 سال پیش
0 47.8k 7 6 سال پیش
hasti daniel stackoverflow
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

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

خوش آمدید

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