CSS: da liquido a fissato per piccoli risoluzione

https://stackoverflow.com/questions/4318635

29-09-2019
|

Domanda

Il codice qui sotto è un mini pagina web con 3 elementi: sulla sinistra: un'immagine + sfera di obiettivo di calcio Centro: un video a destra: l'immagine di un telefono cellulare

Visualizza il tutto in una risoluzione come la mia 1440 x 900, non c'è nessun problema, tutti gli spettacoli ok. Ma quando si utilizza una risoluzione meno larga (o si ri-dimensionare la finestra navigatore per meno di larghezza), l'immagine del telefono cellulare va dietro il video (o il video su di esso).

Per risolvere questo problema, quello che sto cercando di fare è: al raggiungimento 1280px di larghezza e 830 px di altezza, che è la risoluzione limite (meno di questo, le cose vanno male) Sto cercando di ottenere tutti gli elementi fissi (non galleggia più), quindi le barre di scorrimento mostrano, la lattina visitatore usarli, e nessun elemento prende il nulla.

Come si può raggiungere questo ?? Per favore mi dia una mano con esso, è stato molte ore e ho intenzione noci.

Il mio ultimo tentativo: aggiungendo il tag body min-width: 1280px;

ma i risultati non :( Mi chiedo se questo sia utilizzato correttamente e se potrebbe essere una soluzione .. Cosa ne pensi?

PD: si prega di scaricare le immagini qui: http://aracelid.110mb.com/myfolder.zip

Grazie mille

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

Soluzione

Dare l'elemento che contiene un min-width e min-height. La prossima volta, si prega di smontare il codice per il minimo indispensabile.

Alcuni consigli

Non utilizzare attributi di stile. Tu vuoi per separare i tuoi contenuti dalla presentazione. Ecco perché si utilizzano i CSS. Non mescolare di nuovo stile in là.
Ricordate: Absolute posizionata contenuti è posizionata contro la più vicina elemento genitore con un posizionamento diverso da static. z-index can essere impostato solo su elementi con posizionamento differente da static.

Ho fatto qualche riscrivendo perché era troppo grande di un pasticcio: (ho cambiato il video in un riquadro rosso perché è stato troppo distrarre:))

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

So che non è perfetto, ma è l'esempio più veloce ho potuto ottenere insieme e penso che c'è molto si può imparare da esso già.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow