CSS: de liquide fixé à résolution plus faible

https://stackoverflow.com/questions/4318635

29-09-2019
|

Question

Le code ci-dessous est une mini page web avec 3 éléments: à gauche: un but de soccer + images balle centre: une vidéo à droite: une image d'un téléphone mobile

Affichage du tout dans une résolution comme le mien 1440 x 900, il n'y a pas de problème, toutes les émissions ok. Mais lorsque vous utilisez une résolution moins large (ou vous redimensionnez la fenêtre du navigateur à moins de largeur), l'image de téléphone mobile passe derrière la vidéo (ou la vidéo sur le dessus de celui-ci).

Pour résoudre ce problème, ce que je suis en train de faire est: en atteignant 1280px de largeur et 830 px de hauteur, ce qui est la résolution limite (moins que cela, les choses vont mal) Je suis en train d'obtenir tous les éléments fixes (rien flotte plus), de sorte que les barres de défilement montrent, la boîte de visiteur les utiliser, et aucun élément se met en rien.

Comment y parvenir ?? S'il vous plaît me donner un coup de main, il a été de nombreuses heures et je vais les noix.

Mon dernier essai: ajouter à la balise body min-width: 1280px;

Mais aucun résultat :( Je me demande si cela est correctement utilisé et si elle pourrait être une solution .. Que pensez-vous?

PD: s'il vous plaît télécharger les images ici: http://aracelid.110mb.com/myfolder.zip

Merci beaucoup

<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>

La solution

Donne l'élément contenant un min-width et min-height. La prochaine fois, s'il vous plaît enlever votre code au strict minimum.

Quelques conseils

Ne pas utiliser les attributs de style. Tu veux de séparer votre contenu de la présentation. Voilà pourquoi vous utilisez CSS. Ne sauvegardez pas de style mix là-dedans.
Souvenez-vous: absolu contenu placé est positionné contre le plus proche élément parent avec un positionnement différent de static. z-index peut être seulement fixé sur les éléments avec une le positionnement différent de static.

J'ai fait quelques réécris parce qu'il était trop gros d'un gâchis: (j'ai changé la vidéo à un panneau rouge parce qu'il était trop distrayant:))

   <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>

Je sais que ce n'est pas parfait, mais il est le plus rapide exemple que je pourrais obtenir ensemble et je pense qu'il ya beaucoup que vous pouvez apprendre déjà.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow