CSS: من السائل إلى ثابت لدقة أصغر

https://stackoverflow.com/questions/4318635

29-09-2019
|

سؤال

الكود أدناه عبارة عن صفحة ويب مصغرة تحتوي على 3 عناصر: على اليسار: هدف كرة قدم + كرة الكرة: مقطع فيديو على اليمين: صورة هاتف محمول

عرض كل شيء في قرار مثل Mine 1440 × 900 ، لا توجد مشكلة ، كل ما يظهر على ما يرام. ولكن عندما تستخدم دقة أقل واسعة (أو تقوم بإعادة حجم نافذة Navigator إلى عرض أقل) ، فإن صورة الهاتف المحمول تتخلف عن الفيديو (أو الفيديو الموجود فوقه).

لإصلاح هذا ، ما أحاول القيام به هو: عند الوصول إلى 1280 بكسل من العرض و 830 بكسل من الارتفاع ، وهو دقة الحد (أقل من هذا ، تسير الأمور على ما يرام) أحاول إصلاح جميع العناصر (لا شيء يطفو بعد الآن) ، لذلك تظهر أشرطة التمرير ، يمكن للزائر استخدامها ، ولا يوجد عنصر تحت أي شيء.

كيف يمكن تحقيق هذا ؟؟ من فضلك أعطني يدها ، لقد مرت ساعات طويلة وسأذهب إلى الجوز.

محاولتي الأخيرة: إضافة إلى علامة الجسم Min-Width: 1280px ؛

لكن لا توجد نتائج :( أتساءل عما إذا كان هذا يستخدم بشكل صحيح وما إذا كان يمكن أن يكون حلاً .. ما رأيك؟

PD: الرجاء تنزيل الصور هنا:http://aracelid.110mb.com/myfolder.zip

شكرًا جزيلاً

<head> 

<style type="text/css"> 
#navigation {
}

#navigation ul, #navigation ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}


#navigation ul {
    padding: 5px 15px; 
    text-align: left;
}

#navigation ul li {
    display: inline;

    margin-right: 0px;
    padding-top:10px;
}

#navigation ul li a div {
    background: url("myfolder/boton_ROLLOUT_08.png") no-repeat;

    padding: 10px 0.5em;

    color: #FFFFFF;
    text-decoration: none;
    font-size:12px;
}

#navigation ul li a div:hover {
    background: url("myfolder/boton_ROLLOVER_08.png") no-repeat;

    padding: 10px 0.5em;

    color:#FFFFFF;
    text-decoration: none;
    font-size:12px;
}     
</style>

</head> 

<body style="background-color:#E7E7E7;font-family: Arial, Helvetica, sans-serif;"> 

<div style="z-index:-1;position:absolute;left:0;top:30%;height:50%;width:100%;float:none">

    <div style="position:absolute;top:100px;left:0px;"><img src="myfolder/goal.jpg"></div>
        <div style="position:absolute;top:-90px;right:0px"><img src="myfolder/sonyx10_06.jpg"></div>

</div>


<div style="position:absolute;top:15%;left:20%">
 <div id="navigation" style="z-index:1;position:relative;top:-18px;left:0px"> 
    <ul> 
        <li><a href="#" id="t1" style="color:#FFFFFF;text-decoration:none;" ><div id="t1" style="float:left;width:140px;text-align:center;">tab1&nbsp;&nbsp;</div></a></li> 
        <li><a href="#" id="t2" style="color:#FFFFFF;text-decoration:none;"><div id="t2" style="float:left;width:140px;text-align:center">tab2&nbsp;</div></a></li> 
        <li><a href="#" id="t3" style="color:#FFFFFF;text-decoration:none;"><div id="t3" style="float:left;width:140px;text-align:center">tab3&nbsp;&nbsp;&nbsp;</div></a></li> 
    </ul> 

