 |  |
| الرئيسية | مركز المعلومات | مركز التحميل | للاعلان في مُطِّورْ | استخدم ختم مطور | قوِ موضوعك هام | وسام مطور جديد | افحص البيج رانك جديد |
 |
| |||||||
| دورة تصميم المواقع بإسلوب المحترفين web2.0 دورة تصميم المواقع بإسلوب المحترفين web2.0
ملقي الدورة: [vista-design] |
عزيزي المطور ابتعد عن النقل، ولتكن مواضيعك جديدة وقيمة تعبر عن إبداعك وتميزك
 |
| | أدوات الموضوع | انواع عرض الموضوع |
|
#1
02-02-2010, 01:30 AM
| ||||
| ||||
 مناقشة الدرس السابع شرح كيفية عمل القوائم المتحركة بسم الله الرحمن الرحيم فى هذا الموضوع راح أرد على اى استفسارات من الاعضاء خاصة بهذا الدرس أخوكم vista-design
|
| |
|
#2
03-02-2010, 08:31 PM
| |||
| |||
السلام عليكم هذا تطبيقي حطيته في المرفقات ، لكن المشكلة عندي إنه القائمة الفرعية ما تظهر ياليت تشوف السبب وين في الكود وتقولي !!! كمان حابة يكون اللون الأصفر اللي حول القائمة يكون ارتفاعه أقل من ارتفاع شريط الـ navbar ,, ممكن تشيّك على الكود تبعي وتعرف وين مشكلتي ؟!!! |
|
#3
04-02-2010, 12:56 AM
| |||
| |||
|
تم التطبيق CAVA وهذا الكود كود:
<!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" lang="en" xml:lang="en">
<head>
<title>قوائم متحركة متطوره</title>
<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">
/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<!-- CSS for Drop Down Tabs Menu #1 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />
<!-- CSS for Drop Down Tabs Menu #2 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/bluetabs.css" />
<!-- CSS for Drop Down Tabs Menu #3 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/slidingdoors.css" />
<!-- CSS for Drop Down Tabs Menu #4 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/glowtabs.css" />
<!-- CSS for Drop Down Tabs Menu #5 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/halfmoontabs.css" />
<body>
<h2>1) Example 1</h2>
<p>Note that the CSS for this menu style requires each menu item be wrapped in an additional <span> tag.</p>
<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS" rel="dropmenu1_a"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_a"><span>Partners</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Useful Tools"><span>Tools</span></a></li>
</ul>
</div>
<div class="ddcolortabsline"> </div>
<!--1st drop down menu -->
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2><strong>---- القوائم المتحركة ----</strong> </h2>
<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1_b">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2_b">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!--1st drop down menu -->
<div id="dropmenu1_b" class="dropmenudiv_b">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_b" class="dropmenudiv_b" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu")
</script>
<h2>3) Example 3</h2>
<p>Note that the CSS for this menu style requires each menu item be wrapped in an additional <span> tag.</p>
<div id="slidemenu" class="slidetabsmenu">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Library" rel="dropmenu1_c"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="New" rel="dropmenu2_c"><span>Partners</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Useful Tools"><span>Tools</span></a></li>
</ul>
</div>
<br style="clear: left;" />
<br class="IEonlybr" />
<!--1st drop down menu -->
<div id="dropmenu1_c" class="dropmenudiv_c">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_c" class="dropmenudiv_c" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("slidemenu")
</script>
<h2>4) Example 4</h2>
<p>Note that the CSS for this menu style requires each menu item be wrapped in an additional <span> tag.</p>
<div id="glowmenu" class="glowingtabs">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Library" rel="dropmenu1_d"><span>CSS Codes</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_d"><span>Partners</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Webmaster Tools"><span>Tools</span></a></li>
</ul>
</div>
<br style="clear: left;" />
<br class="IEonlybr" />
<!--1st drop down menu -->
<div id="dropmenu1_d" class="dropmenudiv_d">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_d" class="dropmenudiv_d" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("glowmenu", "auto")
</script>
<h2>5) Example 5</h2>
<div id="moonmenu" class="halfmoon">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1_e">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2_e">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com/">Tools</a></li>
</ul>
</div>
<br style="clear: left;" />
<!--1st drop down menu -->
<div id="dropmenu1_e" class="dropmenudiv_e">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_e" class="dropmenudiv_e" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("moonmenu", 3)
</script>
</body>
</html>
مشكلتي مثل مشكلة الاخ hugooo القوائم الفرعية لا تظهر تحت القوائم الرئيسية |
|
#4
04-02-2010, 11:18 PM
| ||||
| ||||
| اقتباس:
لقد نسيت تضع ملف js الخاص بعرض القائمة الفرعية ووضع كود التشغيل به اسفل الdiv الخاص بالقائمة الفرعية كود: <script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu")
شوف التعديل اللى سويته على تطبيقك وشوف التغيير اللى حصل فأنا عدلت الكود سريعا وعطلت تعديلك فى ملفك style الخاص بالقائمة فقط ليتم تفعيل ما هو موجود بالملف bluetabs.css يمكن نسيت اذكر هذا فى الدرس على اساس الاعضاء راح تعدل من نفس الملف مباشرة لذلك راح اضع هذا التنبيه حتى ينتبه له الاعضاء وشاكر لك مجهودك واحييك على شغلك لانك هيك بتوضح انك بتجتهد فى التعلم ولكل مجتهدا نصيب تحياتى  
آخر تعديل بواسطة vista-design ، 04-02-2010 الساعة 11:22 PM |
|
#5
04-02-2010, 11:25 PM
| ||||
| ||||
| اقتباس:
راجع ردى للاخ hugoo وانا راح اضيف التنبيه فى الدرس بخصوص ذلك فانا اشرت للجزء الخاص بتعديل القائمة مع ترك كل شىء كما هو لذلك راح اضيف تنبيه لو حبيت تأخذ الكود فى اى مكان بكل شىء مطلوب
|
|
#7
06-02-2010, 03:07 AM
| ||||
| ||||
| اقتباس:
|
|
#8
06-02-2010, 05:39 AM
| |||
| |||
|
تم ظهور القوائم الفرعية لكن حدث خطا يا غالي الصفحة كلها تشوهت مثل ما قلت لك وظهر بعض تصاميم تطبيق العضو hugoo تم ارفاق لك الملفات اتمني حل المشكلة باسرع وقت لاني اريد الدخول للدروس القادمة وياريت بالمرة تشوف مشكلة ظهور البرواز في متصفحات اخري بشكل غير مظبوط بانتظار الرد |
|
#9
07-02-2010, 02:46 AM
| ||||
| ||||
| اقتباس:
فلابد ان تعطى للمقال ارتفاع تلقائى auto وليس محدد حتى تتمدد الصفحة وهذا سبب الخلل وظبط الكود ياغالى لانه محتاج تنظيم اكثر من هيك
|
|
#10
07-02-2010, 09:28 PM
| |||
| |||
|
السلام عليكم تم اصلاح الكود اخي لكن لم تعد تظهر القوائم الفرعية انظر http://www.gd3an.p2h.info/CAVA2.htm مع اني اضفت الكود بطريقة صحيحة + اضفت ملف js + تم ارفاق الملفات بالمرفقات بانتظار الرد |
|
#11
08-02-2010, 01:29 AM
| ||||
| ||||
| اقتباس:
اخى الكريم كود صفحة الhtml غير منظم وسمى style انت واضعهم خطأ وقافل عليهم بcomment وكود ارفاق ملفjs خطأ فأنت مٌدرج الكود بداخله وسم الstyle  ياريت تظبط الصفحة بشكل منظم شوف مثال لتنظيم الكود حتى يسهل على غيرك التعرف عليه كود: /*----------------------------------------------------------------------------
++ EXTERNAL SOURCE: template.css
++ Structural Style Sheet
----------------------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
height: 100%!important;
}
body {
margin: 0;
padding: 0;
background: #fff;
color: black;
}
/* Template Width
*****************************************/
.width960px {
width: 960px;
margin: 0 auto;
text-align: left;
padding: 0;
}
#content-inner {
border: 1px solid #ffffff;
border-top: none;
}
/* Top Area
*****************************************/
div#top {
height: 52px;
margin: 0 0 1px 0;
}
div#top div#logo {
display: block;
height: 26px;
padding: 0pt;
position: relative;
top: 5px;
width: 176px;
}
/* Logo */
div#top div#logo h1 {
margin: 0;
}
div#top div#logo h1 a {
width: 224px;
height: 36px;
margin: 0;
padding: 0;
text-indent: -7887px;
display: block;
background: transparent url(../images/logo.png) no-repeat left;
font-size: 1px;
line-height: 26px;
}
#user2 {
width: 100%;
background: url(../images/top_shelf.png) repeat-x;
}
div#user2-bg {
background: url(../images/vector-landscape.png) no-repeat top center;
height: 239px;
margin: 0 auto;
}
a.home-promo {
background: url(../images/promo.jpg) no-repeat top center;
height: 220px;
text-indent: -9999px;
margin: 10px 0;
display: block;
border: 1px solid white;
}
#hmenu {
background: #E5F3FD ../images/hmenu_bg.png) repeat-x bottom;
position: relative;
height: 39px;
}
#hmenu .width960px {
position: relative;
top: -6px;
}
#menu-h {
left: 0;
}
#main {
background: url(../images/main-top-bg.png) repeat-x top;
margin-bottom: 13px;
}
#pathway {
line-height: 34px;
height: 36px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #F2EFE1;
background: url(../images/pathway_bg.png) repeat-x top;
margin-bottom: 1px;
font-size: 0.9em;
padding: 0 20px 0 8px;
}
#pathway a:link,
#pathway a:visited,
#pathway a:hover {
line-height: 34px;
padding: 0 10px 0 5px;
margin-right: 4px;
text-decoration: underline;
font-size: 1em;
}
#pathway img {
display: none;
}
/* Clear Fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
/* Hides From IE Mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End Hide from IE Mac */
/* Footer Section
*****************************************/
#footer {
margin: 0 auto;
clear: both;
position: relative;
height: 63px;
font-size: 0.9em;
color: #fff;
background: #F7ECD7;
border-top: 1px solid #D5BD97;
margin-top: 1px;
}
#nav-copy {
position: relative;
top: 12px;
font-size: 1.1em;
}
#joomlajunkie-swish a:link,
#joomlajunkie-swish a:visited {
float: left;
background: url(../images/jjswish.png) no-repeat 0px -44px;
width: 42px;
height: 45px;
margin: 0;
padding: 0;
text-indent: -7887px;
z-index: 100;
outline: 0;
margin: -5px 0 0px 10px;
}
#nav-and-credits {
line-height: 20px;
position: relative;
}
#nav-and-credits .left,
#copyright .left {
float: left;
clear: right;
padding: 0;
margin: 0;
padding-left: 10px;
}
#nav-and-credits .right,
#copyright .right {
float: right;
padding: 0;
margin: 0;
padding-right: 20px;
}
#copyright .right {
color: #666
}
#copyright .right a {
text-decoration: underline;
}
a.w3c-valid-xhtml,
a.w3c-valid-css,
a.footer-rss {
padding-left: 30px;
text-transform: uppercase;
}
#nav-and-credits a.w3c-valid-xhtml {
background: url(../images/tickle_red.gif) no-repeat 10px 1px;
color: #333;
}
#nav-and-credits a.w3c-valid-css {
background: url(../images/tickle_blue.gif) no-repeat 10px 1px;
color: #333;
}
#nav-and-credits a.footer-rss {
background: url(../images/tickle_orange.gif) no-repeat 10px 1px;
color: #333;
}
/* Footer Menu */
#footer #footer .moduletable_menu ul {
margin: 0;
padding: 0;
width: 485px;
height: 20px;
}
#footer .moduletable_menu li {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
padding-right: 10px;
}
#footer .moduletable_menu li a:link,
#footer .moduletable_menu li a:visited {
text-decoration: none;
font: normal 1em Arial, serif;
padding: 2px 2.5px 2px 2.5px;
}
/* Credits */
div#credits {
width: 250px;
height: 30px;
font: normal 12px Arial, serif;
color: #fff;
position: absolute;
top: 25px;
left: 25px;
}
div#credits div {
color: #E4F5FF;
text-indent: 12px;
}
div#credits a {
color: #fff;
text-decoration: underline;
}
#modulemenu {
display: none;
}
.module #modulemenu {
display: block;
}
.moduletable .inputbox {
width: 96%;
margin: 5px 0;
}
.inputbox {
margin: 0;
padding: 0;
vertical-align: middle;
border: 1px solid #F2EFE1;
padding: 4px 0 4px 5px;
}
input.button {
border: none;
height: 26px;
line-height: 23px;
padding: 0px 17px 4px;
margin-top: 7px;
margin-bottom: 7px;
border-left: 1px solid #E9E5DE;
border-right: 1px solid #E9E5DE;
}
/* Configurable Sidebars */
/* Sidebar on right*/
body.scheme_2 #content {
display: inline;
float: left;
width: 752px;
margin-top: 25px;
border: 1px solid #E9E5DE;
}
body.scheme_1 #content {
margin-top: 25px;
border: 1px solid #E9E5DE;
float: left;
}
body.scheme_2 #right {
float: right;
width: 195px;
display: inline;
margin-top: 25px;
margin-left: 10px;
}
/* Sidebar on Left*/
body.scheme_2 #left {
float: left;
width: 195px;
display: inline;
margin-top: 25px;
margin-left: 0px;
clear: both;
}
body.scheme_2 #content.second-in-scheme {
margin-left: 10px;
}
/*right left content*/
body.scheme_3 #right.first-in-scheme {
margin-left: 0px;
}
body.scheme_3 #left.second-in-scheme {
margin-left: 10px;
clear: none;
}
/*content-right-left*/
.scheme_3 #content.first-in-scheme {
margin-left: 0px;
}
body.scheme_3 #right.second-in-scheme {
margin-left: 10px;
}
body.scheme_3 #left.third-in-scheme {
margin-left: 10px;
margin-right: 0;
}
/*right-content*/
body.scheme_2 #right.first-in-scheme {
float: left;
margin-left: 0
}
body.scheme_2 #content.second-in-scheme {
float: right;
margin-left: 10px;
margin-right: 0;
}
/*content-left*/
body.scheme_2 #left.second-in-scheme {
margin-left: 10px;
}
/* Sidebar on Left and right*/
body.scheme_3 #left {
float: left;
width: 195px;
display: inline;
margin-top: 25px;
clear: left;
}
body.scheme_3 #content {
display: inline;
float: left;
width: 548px;
margin-top: 25px;
border: 1px solid #E9E5DE;
margin-left: 10px;
}
body.scheme_3 #right {
float: left;
width: 195px;
display: inline;
margin-top: 25px;
margin-left: 10px;
}
/*sidebar navigation*/
#left .sidenav ul,
#right .sidenav ul,
#left .moduletable_menu ul,
#right .moduletable_menu ul, {
list-style: none;
padding: 0 0px 0 0;
}
#left .sidenav li,
#right .sidenav li,
#left .moduletable_menu li,
#right .moduletable_menu li {
border-bottom:1px solid #F5F2E5;
list-style: none;
padding: 0;
margin: 0 -10px;
vertical-align: middle;
}
#left .sidenav ul li img,
#right .sidenav ul li img,
#left .moduletable_menu ul li img,
#right .moduletable_menu ul li img {
float: left;
vertical-align: middle;
}
#left .sidenav ul li a:link,
#left .moduletable_menu ul li a:link,
#left .sidenav ul li a:visited,
#left .moduletable_menu ul li a:visited,
#right .sidenav ul li a:link,
#right .moduletable_menu ul li a:link,
#right .sidenav ul li a:visited,
#right .moduletable_menu ul li a:visited {
margin: 0;
padding: 0;
color: black;
line-height: 28px;
display: block;
font-size: 1em;
background: url(../images/menu-left-bullet.gif) no-repeat 10px 50%;
padding-left: 30px;
}
#left .sidenav ul li a:hover,
#left .moduletable_menu ul li a:hover,
#right .sidenav ul li a:hover,
#right .moduletable_menu ul li a:hover {
background: #FBFAF6 ../images/menu-left-bullet.gif) no-repeat 10px 50%;
text-decoration: none;
}
/*Modules Structure*/
div.moduletable form table br{
/* Fixex big gap inbetween login module inputs */
display: none;
}
div#right div.moduletable,
div#right div.moduletable_menu,
div#left div.moduletable_menu,
div#left div.moduletable_text,
div#right div.moduletable_text,
div#right div.moduletable-sfx,
div#left div.moduletable,
div#left div.moduletable-sfx {
border: 1px solid #E4DFD6;
width: 173px;
padding: 10px 10px 10px 10px;
font-size: 1em;
overflow: hidden;
margin-bottom: 10px;
}
#wrapper #main #left div.moduletable h3,
#wrapper #main #right div.moduletable h3,
#wrapper #main #left div.moduletable_menu h3,
#wrapper #main #right div.moduletable_menu h3,
#wrapper #main #left div.moduletable_text h3,
#wrapper #main #right div.moduletable_text h3,
#wrapper #main #left div.moduletable-sfx h3,
#wrapper #main #right div.moduletable-sfx h3 {
margin: 0px 0px 6px -10px;
width: 181px;
font-size: 140%;
line-height: 30px;
padding: 0 0 0 10px;
}
#wrapper #main #left div.h3-image h3,
#wrapper #main #right div.h3-image h3,
#wrapper #main #left div.h3-image-sfx h3,
#wrapper #main #right div.h3-image-sfx h3,
#wrapper #main #left div.h3-neutral h3,
#wrapper #main #right div.h3-neutral h3,
#wrapper #main #left div.h3-neutral-sfx h3,
#wrapper #main #right div.h3-neutral-sfx h3,
#wrapper #main #left div.h3-colorbg h3,
#wrapper #main #right div.h3-colorbg h3,
#wrapper #main #left div.h3-colorbg-sfx h3,
#wrapper #main #right div.h3-colorbg-sfx h3 {
margin: 0 0px 10px -16px;
width: 191px;
margin-top: -10px;
border: 1px solid #ffffff;
font-size: 140%;
line-height: 34px;
padding: 0;
text-indent: 4px;
color: #fff!important;
padding-left: 12px;
background-repeat: no-repeat;
background-position: top;
}
#left div.h3-neutral h3,
#right div.h3-neutral h3,
#left div.h3-neutral-sfx h3,
#right div.h3-neutral-sfx h3 {
background-image: url(../images/neutral-module-top.png);
}
#left div.h3-colorbg h3,
#right div.h3-colorbg h3,
#left div.h3-colorbg-sfx h3,
#right div.h3-colorbg-sfx h3 {
background-color: #BB533E;
border: none;
}
p.smallmodule {
font-size: 0.9em;
line-height: 140%;
word-spacing: -0.5px;
}
.blog-rss {
background: transparent url(../images/rssicon.png) no-repeat scroll 99% 45%;
padding-right: 60px;
}
/* Module Background Styles */
div.brown-bg {
background-color: #F9F8F2;
}
div.topgrad {
background-image: url(../images/top-grad.png);
background-repeat: repeat-x;
background-position: top;
background-color: #fff;
}
div.botgrad {
background-image: url(../images/bot-grad.png);
background-repeat: repeat-x;
background-position: bottom;
}
#left div.moduletable-sfx.nopadding {
padding: 0;
width: auto;
margin-bottom: 10px;
}
/*Options Bar */
#mainbody .padding {
padding: 10px 17px
}
#color-text {
width: 255px;
height: 36px;
margin: -23px 0 0 715px;
border: 0px solid red;
position: absolute;
}
#color-text a {
float: left;
display: inline;
margin-left: 1px;
}
#color-text span {
float: left;
line-height: 33px;
font-weight: bold;
padding-left: 15px;
font-size: 12px;
}
#color-icons {
position: relative;
margin-top: 7px;
right: -4px;
position: relative;
}
a.blue-color,
a.peachy-color,
a.brown-color,
a.green-color,
a.txt-default,
a.txt-larger,
a.txt-smaller {
height: 19px;
width: 19px;
display: block;
text-indent: -9999px;
}
a.txt-default {
background: url(../images/txt-standard-2.gif) no-repeat 0 0;
}
a.txt-larger {
background: url(../images/txt-big-2.gif) no-repeat;
}
a.txt-smaller {
background: url(../images/txt-small-2.gif) no-repeat;
}
a.blue-color {
background: url(../images/color-blue.gif) no-repeat;
}
a.peachy-color {
background: url(../images/color-peachy.gif) no-repeat;
}
a.brown-color {
background: url(../images/color-brown.gif) no-repeat;
}
a.green-color {
background: url(../images/color-green.gif) no-repeat;
}
a.blue-color:active,
a.blue-color:hover,
a.peachy-color:active,
a.peachy-color:hover,
a.brown-color:active,
a.brown-color:hover,
a.green-color:hover,
a.green-color:active {
background-position: 0 -19px;
}
body.large-text a.txt-larger {
background: url(../images/txt-big-2.gif) no-repeat 0 0;
}
body.medium-text a.txt-default {
background: url(../images/txt-standard-2.gif) no-repeat 0 0;
}
body.smaller-text a.txt-smaller {
background: url(../images/txt-small-2.gif) no-repeat 0 0;
}
body.smaller-text a.txt-smaller,
body.large-text a.txt-larger,
body.medium-text a.txt-default {
background-position: 0 -19px;
}
|
|
#13
08-02-2010, 04:53 PM
| |||
| |||
| درس روعة أخوي فيستا بس ليه أكذب عليك واقول لك فهمت بكذا اكون كذبت على نفسي صراحة فهمت اللست لكن ابي اطبق الملف اللي بالمرفقات كامل وكان ودي اعرف اسويها كاملة  اسمح لي اخي فيستا بتأجيل تطبيق هذا الدرس كامل لانه صعب علي شوي وما فهمته للامانه ابي اكمل الدروس اللي بعده وارجع له بعدين |
|
#15
11-02-2010, 12:59 AM
| ||||
| ||||
| اقتباس:
وتمر على الكود اكثر من مرة وراح تفهم واى نقطه اسأل وابشر بسعدك تحياتى
|
|
| العلامات المرجعية |
| |
 مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0 |
| |
« مناقشــة الدرس السادس كيفية عمل تخطيط لصفحة layout
|
مناقشة الدرس التاسع شرح التعامل مع الازرار والمؤشرات »
| أدوات الموضوع | |
| انواع عرض الموضوع | |
العرض العادي
|
|
|
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| [الدرس السابع]شرح كيفية عمل القوائم المتحركة والمتعددة css menus | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 1 | 02-02-2010 01:18 AM |
| مناقشة الدرس السابع ..!! | الوليد الراشدي | دورة تعلم لغة الهتمل HTML | 18 | 29-08-2008 04:38 PM |
| الدرس الثامن : القوائم في لغة الــ html | الوليد الراشدي | دورة تعلم لغة الهتمل HTML | 0 | 12-08-2008 02:51 PM |
| مناقشة الدرس السابع :: الحلقة الأولي . | المحترف | دورة ادارة السيرفرات (المستوى الأول) | 12 | 04-07-2008 12:24 AM |
