• S
    User Newbie •

    Sovrapposizione div

    Salve a tutti...
    Ho un filmato flash (il mio sito) posto al centro di una pagina web con allineameto centrale. Dato che tale swf ha dimensioni pari a 900x600 ho un bel pò di spazio a disposizione per aggiungere alcuni elementi (immagini , testi ecc...) negli angoli della pagina in questione. Quindi ho inserito due piccole immagini rispettivamente nell'angolo sinistro e destro in basso alla pagina web , attraverso l'utilizzo dei div....vi posto il css:
    [html]#contenitore {
    width: 100%;
    min-width: 1150px;
    margin: 0px auto;
    }

    #divsx{
    width:125px;
    height:15px;
    position:absolute;
    bottom:10px;
    left:5px;
    }

    #divcentro {
    width:900px;
    height:600px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-450px;
    margin-top: -300px;
    }

    #divdx{
    width:128px;
    height:41px;
    position:absolute;
    bottom:10px;
    right:10px;
    }[/html]Come vedete ho un contenitore al cui interno ho inserito 3 div; il centrale (il sito .fla di 900x600) e altri due DIV (dvdx e divsx) che hanno posizione assoluta a destra e sinistra in fondo alla pagina. Il layout che volevo era esattamente questo , ma ho riscontrato un piccolo imprevisto. Quando vado a ridimensionare la finestra del browser questi elementi "angolari" ,vengono lentamente nascosti dall'swf centrale; Cioè se ne vanno al di sotto di esso nel momento in cui la pagina non è sufficientemente grande per contenere tutto.
    Io vorrei , se possibile, che il divdx (div in basso a destra) e il divsx (...sinistra) ,durante un ridimensionamento della finestra , si "bloccassero" una volta raggiunto il margine dell'swf centrale...che non scompariscano al di sotto di quest'ultimo insomma....
    Da un punto di vista "funzionale" il concetto non cambia. Se la pagina viene ridemsionata esageratamente ,questi elementi non saranno cmq visibili...non è un problema...vorrei semplicemente eliminare quel fastidioso effetto di sovrapposizione del div centrale sugli altri...e viceversa ovviamente.
    è possibile?

    Ho tentato di risolvere il tutto assegnando un "min-width:...;" al contenitore che sia pari alla somma della larghezza di tutti e tre gli elementi insieme....nulla di risolto.
    Mi affido a voi e vi ringrazio molto...a presto...

    Stefano

    0
  • M
    User Attivo •

    E' difficile darti una risposta, probabilmente hai realizzato il sito basandoti sulla risoluzione del tuo monitor e poi ti sei accorto che non funzionava ridimensionandolo.

    Per risolvere bisogna usare un i div con posizionamento assoluto e un contenitore con posizionamento relativo.

    Comunque, la regola min-width: 1150px; non è consigliabile perchè gli utenti con il monitor piccolo vedranno la barra orizzontale nel browser (il max che puoi usare è 980px.

    Ecco un esempio con la grafica ridotta al minimo:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Titolo pagina</title>
    <style type="text/css">

/***************************************************************/
/*   CSS Reset                                                  */
/***************************************************************/
html {    
    
}
body {
    padding: 0;
    margin: 0;
    font: 12px Arial, Helvetica, Garuda, sans-serif;*font-size: small;*font: x-small;
    line-height: 18px;
    color: #333;

}
/***************************************************************/
/*  General                                                    */
/***************************************************************/
#decoration-top {
    position: absolute;
    top: 120px;
    left: -72px;
    width: 60px;
    height: 308px;
    background: red;
}
#container {
    position: relative;
    width: 860px;
    margin: 0 auto;    
}
/***************************************************************/
/*  Content                                                    */
/***************************************************************/
#content {
    position: relative;
    width: 837px;
    margin: 0 auto 0 auto;    
    min-height: 200px;
}    
    
    </style>
</head>
<body>

<!-- [Container] -->
<div id="container">

    <!-- [Decoration] -->
    <div id="decoration-top"></div>
    <!-- [/End Decoration] -->    
    
    <!-- [Content] -->        
    <div id="content">

        <!-- [Text] -->        
        <div id="text">
            <h1 class="text-title"><span>TITOLO DEL CONTENUTO</span></h1>
            <p>1. Proin semper augue magna. <a href="#">cursus quis metus</a> lobortis lectus, sit amet gravida tellus mollis vel. Proin fringilla, nibh in pretium auctor, libero lorem semper orci, et ultrices odio lectus eu ligula. Nulla feugiat, turpis ut elementum semper, lorem lacus vulputate odio, at viverra nulla enim quis nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida sodales sapien, sit amet tincidunt tortor sollicitudin eget. Curabitur facilisis, arcu sit amet molestie pharetra, magna massa sagittis urna, vel blandit sem augue vel neque. Praesent quis quam urna. Nullam eget enim diam. Donec enim tortor, egestas ac tincidunt sed, auctor sed mauris. Vestibulum vehicula scelerisque lectus. Aliquam leo sem, elementum eget egestas blandit, rhoncus ac ante. Nam dictum consectetur dui sodales semper. Nunc eget orci a turpis varius semper id ut velit. Quisque arcu est, egestas quis posuere ac, venenatis eget nisi. Nam viverra urna eget felis euismod placerat. Nulla vel tellus eget justo posuere lacinia.</p>
            <p>2. Suspendisse magna massa, lacinia eget <strong>auctor sed</strong>, consectetur id ipsum. Suspendisse potenti. Donec blandit ipsum eu sem sollicitudin mollis porttitor mauris auctor. In egestas pretium elit, in sollicitudin lacus porta id. Etiam arcu libero, cursus a commodo luctus, dignissim in diam. Aenean molestie semper eros quis vehicula. Fusce at orci vel leo mattis egestas. Nam eu risus sem, vitae porttitor quam. In tempus rutrum nulla, sed rutrum diam tincidunt vel. Sed sed suscipit sem. Maecenas sit amet sapien quis mi semper tempor eu vitae elit. Donec nisi nunc, posuere suscipit mollis nec, cursus ac orci. Nulla turpis purus, porttitor nec euismod sit amet, imperdiet vitae enim. Duis elementum ante sit amet dui vehicula lacinia. Vestibulum vitae adipiscing nisi.</p>
            <h2>Lore ipsa ipsum is just dummy text 1</h2>
            <p>3. Nunc at ligula et sem tempus molestie nec vel velit. Proin id ante at nisl tristique porta. Nulla porta laoreet gravida. Cras mi erat, malesuada sed tempus in, lobortis id enim. Etiam suscipit nisl tempor sapien porttitor quis volutpat est blandit. Mauris enim lacus, eleifend sit amet mattis at, vulputate eu enim. Suspendisse potenti. Aliquam erat volutpat. Curabitur vel mauris a enim pretium vestibulum. Sed non urna vel nisi rutrum laoreet vitae quis magna.</p>
            <h3>Lore ipsa ipsum is just dummy text 1</h3>
            <p>4. Nulla facilisi. Nunc justo orci, consequat sit amet pulvinar nec, <a href="#">cursus quis metus</a>. Donec luctus, tortor id viverra aliquet, lectus mauris tempus lorem, a fermentum mauris turpis sed elit. Curabitur venenatis placerat lacus, sed consectetur mauris elementum at. Nulla quis sapien in massa fermentum sollicitudin. Suspendisse potenti. Proin gravida faucibus felis eget interdum. Suspendisse consectetur justo sed quam facilisis eu euismod elit ullamcorper. Morbi in massa nec magna tempor dictum quis id orci. Vestibulum sed tellus leo. Morbi a lectus magna, ac laoreet ipsum.</p>
            <h4>Lore ipsa ipsum is just dummy text 1</h4>
            <p>5. Cras non magna nulla. Nam vestibulum ligula sed sem congue quis luctus purus sagittis. Etiam volutpat nulla in nisi vehicula porta. Sed volutpat, ipsum nec pellentesque vehicula, elit est dignissim nisl, eget iaculis mauris risus id nunc. Nullam rutrum ornare pellentesque. Pellentesque et congue mauris. Nam nulla enim, sagittis non porta vel, ornare vel ante. Quisque at purus non tellus faucibus porta at a dui. Ut rutrum nibh vel mauris interdum sit amet consectetur nulla facilisis. Etiam imperdiet lacus a nisi scelerisque eget mollis diam placerat. Aliquam volutpat enim eu lacus egestas placerat aliquet augue molestie. Fusce enim lacus, pulvinar lacinia tincidunt quis, fringilla rutrum odio. In urna ligula, sollicitudin nec sodales quis, suscipit sed justo. Praesent eu dui in ipsum tincidunt varius. Cras arcu ante, congue ac commodo ac, auctor ut tellus. Donec rutrum justo a tortor dignissim egestas hendrerit lorem aliquam. In pellentesque semper tellus, nec cursus turpis lobortis in. Aliquam erat volutpat.</p>
            <h5>Lore ipsa ipsum is just dummy text 1</h5>
            <p>6. Ut nec auctor risus. Integer urna nisi, tristique vel suscipit sit amet, mattis non tortor. Nam iaculis dui ac ipsum consectetur elementum. Pellentesque lacinia eleifend consectetur. Suspendisse laoreet semper neque vitae viverra. Proin scelerisque facilisis lectus id venenatis. Suspendisse non metus mattis mi fringilla tincidunt a sit amet nulla. Suspendisse potenti. Mauris laoreet orci ac sapien accumsan convallis. Etiam tortor felis, accumsan egestas egestas a, mollis et ipsum. Nam eget erat non odio viverra tempus. In hac habitasse platea dictumst. Vestibulum ante augue, imperdiet ac aliquam tristique, porta ut turpis.</p>
            <h6>Lore ipsa ipsum is just dummy text 1</h6>
            <p>7. Praesent in ultricies lorem. Morbi quis porttitor dui. Aenean fringilla erat eget lectus posuere aliquam. Maecenas risus turpis, fringilla eget auctor quis, malesuada at ante. Ut id ligula et est pretium sodales. Sed eu aliquet metus. Vestibulum sed sapien mauris. Praesent nec metus quis sapien semper egestas at vel velit. Maecenas sit amet nulla in felis fermentum molestie. Morbi egestas viverra sem, id lacinia magna consequat quis. Nulla a porttitor turpis. Phasellus consequat, nisi adipiscing condimentum porta, dui justo faucibus dui, et faucibus massa erat nec sem. Praesent tempor nulla eu est congue eleifend.</p>
            <ul>
                <li>Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit.
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                    <li>Nam ut justo congue quam semper blandit.</li>
                    <li>Cras ac quam non dui aliquam aliquam at eget ante.</li>
                    <li>Aenean nec nunc in tellus pharetra gravida.</li>
                    <li>Sed non tortor nisi, ut dignissim sapien.</li>
                    <li>Sed vitae mi ut diam semper varius et id ipsum.</li>
                    <li>Vivamus sit amet libero non dui adipiscing viverra.</li>
                    <li>Praesent auctor viverra felis, sit amet convallis ipsum tincidunt eu.</li>
                </ul>    
                </li>
                <li>Nam ut justo congue quam semper blandit.</li>
                <li>Cras ac quam non dui aliquam aliquam at eget ante.</li>
                <li>Aenean nec nunc in tellus pharetra gravida.</li>
                <li>Sed non tortor nisi, ut dignissim sapien.</li>
                <li>Sed vitae mi ut diam semper varius et id ipsum.</li>
                <li>Vivamus sit amet libero non dui adipiscing viverra.</li>
                <li>Praesent auctor viverra felis, sit amet convallis ipsum tincidunt eu.</li>
            </ul>
            <ol>
                <li>Lorem ipsum dolor sit <a href="#">amet</a>, consectetur adipiscing elit.
                <ol>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                    <li>Nam ut justo congue quam semper blandit.</li>
                    <li>Cras ac quam non dui aliquam aliquam at eget ante.</li>
                    <li>Aenean nec nunc in tellus pharetra gravida.</li>
                    <li>Sed non tortor nisi, ut dignissim sapien.</li>
                    <li>Sed vitae mi ut diam semper varius et id ipsum.</li>
                    <li>Vivamus sit amet libero non dui adipiscing viverra.</li>
                    <li>Praesent auctor viverra felis, sit amet convallis ipsum tincidunt eu.</li>
                </ol>    
                </li>
                <li>Nam ut justo congue quam semper blandit.</li>
                <li>Cras ac quam non dui aliquam aliquam at eget ante.</li>
                <li>Aenean nec nunc in tellus pharetra gravida.</li>
                <li>Sed non tortor nisi, ut dignissim sapien.</li>
                <li>Sed vitae mi ut diam semper varius et id ipsum.</li>
                <li>Vivamus sit amet libero non dui adipiscing viverra.</li>
                <li>Praesent auctor viverra felis, sit amet convallis ipsum tincidunt eu.</li>
            </ol>
            <p>8. Maecenas vehicula sagittis risus vel rhoncus. Etiam vulputate euismod purus sit amet molestie. Nunc vitae lorem sit amet dolor vulputate imperdiet. Morbi non mauris non ligula molestie consectetur. Quisque a orci dui, quis tincidunt diam. Aliquam posuere tincidunt neque, accumsan ullamcorper sapien sollicitudin a. Etiam viverra eros in leo ornare varius sollicitudin lorem lobortis. Nam fringilla, nulla sit amet aliquet feugiat, diam nisl blandit tellus, pellentesque laoreet orci sem eu dolor. Nunc vel lectus felis. Proin placerat posuere metus, ut placerat sem semper ac. Cras sit amet pellentesque nibh.</p>
            
            <div class="clear"></div>
        </div>
        <!-- [/End Text] -->
    
    </div>
    <!-- [/End Content] -->    

</div>
<!-- [/End Container] -->  

</body>
</html>
    0
Effettua l'accesso per rispondere