كيفية توسيط التصميم بـ CSS ؟

منصور الدويغري · 15-06-2008, 03:16 AM

السلام عليكم

كيف يمكن عمل التالي /

اي توسيط التصميم باختلاف الشاشات ليس من اليمين و اليسار

بل من اعلى و اسفل

شكراً للمساعده مقدماً

مودتي

owner · 15-06-2008, 11:37 AM

اهلا ..

جرب هذي الخصائص .

إقتباس:

.ff {
background-color: #808080;
height: 20%;
margin-top: 30%;
}
body {
margin: 0px;
padding: 0px;
}

لكن ما اعتقد راح يضبط معاك اذا كان المحتوى كبير . الفكرة تكمن في انك تستخدم المارجن فوق وتحت بالنسبة المئوية حتى يكون في الوسط مهما تغيرت الشاشات

الإمبراطور وحيد · 15-06-2008, 12:00 PM

السلام عليكم
تحية اخوي owner

لماذا لاتنفع الخاصية vertical-align لذلك ؟ وهل توجد طريقة أكثر فاعلية ؟

توجد طريقة مضمونة باستخدام الجداول فقط ..

باستخدام جدول كالتالي :

كود HTML:

<div align="center"> <table border="0" cellpadding="4" style="border-collapse: collapse" width="100%" id="table1" height="100%"> <tr> <td align="center" width="100%" height="100%">في الوسط مهما كان</td> </tr> </table> </div>

لكني افضل الطبقات عوضا عن الجداول ، فهل توجد طريقة ؟

وفقكم الله

السلام عليكم .

منصور الدويغري · 15-06-2008, 12:32 PM

شاهدو هذا الموقع

Pack Your Bag . Net

انا بالضبط اريد جعل التصميم في المنتصف مهما كان ..

سأجرب ما اسلفتم و اوافيكم بالخبر

شكراً مقدما

الإمبراطور وحيد · 15-06-2008, 12:44 PM

السلام عليكم
اخي Garebooo
دخلت الموقع لكنه ليس في المنتصف !!

منصور الدويغري · 16-06-2008, 01:20 PM

نعم عزيزي وحيد هذا الموقع الذي اردت توسيطه

منصور الدويغري · 16-06-2008, 01:23 PM

جربت الكودين لكنها لم تنجح للاسف

.

اي فكرة

وشكراً مره اخرى على المساعدة

OmanSecurity · 16-06-2008, 02:05 PM

حط الـ margin
للـ top و الـ bottom لـ auto

الإمبراطور وحيد · 16-06-2008, 04:31 PM

إقتباس:

المشاركة الأصلية بواسطة OmanSecurity

حط الـ margin
للـ top و الـ bottom لـ auto

السلام عليكم

اخي تمت تجربتها لكن للأسف لاتعمل ...

يتم التوسيط في منتصف الصفحة افقيا فقط وليس عاموديا
لك تحياتي

الإمبراطور وحيد · 16-06-2008, 04:33 PM

إقتباس:

المشاركة الأصلية بواسطة Garebooo

جربت الكودين لكنها لم تنجح للاسف

.

اي فكرة

وشكراً مره اخرى على المساعدة

السلام عليكم
تاكد من استخدامك للجدول بشكل كامل
وجربها على صفحة اخرى حتى تتأكد

لانها تعمل لدي بشكل صحيح
تحياتي لك

الإمبراطور وحيد · 16-06-2008, 04:40 PM

السلام عليكم
عذرا اخي تمت تجربة الكود وهو لايعمل على المتصفح فاير فوكس إلا إذا تم تحديد الارتفاع بالبكسل وليس النسبة المئوية

لكن يعمل بشكل سليم على الإكسبلور

سلامي لك وللجميع

owner · 16-06-2008, 07:41 PM

إقتباس:

المشاركة الأصلية بواسطة الإمبراطور وحيد

السلام عليكم
عذرا اخي تمت تجربة الكود وهو لايعمل على المتصفح فاير فوكس إلا إذا تم تحديد الارتفاع بالبكسل وليس النسبة المئوية

لكن يعمل بشكل سليم على الإكسبلور

سلامي لك وللجميع

جرب تغيير ال height="100%" الى min-height="100%"

منصور الدويغري · 17-06-2008, 11:03 AM

