CSS: от жидкости до фиксированной для меньшего разрешения - PullRequest
Новая
       1

CSS: от жидкости до фиксированной для меньшего разрешения

0 голосов
/ 01 декабря 2010

Код ниже представляет собой мини-веб-страницу с 3 элементами: слева: футбольный мяч + центр изображения мяча: видео справа: изображение мобильного телефона

Просмотр всего вразрешение как у меня 1440 х 900, проблем нет, все показывает ок.Но когда вы используете менее широкое разрешение (или изменяете размер окна навигатора до меньшей ширины), изображение мобильного телефона идет за видео (или видео поверх него).

Чтобы это исправить,то, что я пытаюсь сделать, это: при достижении 1280 пикселей в ширину и 830 пикселей в высоту, что является предельным разрешением (меньше этого, все идет не так), я пытаюсь исправить все элементы (больше ничего не плавает), поэтомуполосы прокрутки показывают, посетитель может использовать их, и ни один элемент не попадает под ничто.

Как этого достичь ??Пожалуйста, помогите мне с этим, прошло много часов, и я схожу с ума.

Моя последняя попытка: добавление к тегу body 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>

1 Ответ

1 голос
/ 01 декабря 2010

Дайте содержащему элементу 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>

Я знаю, что это не идеально, но это самый быстрый пример, который я мог собрать, и я думаю, что вы уже можете многому научиться из этого.

...