تراز قالب با div

وبمستر

توسط hasti در 4 سال پیش
0 1.2k 7 4 سال پیش
hastistackoverflowdaniel
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

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

خوش آمدید

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

لطفا ابتدا لاگین کنید