إعـــــــلان

**admin admin** · 27-03-2011, 01:45 AM

حياك الله اختنا الفاضلة

إن شاء الله موفقة في مشروعك

ممكن ترفقى لنا نتيجة التطبيق ولو بالكود فقط كى أفهم تحديدا طريقة التصميم المراد
لأن هناك أكثر من طريقة للصول للتوزيع من خلال الـ css

سيتم وضع درس ان شاء الله لتخطيط الصفحة بلغة CSS

موفقة بإذن الله ... لك مني أجمل تحية .

**أريام أريام** · 27-03-2011, 10:49 AM

السلام عليكم..
أشكرك على الرد أخي الكريم..
أرفقت كودات السي اس اس والاتش تي ام ال
لأني لسا ما اشتغلت على البرمجة بلغة البي اتش بي
مازلت اتعلمها هنا ..

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="">

	<title>Untitled 1</title>
	<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>

<body>

<div id="art">

<div class="header"><h2>Logo</h2></div>

<div class="navbar">
<ul>
    <li><a href="#">Home Page</a></li>
	<li><a href="#">| Ad Wanted</a></li>
	<li><a href="#">| Language</a></li>
	<li><a href="#">| Contact Us</a></li>
	<li><a href="#">| Help</a></li>
	<li><a href="#">| Login/ Register</a></li>

</ul>

</div>

<div class="header">i love this  work a lot<br> <br> i love this</div>

<div class="navbar">
<ul>
    <li><a href="#">something</a></li>
    <li><a href="#">| something</a></li>
	<li><a href="#">| something</a></li>


</ul>

</div>
<div class="content">
<div class="leftblock">
<div class="headmenu2"><h2>Using Our site</h2></div>

<div class="bodymenu">
<h4>How to </h4>   <p>i will write some information here...i will write some information here.i will write some information here.i will write some information here.vi will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here. </p>
<div class="headmenu3"> <a href="#"> Read More</a></div>
</div>

<div class="bodymenu">
<h4>How to </h4> <p> i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.</p>
<div class="headmenu3"> <a href="#"> Read More</a></div>
</div>

<div class="bodymenu">
<h4>How to </h4> <p> i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.i will write some information here.</p>
<div class="headmenu3"> <a href="#"> Read More</a></div>
</div>





<div class="headmenu2"><h2>shipping information</h2></div>
<div class="bodymenu3">
<h4>How to </h4> <p> we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....we wil ship it....</p>

</div>

<div class="headmenu2"><h2>contact information</h2></div>
<div class="bodymenu3">
<h5>contact us:..</h5> <p>our information..<br> our phone nomber... <br> our e-mails</p>

</div>
</div>
<div class="rightblock">
<div class="headmenu2"><h2>somthing Of The Month</h2></div>
<div class="bodymenu2">
<img src="img/sunset.jpg" width="311" height="160">
<p> information about him and some of his work information about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his workinformation about him and some of his work</p>

</div>

<div class="headmenu2"><h2> News</h2></div>
<div class="bodymenu2"><p>


we will write some news here....!<br>
<a href="#" target="">Read more</a> <br>
we will write some news here....!<br>
<a href="#" target="">Read more</a> <br>we will write some news here....!<br>
<a href="#" target="">Read more</a> <br>we will write some news here....!<br>
<a href="#" target="">Read more</a> <br>


</p></div>

<div class="headmenu2"><h2>classified work</h2></div>


<div class="thumbnail">
  <a target="_blank" href="#">
  <img src="img/sunset.jpg" alt="" />
  </a>
  <div class="desc">name<br>category</div>
</div>

<div class="thumbnail">
  <a target="_blank" href="#">
 <img src="img/sunset.jpg" alt="" />
  </a>
  <div class="desc">name<br>category</div>
</div>

<div class="thumbnail">
  <a target="_blank" href="#">
  <img src="img/sunset.jpg" alt=""/>
  </a>
 <div class="desc">name<br>category</div>
</div>

<div class="thumbnail">
  <a target="_blank" href="#">
  <img src="img/sunset.jpg" alt=""  />
  </a>
 <div class="desc">name<br>category</div>
</div>

<div class="thumbnail">
  <a target="_blank" href="#">
 <img src="img/sunset.jpg" alt=""  />
  </a>
 <div class="desc">name<br>category</div>
</div>
 
<div class="thumbnail">
  <a target="_blank" href="#">
 <img src="img/sunset.jpg" alt="" />
  </a>
 <div class="desc">name<br>category</div>
</div>




<div class="headmenu2"><h2>adds Wanted</h2></div>
<div class="bodymenu2">
<div class="scroll">

<p> wanted adds<br>
 wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br> wanted adds<br></p></div>
</div>

</div>




