فلويد
ملصق أصلي- 7 أبريل 2005
- مونتيري المكسيك
- 27 مارس 2006
لدي اثنين من divs. أحدهما له ارتفاع ثابت وأريد الآخر أن يملأ المساحة الرأسية المتبقية على النافذة. إذا قمت بضبط ارتفاع div الأخير على 100٪ ، فسوف يجعله بنفس ارتفاع النافذة ، لكنني أريده أن يكون ارتفاع النافذة مطروحًا منه ارتفاع div الأول.
هذا هو الكود الذي أستخدمه:
الكود:
Vertical div test body { margin:0; padding:0; height:100%; } #div1 { height: 100px; background-color: blue; } #div2 { height: 100%; background-color: green; } لقد قمت أيضًا بتضمين بعض الصور التي توضح ما أريد القيام به وما تمكنت من القيام به حتى الآن. شكرا لك مقدما
المرفقات
-
xa.gif'file-meta '> 2.6 كيلوبايت · المشاهدات: 10،076 -
xb.gif'file-meta '> 3 كيلوبايت · المشاهدات: 9،950
NoNameBrand
- 17 نوفمبر 2005
- هاليفاكس ، كندا
- 27 مارس 2006
خلاف ذلك ، لا يمكنني التفكير في طريقة تحصل فيها على ما تريد.
ستيف
- 13 أكتوبر 2004
- المملكة المتحدة
- 27 مارس 2006
محاولة:
وثيقة بدون عنوان
إلى
ب
ج
د
و
لقد خدعت عن طريق القيام بذلك في DW ، وإضافة بعض المحتوى إلى الطبقة الثانية ، ثم العبث بالكود - يحب DW أن يكون للأشياء بعض الحشو حول الحواف وعلى الرغم من أنه يمكنك تحديد الحوارات التي تريد طبقة لها تبدأ من 0 بكسل من الزاوية العلوية ، عليك أن تخبرها مرتين ، باستخدام طريقة العرض Code. كان علي على أي حال.
فلويد
ملصق أصلي- 7 أبريل 2005
- مونتيري المكسيك
- 27 مارس 2006
NoNameBrand قال: لماذا لا تعشش الأول داخل الثاني؟
خلاف ذلك ، لا يمكنني التفكير في طريقة تحصل فيها على ما تريد.
شكرًا ، هذا يعمل بشكل مرئي ، لكن div الثاني سيكون حاوية لهذا التخطيط ، لذلك ما زلت بحاجة إليه للحصول على الأبعاد المناسبة حتى يمكن لمحتوياته أن ترثها.
لذلك ربما يكون الأمر ببساطة غير ممكن؟ ربما سأحتاج إلى استخدام القليل من جافا سكريبت لجعله يعمل؟
قال شتيفيب: جرب:شكرًا ، لكنني لم أتمكن من تشغيله ، ما المتصفح الذي استخدمته؟
فلويد
ملصق أصلي- 7 أبريل 2005
- مونتيري المكسيك
- 27 مارس 2006
حسنًا ، ها هي صورة من هدفي النهائي. لقد كنت أفعل ذلك تدريجيًا حتى الآن ، لذا ربما تكون المشكلة هي مقاربتي الأولية. إذن كيف ستتعاملون مع هذا (أنا فقط بحاجة إلى أفكار)؟ هل ستستخدم css خالصًا ، أم أنك ستستسلم للجداول أو الإطارات؟
المرفقات
ستيف
- 13 أكتوبر 2004
- المملكة المتحدة
- 27 مارس 2006
الشيء الذي يجب أن تتلاعب به هو هذا:
# Layer1 {
الموقف: مطلق.
اليسار: 0 بكسل ؛
أعلى: 0 بكسل ؛
العرض: 100٪؛
الارتفاع: 180 بكسل ؛
مؤشر z: 1 ؛
لون الخلفية: # 99CCFF ؛
}
قم بتقسيم صفحتك على قطعة من الورق حتى تحصل على المواضع الصحيحة ، وهذا سيعطيك موضع الركن العلوي LH من كل طبقة. سيحدد ارتفاع الطبقة 1 موضع البداية للطبقة 2 - في هذه الحالة يجب أن تحتوي الطبقة 2 علىأعلى: 180 بكسل ؛سطر من التعليمات البرمجية.
إذا كنت تريد الطبقات الثلاث كما تظهر في آخر مشاركة لك ، فإن الطبقة اليسرى ستكون:
# Layer1 {
الموقف: مطلق.
اليسار: 0 بكسل ؛
أعلى: 0 بكسل ؛
العرض: 200 بكسل ؛
الارتفاع: 100٪؛
مؤشر z: 1 ؛
لون الخلفية: # 336699 ؛
}
وستكون الطبقة العليا RH:
# Layer1 {
الموقف: مطلق.
اليسار: 200 بكسل ؛
أعلى: 0 بكسل ؛
العرض: 100٪؛
الارتفاع: 180 بكسل ؛
مؤشر z: 2 ؛
لون الخلفية: # 33CCFF ؛
}
والطبقة الثالثة لملء باقي النافذة (مهما تم تغيير حجمها) يجب أن تكون مثل:
# Layer1 {
الموقف: مطلق.
اليسار: 200 بكسل ؛
أعلى: 180 بكسل ؛
العرض: 100٪؛
الارتفاع: 100٪؛
مؤشر z: 3 ؛
لون الخلفية: # 99CCFF ؛
}
من الأفضل وضع بعض المحتوى الوهمي في كل طبقة إذا كنت تستخدم Dreamweaver ، في حالة تقلص الطبقة إلى لا شيء في عرض الصفحة ، ومن هنا جاءت 'أ ، ب ، ج ، إلخ' في html الأصلي أعلاه.
ملاحظة أنا لست خبيرا ، قد أكون مخطئا ولكن آمل أن يساعد. ما يمكنني قوله هو أن الجزء الأول من الكود الخاص بي يبدو أنه يعمل. أنا شخصياً لن أعشش الطبقات إذا كان بإمكاني المساعدة قليلاً ، لكن هذا أنا فقط - أنا فقط أقوم بعمل بسيط. ن
NoNameBrand
- 17 نوفمبر 2005
- هاليفاكس ، كندا
- 27 مارس 2006
هذا ما سأفعله:
الشفرة:
فو تعتقد!
-
- 14 يونيو 2003
-
-
- MD / VA / DC
- 27 مارس 2006
مفهوم ...
تحقق من FlashObject وفي التنزيل يوجد رمز لإنشاء ملء شاشة div .. ربما يمكن تخصيصه بالطريقة التي تريدها.
http://blog.deconcept.com/flashobject/ فلويد
ملصق أصلي -
- 7 أبريل 2005
-
-
- مونتيري المكسيك
- 28 مارس 2006
شكرًا على كل المساعدة يا رفاق ، لكنني أدركت للتو أن التصميم الدقيق الذي أريده من المستحيل تحقيقه من خلال مجموعة من العروض / الارتفاعات والنسب المئوية الثابتة. أعدت كتابته باستخدام النسب المئوية فقط وهو يعمل الآن. إذا كنت مهتمًا بالترميز ، فيرجى إبلاغي بذلك وسأقوم بنشره. ستيف
-
- 13 أكتوبر 2004
-
-
- المملكة المتحدة
- 28 مارس 2006
قال فلويد: إذا كنت مهتمًا بالترميز ، فأعلمني بذلك وسأرسله.
أود إلقاء نظرة إذا كان لديك الوقت للنشر مرة أخرى.
قال NoNameBrand: ما هذه الأشياء 'الطبقات'؟ هل هذا Dreamweaver-esque لـ 'تحطيم الأشياء بجودة حقيقية'؟
حسنًا ، لا أعرف شيئًا عن 'الأشياء المعطلة' ولكني أعتقد أنك شعرت بأني لست من مستخدمي CSS - الطبقات هي اسم مناسب من قبل DW للأشياء التي أعتقد أنه يجب أن يطلق عليها 'عناصر CSS الموضوعة' - و أعتقد أنهم يطلقون عليهم ذلك لجعل الأشخاص مثلي من خلفية DTP / Photoshop يشعرون براحة أكبر قليلاً. بالنظر إلى الكود الذي قمت بتضمينه في رسالتك NoNameBrand ، فهو أكثر أناقة بكثير من الرمز الخاص بي - سأضطر إلى الحصول على طعنة في الحصول على علامة div حقًا. شكرا على البروتوكول الاختياري والردود. ن NoNameBrand
-
- 17 نوفمبر 2005
-
-
- هاليفاكس ، كندا
- 28 مارس 2006
قال stevep: حسنًا ، لا أعرف شيئًا عن 'الأشياء المكسورة' ولكني أعتقد أنك سوسيت بأنني لست من CSS boff - الطبقات هي اسم مناسب أعطته DW للأشياء التي أعتقد أنه يجب أن يطلق عليها 'عناصر CSS الموضوعة' '
لديهم أيضًا تكديس z-indexs عليهم - مما يضع الأشياء من الأمام إلى الخلف على الصفحة. لقد رأيت طبقات DW قبل ذلك كسر موقعًا تمامًا ، لكن بخلاف ذلك لم يتعرض لها كثيرًا (كان ذلك كافيًا ، حقًا).
سأضطر إلى الحصول على طعنة في الحصول على رأسي حقًا حول علامة div.
A مجرد كتلة اعتباطية - لا تعني أي شيء من الناحية المعنوية ، بالطريقة التي أيفعل (فقرة من النص). أهي نفس الفكرة ، ولكن للأشياء المضمنة (مثل ملف علامة ، ولكن مرة أخرى ، دلالية مجانية).
أسهل شيء يمكنك فعله لتعلم هذه الأشياء هو التوقف عن استخدام Dreamweaver. أقوم بتصميم المواقع الخاصة بي في Photoshop ثم حفظ العناصر الرسومية التي أريدها ، جنبًا إلى جنب مع تدوين رموز الألوان وبعض قياسات البكسل التقريبية لأغراض المحاذاة ، ثم أقوم بترميز الموقع في TextWrangler أو VIM. فلويد
ملصق أصلي -
- 7 أبريل 2005
-
-
- مونتيري المكسيك
- 28 مارس 2006
قال stevep: أود إلقاء نظرة إذا كان لديك الوقت للنشر مرة أخرى.
ها هو ، هناك القليل من اللغة الإسبانية هناك ، آمل ألا يكون الأمر محيرًا للغاية:
الشفرة:مخطط HTML الكبير {الارتفاع: 100٪ ؛ } body {margin: 0؛ حشوة: 0؛ الارتفاع: 100٪؛ العرض: 100٪؛ } #left، # right {float: left؛ } # اليسار {الارتفاع: 100٪؛ لون الخلفية: برتقالي ؛ العرض: 10٪؛ } # حق {ارتفاع: 100٪؛ الموقف: نسبي ؛ العرض: 90٪؛ } #top {background-color: blue؛ الارتفاع: 10٪؛ } #fotos {position: النسبي؛ الارتفاع: 90٪؛ } #foto_sup_izq، #foto_sup_der، #foto_inf_izq، #foto_inf_der {height: 50٪؛ العرض: 50٪؛ تجاوز: تلقائي ؛ الموقف: مطلق. } #foto_sup_izq، #foto_sup_der {top: 0؛ } #foto_sup_der، #foto_inf_der {يسار: 50٪؛ } #foto_inf_izq، #foto_inf_der {top: 50٪؛ } 
المرفقات
المشاركات الشعبية