لم يعمل !

انا اريد التوسيط ليس في الوسط center انما في الوسط middle

Pack Your Bag . Net

هذا الموقع ..

شكراً لكم

النحات · 18-06-2008, 06:32 PM

مش فاهم عليك !!

منصور الدويغري · 23-06-2008, 12:18 PM

التوسيط في منتصف الشاشه من اعلى و اسفل يا عزيزي

الصورة في الرد الاول قد توضح اكثر

مصطفى فرغلى · 23-06-2008, 06:17 PM

كود HTML:

body{
padding-top:10%;
height:100%;
padding-bottom:10%;
}

tech · 02:19 AM

السلام عليكم ورحمة اللة وبركاتة

جرب هذة الطريقة جيدة

كود HTML:

<center> <div>
conteny
</div> </center>

Abo-Ahmed · 03-07-2008, 03:44 AM

عزيزي جرب هذا

إقتباس:

margin: 0px auto; width: 765px;

منصور الدويغري · 03-07-2008, 05:02 AM

احبتي

كل الاكواد تقوم بتوسيط التصميم بمعنى center

انا اريد توسيطه بمعنى middle

شكراً لكم على هذا التفاعل و المساعده

وبانتظاركم

بوركتم

Sniper4dz · 03-07-2008, 09:51 AM

جرب الكود

إقتباس:

<table width=100% height=100%>
<tr><td width=100% height=100% style="vertical-align: middle;text-align:center;">
المضمون
</td></tr>
</table>

إقتباس:

.main {
vertical-align: middle;
text-align:center;
}

أظن أنه سينجح

منصور الدويغري · 03-07-2008, 01:14 PM

لا ينجح للاسف

شكراً لك

Sniper4dz · 03-07-2008, 02:11 PM

شوف

إضغط هنا: التصميم في وسط الصفحة

Flasher · 04-07-2008, 08:16 AM

إقتباس:

المشاركة الأصلية بواسطة Garebooo

احبتي

كل الاكواد تقوم بتوسيط التصميم بمعنى center

انا اريد توسيطه بمعنى middle

شكراً لكم على هذا التفاعل و المساعده

وبانتظاركم

بوركتم

CSS vertical center using float and clear

styl3rs · 05-07-2008, 05:41 PM

إقتباس:

المشاركة الأصلية بواسطة Garebooo

جربت الكودين لكنها لم تنجح للاسف

.

اي فكرة

وشكراً مره اخرى على المساعدة

هذا كود الصفحة

كود:

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"><head>



<meta content="text/html; charset=windows-1256" http-equiv="Content-Type"/>
<script type="text/javascript" language="javascript" src="images/fade.js"/><style type="text/css">
.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;}
</style>
<link type="text/css" rel="stylesheet" href="images/style.css"/>
<title>Pack Your Bag . Net</title>
<style charset="utf-8" type="text/css">/* See license.txt for terms of usage */

.firebugHighlight {
    z-index: 2147483647;
    position: absolute;
    background-color: #3875d7;
}

.firebugLayoutBoxParent {
    z-index: 2147483647;
    position: absolute;
    background-color: transparent;
    border-right: 1px dashed #BBBBBB;
    border-bottom: 1px dashed #BBBBBB;
}

.firebugRulerH {
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 14px;
    background: url(chrome://firebug/skin/rulerH.png) repeat-x;
    border-top: 1px solid #BBBBBB;
    border-right: 1px dashed #BBBBBB;
    border-bottom: 1px solid #000000;
}

.firebugRulerV {
    position: absolute;
    top: 0;
    left: -15px;
    width: 14px;
    height: 100%;
    background: url(chrome://firebug/skin/rulerV.png) repeat-y;
    border-left: 1px solid #BBBBBB;
    border-right: 1px solid #000000;
    border-bottom: 1px dashed #BBBBBB;
}

.overflowRulerX > .firebugRulerV {
    left: 0;
}

.overflowRulerY > .firebugRulerH {
    top: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.firebugLayoutBoxOffset {
    z-index: 2147483647;
    position: absolute;
    opacity: 0.8;
}

.firebugLayoutBoxMargin {
    background-color: #EDFF64;
}

.firebugLayoutBoxBorder {
    background-color: #666666;
}

.firebugLayoutBoxPadding {
    background-color: SlateBlue;
}

.firebugLayoutBoxContent {
    background-color: SkyBlue;
}

/*.firebugHighlightGroup .firebugLayoutBox {
    background-color: transparent;
}

.firebugHighlightBox {
    background-color: Blue !important;
}*/

.firebugLayoutLine {
    z-index: 2147483647;
    background-color: #000000;
    opacity: 0.4;
}

.firebugLayoutLineLeft,
.firebugLayoutLineRight {
    position: fixed;
    width: 1px;
    height: 100%;
}

.firebugLayoutLineTop,
.firebugLayoutLineBottom {
    position: absolute;
    width: 100%;
    height: 1px;
}

.firebugLayoutLineTop {
    margin-top: -1px;
    border-top: 1px solid #999999;
}

.firebugLayoutLineRight {
    border-right: 1px solid #999999;
}

.firebugLayoutLineBottom {
    border-bottom: 1px solid #999999;
}

.firebugLayoutLineLeft {
    margin-left: -1px;
    border-left: 1px solid #999999;
}
</style></head><body style="margin: 0px;">

<br/><br/><br/><br/><br/><br/><br/><br/>

<table cellspacing="0" cellpadding="0" style="margin: 0px auto; width: 100%; text-align: center;">
        <tbody><tr>
                <td style="width: 153px;"><a href=""><img class="gradualfader" src="images/arabic.png" alt="اللغة العربية" style="opacity: 0.4;"/></a></td>
                <td rowspan="3" style="width: 310px; text-align: left; background-color: rgb(255, 116, 0);"><img alt="" src="images/s_logo.png"/></td>
                <td rowspan="3" style="width: 100%; background-image: url(images/m_bg.png);"/>
                <td rowspan="3" style="width: 300px; text-align: left; background-color: rgb(255, 116, 0);"><img alt="" src="images/logo.png"/></td>
                <td style="width: 153px;"><img class="gradualfader" src="images/2.png" alt="فرنسا - Franc" style="opacity: 0.4;"/></td>
        </tr>
        <tr>
                <td style="width: 153px;"><img class="gradualfader" src="images/7.png" alt="ايطاليا - Italy" style="opacity: 0.4;"/></td>
                <td style="width: 153px;"><img class="gradualfader" src="images/10.png" alt="تركيا - Turkey" style="opacity: 0.4;"/></td>
        </tr>
        <tr>
                <td style="width: 153px;"><img class="gradualfader" src="images/11.png" alt="كروز - Croz" style="opacity: 0.4;"/></td>
                <td style="width: 153px;"><a href="#"><img class="gradualfader" src="images/english.png" alt="Engliah Language - Soon" style="opacity: 0.4;"/></a></td>
        </tr>
</tbody></table>
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
</body></html>

وكما ترى فإن التوسيط ليس إلا

كود:

<br/><br/><br/><br/><br/><br/><br/><br/>

وإن أردت التوسيط بإستعمال css

هذا الكود الخاص به

كود:

margin: 10% auto;

منصور الدويغري · 05-07-2008, 09:42 PM

Sniper4dz

Flasher

styl3rs

شكراً للحلول سأقوم بتجربتها و اخباركم بالنتيجة

مودتي

المواضيع المشابهه
الموضوع	كاتب الموضوع	القسم	الردود	آخر مشاركة
خاص - لـعملاء مدينة التصميم	alserb	سوالف الاستضافة	2	05-02-2007 10:52 PM
أرغب في كيفية تنشيط الاعضاء اللي على قائمة الانتظار في النسخه 3.5.4	فارس جده	الإصلاح والصيانة	6	11-06-2006 05:18 PM
ماهو التصميم لدى المهندس ؟	bassem	الويب والويب 2.0 والـ Semantic Web	24	22-04-2006 09:51 PM
اقوى عروض التصميم ،، نضمن تميزنا من هذا الموضوع	صُهيب	عروض البيع وطلبات الشراء في البرمجة والتصميم وبناء المحتوى وتبادل الاعلانات	6	02-12-2004 11:18 AM
سؤال : كيفية توسيط التوقيع في الـ vB3 CR4	الأخ	الإصلاح والصيانة	2	03-03-2004 03:05 PM

أدوات الموضوع
مشاهدة نسخة مطبوعة إرسال هذه الصفحة