<div class="clear"></div>
<div class="footer">all rights are reserved for us 2010-2011</div>
</div>
</div>
</body>
</html>

css

كود:

body {
    direction: ltr;
    font-family: Tohoma, ssans-serif;
    font-size: 14px;
    background: #708EDF;
}
img { border: 0;}

#art{
    width: 93%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border: 1.4px dotted #CCC;
      background: #D4D4FF;
 
   
}
.header{
    background-color: #696969;
    padding: 7px;
    color: #FFF;
    margin: 9px 9px 9px 9px;
}


.navbar {
	height: 40px;
	background-color: #F1F1F1;
	margin: 9px;
	
}
.navbar ul {
	list-style: none;
	margin: 0 ;
	padding: 0;

}


.navbar ul li{
	float:left ;
   
}
h2{
	color: #7D6639;
	text-transform: uppercase;
}
h4{

	color: #005599;
	text-transform: capitalize;
}
.navbar ul li a{
	display: block;
	padding: 8px;
	background-color: #F1F1F1;
	color: #555;
	text-decoration: none;
}


.navbar ul li a:hover{
	background: #FFF;
	color: #000;
}


.leftblock{
	float: left;
	width: 295px;
	margin-right: 2px;

}

	
.rightblock{
	float: right;
	width: 610px;
	margin-left: 2px;
}




.bodymenu{
	padding: 8px;
	margin: 0px 9px 9px 9px;
	background: #F5F5F5;
	border-top: 9px outset #C3C3C3;
	border-left: 9px outset #C3C3C3;
	border-right: 9px solid #C3C3C3;
	border-bottom: 9px solid #C3C3C3;
}




.headmenu2{
	font-weight: bold;
	text-align: left;
	padding: 2px;
	margin: 9px 9px -6px 9px;
}

.headmenu3{
    width: 90px;
	border: 1px;
	background-color: #3A88AE;
	font-weight: bold;
	text-align: center;
	color: white;
	padding: 2px;
	margin: 2px;
}

.headmenu3 a { text-decoration: none;	color: white; }

p 
{text-align: justify;}



.bodymenu2{
	padding: 8px;
	margin: 0px 9px 9px 9px;
	background: #F5F5F5;
	border: 3px solid #D2D2D2;
}

.bodymenu3{

	padding: 8px;
	margin: 0px 9px 9px 9px;
	background: #F5F5F5;
	border: 6px solid #D2D2D2;
}



.scroll{

    width:440px;
    height:200px;
    overflow:scroll;
    margin: 15px;
}


.thumbnail{
   margin:8px;
   border:1px solid gray;
   height:auto;
   width:auto;
   float:left;
   background: #F5F5F5;

}
  
.thumbnail img{
    width: 175px;
    height: 120px;
    display:inline;
    margin:2px;
    border:1px solid #ffffff;
}
  
  
.thumbnail a:hover img
    {border:1px solid black;}

.desc{
    text-align:left;
    font-weight:bold;
    color: #005599;
    font-size: 13px;
    margin:0px 1px 3px 1px;
    text-transform: capitalize;
}
  
.desc img {
	height: 30px;
	width: 30px;
	float: right;
	border: none; 
}

.clear{
	clear: both;
}


.footer{
   background-color: #F1F1F1;
   text-align: center;
   font-size: 12px;
   padding: 4px;
}

أنا متأخرة كثير في عملي.. مع اني لقيت اكبر الفائدة هنا جزاكم الله عنا خير
أرجو إفادتي علشان ابدأ في البي اتش بي.. ولكم جزيل الشكر

**admin admin** · 27-03-2011, 02:45 PM

حياك الله

التوزيع جيد والتطبيق رائع ماشاء الله

لكن يجب ان يتم تخطيط الصفحة قبل هذا التوزيع
يجب ان يتم تحديد مكان كل بلوك بحيث لايخرج منه وأحيانا يجب تحديد الحد الأقصى للتصغير او التكبير
وذلك بوضع كافة البلوكات فى حاوية ثابته لاتتأثير بالتكبير او التصغير

المهم جارى اعداد شرح مع إضافة أمثلة متنوعة
ان شاء الله سيتم وضعه الليلة
بالتوفيق

**admin admin** · 27-03-2011, 04:47 PM

تم وضع شرح لطريقة التخطيط ان شاء الله تتم الفائدة منه

http://sites.ienajah.com/vb2/showthread.php?t=16821

**أريام أريام** · 27-03-2011, 06:37 PM

اشكر تعاونك اخي الكريم
ان شاء الله اتابع واعدل بالمناسب مع توزيعي
تقديري

إعـــــــلان

استفسار بشأن القوالب اللي فيها فلووت

استفسار بشأن القوالب اللي فيها فلووت

تعليق

تعليق

تعليق

تعليق

تعليق

مواضيع تهمك