</div>

 <div id="video" style="z-index:50;text-align:left;float:left;width:726px;height:491px;padding:0px;margin-top:-20px">


            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="710" height="480" id="index" align="middle"> 
                <param name="movie" value="http://elandroidelibre.movilgol.mobi/video.swf" /> 
                <param name="quality" value="high" /> 
                <param name="bgcolor" value="#ffffff" /> 
                <param name="play" value="true" /> 
                <param name="loop" value="true" /> 
                <param name="wmode" value="window" /> 
                <param name="scale" value="showall" /> 
                <param name="menu" value="true" /> 
                <param name="devicefont" value="false" /> 
                <param name="salign" value="" /> 
                <param name="allowScriptAccess" value="sameDomain" /> 
                <!--[if !IE]>--> 
                <object type="application/x-shockwave-flash" data="http://elandroidelibre.movilgol.mobi/video.swf" width="710" height="480"> 
                    <param name="movie" value="http://elandroidelibre.movilgol.mobi/video.swf" /> 
                    <param name="quality" value="high" /> 
                    <param name="bgcolor" value="#ffffff" /> 
                    <param name="play" value="true" /> 
                    <param name="loop" value="true" /> 
                    <param name="wmode" value="window" /> 
                    <param name="scale" value="showall" /> 
                    <param name="menu" value="true" /> 
                    <param name="devicefont" value="false" /> 
                    <param name="salign" value="" /> 
                    <param name="allowScriptAccess" value="sameDomain" /> 
                <!--<![endif]--> 
                    <a href="http://www.adobe.com/go/getflash"> 
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player" /> 
                    </a> 
                <!--[if !IE]>--> 
                </object> 
                <!--<![endif]--> 
            </object> 


</div>

</div>



</body>

المحلول

إعطاء العنصر المحتوي min-width و min-height. في المرة القادمة ، يرجى تجريد الكود الخاص بك إلى الحد الأدنى.

بعض النصائح

لا تستخدم سمات النمط. تريد فصل المحتوى الخاص بك عن العرض التقديمي. لهذا السبب تستخدم CSS. لا تخلط النمط مرة أخرى هناك.
تذكر: يتم وضع المحتوى المطلق في وضعه ضد أقرب عنصر من الوالدين مع وضع مختلف عن المواقع static. لا يمكن تعيين Z-index إلا على عناصر ذات وضع مختلف عن static.

لقد قمت ببعض إعادة الكتابة لأنها كانت كبيرة جدًا في الفوضى: (قمت بتغيير الفيديو إلى جزء أحمر لأنه كان مشتتًا جدًا :))

   <head> 

    <style type="text/css"> 

        body{
            background-color:#E7E7E7;
            font-family: Arial, Helvetica, sans-serif;
            position:relative; 
            min-width:1280px;
            min-height:830px;
        }

        #navigation { 
            list-style: none;
            margin: 70px 0px 0px 0px;
            padding: 0;
            text-align:center;
        }

        #navigation li {
            display: inline-block;
        }

        #navigation a {
            display: block;
            width: 140px;
            height: 15px;
            background: url("myfolder/boton_ROLLOUT_08.png") no-repeat;
            padding: 10px 0.5em;
            color: #FFFFFF;
            text-decoration: none;
            font-size:12px;
            text-align: center;
        }

        #navigation a:hover {
            background: url("myfolder/boton_ROLLOVER_08.png") no-repeat;
        }

        #container{
            position: relative;
        }

        #goal, #gsm {
            top: 100px;
            position:absolute;
        }

        #goal {
            left:0px;
        }

        #gsm {
            right:0px;
        }

        #video {
            position:relative; z-index: 1;
            width:726px;height:491px;
            background: #F00;
            margin: 0px auto;
        }
    </style>

</head> 

<body> 

    <ul id="navigation"> 
        <li><a href="#" id="t1">tab1&nbsp;&nbsp;</a></li> 
        <li><a href="#" id="t2">tab2&nbsp;</a></li> 
        <li><a href="#" id="t3">tab3&nbsp;&nbsp;&nbsp;</a></li> 
    </ul>

    <div id="container">
        <img id="goal" src="myfolder/goal.jpg">
        <img id="gsm" src="myfolder/sonyx10_06.jpg">
        <div id="video"></div>
    </div>

</body>

أعلم أن هذا ليس مثاليًا ، لكنه أسرع مثال يمكن أن أتجمع فيه وأعتقد أن هناك الكثير الذي يمكنك تعلمه منه بالفعل.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow