عمودين عن طريق الــ css . كيف؟

**mwafi** · 02-08-2008

اخواني قمت بتصميم صفحة بالــ css وقسمت الصفحة الي عمودين container , sidebar :
والان اريد تقسم الــ container الي عمودين متساويين كما في الصورة

حاولت بطرق عديدة منها الجداول واعطاء العرض width=100% واحاولت ايضا بالــ css بنفس طريقة تقسم الصفحة ولكن دائما احصل علي نتيجة سيئة مع internet explorer , مع الحصول علي النتيجة الصحيحة ف بقية المتصفحات (opera , Mozilla Firefox ).....
ارجو المساعدة
مثال لما تم انجازه
http://google4arab.org/try

**Foxhound** · 02-08-2008

النتيجة عندي نفسها في Firefox + IE7

لكن جرب هالكود :

كود HTML:

<div id="container">
	<div id="content" style="float: right;">
		<div style="float: right; width: 50%">
			
			google google google google google google google google google google google google google google
			google google google google google google google google google google google google google google
			google google google google google google google google google google google google google google
			
		</div>
		
		<div style="float: left; width: 50%">
			
			Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo
			Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo
			Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo Yahoo
			
		</div>
		
	</div>
</div>

قسمها بنفس الطريقة اللي قسمت فيها الصفحة إلى sidebar و container

**mwafi** · 03-08-2008

اخواني عندما قسمت الــ container بنفس طريقة تقسيم الصفحة ظهرت النتيجة صحيحة علي الفايرفوكس وابرا

ولكن الاعمدة غير متساوية في العرض علي الاكسبلورر

www.google4arab.org/try

**ArabCoders** · 07-08-2008

للأسف انا مو خبير تصميم، ولكن حبيت ابلغك اخي العزيز تصميمك روعه وعجبني حيل، بارك الله فيك

**mwafi** · 07-08-2008

المشاركة الأصلية كتبت بواسطة ArabCoders مشاهدة المشاركة

للأسف انا مو خبير تصميم، ولكن حبيت ابلغك اخي العزيز تصميمك روعه وعجبني حيل، بارك الله فيك

اخي الكريم التصميم من ابداعات الاخ remano

**محمد فؤاد** · 07-08-2008

السلام عليكم

اخي الكريم

استخدم الاكواد التالية قمت بتصحيح بعض الاخطاء وقمت ببعض التعديلات

صفحة html

كود HTML:

<!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>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>


<body>

<div id="wrapper">
	<div id="header">
		<img src="img/logo.jpg" alt="" /></div>
	<div id="navbar">
	</div>
	<div id="container">
		<div id="content">
			<div id="index">
				<div id="half">
					<div class="halfone separator">
						container<br />
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google google 
						google google google google google google google 
				</div>
				<div class="halfone">
					container<br />
					google google google google google google google google google google google google google google google google google google 
					google google google google google google google google google google google google google google google google google google 
					google google google google google google google google google google google google google google google google google google 
					google google google google google google google google google google google google google google google google google google google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google google google google 
					google google google google google google 
				</div>
			</div>
		</div>
	</div>
</div>
	<div id="sidebarCo">
		<img src="img/side_up.jpg" alt="" />
		<div id="sidebar">
			sidebar <br />
			google google google google google google google google google google 
			google google google google google google google google google google 
			google google google google google google google google google google 
			google google google google google google google google google google 
			google google google google google google google google google google 
			google google google google google google </div>
		<img src="img/side_down.jpg" alt="" /></div>
	<div id="footer">
	</div>
</div>

</body>

</html>

ملف css

كود HTML:

#half{
	width:100%;
	float: right;
}

.halfone{
	width:47%;
	float: right;
	text-align:justify;
}

.separator { margin-left:30px; }

وقم بحذف المعرف halftwo من ملف css الخاص بك

جرب واخبرني بالنتيجه

**NLP** · 13-08-2008

تفضل :nice: , بإستعمال الـ Div

كود HTML:

<!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" dir="rtl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 4</title>
<style type="text/css">
body {
    padding: 5px;
    margin: 0px;
    font-family: Tahoma;
    font-size: 10pt;
}
#sidebar {
    position: absolute;
    right: auto;
    width: 257px;
    left: 0px;
    border: 1px dashed #333333;
    background-color: #E5E5E5;
}
#content {
    padding: 3px;
    margin-left: 260px;
    width: auto;
    border: 1px dashed #333333;
    min-height: 800px;
}
#content_right {
    float: right;
    width: 50%;
    background-color: #E5E5E5;
}
#content_left {
    float: left;
    width: 50%;
    background-color: #C0C0C0;
}
#content_nav {
    text-align: center;
}
</style>
</head>

<body>

<div id="sidebar">
    Sidebar </div>
<div id="content">
    <div id="content_nav">
        Container !</div>
    <div id="content_right">
        العمود الأيمن</div>
    <div id="content_left">
        العمود الأيسر</div>
</div>

</body>

</html>

وهذا بإستعمال الجداول (Tables)

كود HTML:

<!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" dir="rtl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 5</title>
</head>

<body>

<table style="width: 100%">
    <tr>
        <td id="Content">
        <table style="width: 100%">
            <tr>
                <td id="Container" align="center">Container</td>
            </tr>
            <tr>
                <td>
                <table style="width: 100%">
                    <tr>
                        <td id="Container_right" width="50%">R</td>
                        <td id="Container_left" width="50%">L</td>
                    </tr>
                </table>
                </td>
            </tr>
        </table>
        </td>
        <td id="SideBar" valign="top" width="250px">this is Sidebar</td>
    </tr>
</table>

</body>

</html>

ولكن أنصحك بإستخدام DIV عشان تختزل حجم الصفحه

أخوك NLP

**mwafi** · 14-08-2008

بارك الله في الجميع
اخوي محمد فؤاد بارك الله فيك لكن ظهرت مشكلة بالقائمة الجانبية

وشكرا جزيلا لك اخي NLP فعلا كود الــ css عمل بنجاح علي عكس ما كنت اتوقع

الحقيقة تعبت كثير بالموضوع :eek3:

تحياتي للجميع:nice:

الموضوع: عمودين عن طريق الــ css . كيف؟

أدوات الموضوع

بحث في الموضوع

عمودين عن طريق الــ css . كيف؟

المواضيع المتشابهه

"طلب" طريقة عمل دومين فرعي مزيف عن طريق الــ php

ملحوظات مفيده لبرمجه قويه بأستخدام الــ PHP و الــ Mysql

شباب كيف أحمل موقعي عن طريق برنامج الــ FTP ؟؟؟

ضوابط المشاركة