blob84 Posted November 7, 2009 Share Posted November 7, 2009 Hi,I have created a css menu, I positioned the image inside a div with absolute position at top and bottom the menu, but the problem is when i zoom in or zoom out the page (ex. ctrl+ or ctrl- with firefox) the images change position,I post the code , it's long,so if you want to test the page, try to zoom in or zoom out the page and the image bottom and top the menu change.How can i solve? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head> <title>menu dropdown verticale frutto</title> <style type="text/css"> html, body { margin: 0; padding: 0; background-color: #E2725B; font-size: 90%; font-family: Verdana, Arial, Helvetica, sans-serif; } img.fruits { float:left; } div#ombra { /* creazione di un'ombra per il menu sovrapponendo un elemento div(#menu) ad un altro div(#ombra) contenitore */ background-color: #2F2F2F; float: right; margin-right: 20%; margin-top: 10%; padding-right: 5px; padding-bottom: 5px; } div#menu { text-align: right; margin-top: -5px; margin-left: -5px; border-left: 2px solid #FFFF00; border-right: 2px solid #FFFF00; } div#menu a { color: #000; text-decoration: none; } div#menu ul { list-style: none; margin: 0; padding: 0; width:200px; } div#menu ul li { height:100%; background: #AF593E; border-bottom: 2px solid #FFFF00; position: relative; float: right; width: 100%; } div#menu ul li ul li{ background: #C3B091; white-space: nowrap; width: 590px; text-align: left; height: 180px; } #top_border { /* bordo superiore del primo elemento della lista */ border-top: 2px solid #FFFF00; } div#menu ul li a{ display: block; padding: 30px 20px; text-align: left; font-weight: 700; } div#menu ul li a:hover { color: #FAFBFB; background: #C9C9C9; /*font-size: 1.5em;*/ font-weight: 900; } div#menu ul li ul li a:hover{ background: #ffedd3; border-left:1px solid black; } div#menu ul ul { position: absolute; top: 0; right: -9999px; } div#menu ul li:hover ul{ right:200px; }/* creazione delle ombre per il sottomenu(sotto liste) che contengono le foto dei frutti (fruitN) */ li div#fruit0 { position: absolute; left: 5px; top: 175px; width: 590px; background: #2F2F2F; color: #2F2F2F; z-index: -1; } li div#fruit1 { position: absolute; right: -5px; top: 175px; width: 590px; background: #2F2F2F; color: #2F2F2F; z-index: -1; } li div#fruit2 { position: absolute; right: -5px; top: 140px; width: 590px; height: 50px; background: #2F2F2F; color: #2F2F2F; z-index: -1; } li div#fruit3 { position: absolute; right: -8px; top: 70px; width: 592px; height: 120px; background: #2F2F2F; color: #2F2F2F; z-index: -1; } div.sep { margin-left: 90px; margin-top: 10px; padding-left: 10px; border-left: 1px solid #FFFF00; } div p { width: 200px; height: 100px; background-color: #A1A100; border: 1px solid #626200; font-style: italic; font-weight: 800; font-size: 80%; color: #001040; white-space: normal; overflow: auto; } img#borderTop { position: absolute; left: 65%; top: 6%; } img#borderBottom { position: absolute; left: 65%; top: 69%; } span { display: block; margin-left: 58%; margin-top: -25% } img.world { border: 1px solid #FFFF00; } </style> </head><body><div> <img src="http://img84.imageshack.us/img84/2306/bordertoptext.png" alt="border top" title="border top" id="borderTop" width="225" height="189" /> <img src="http://img33.imageshack.us/img33/3565/borderbottom0.png" alt="border bottom" title="border bottom" id="borderBottom" width="225" height="189" /> </div> <div id="ombra"> <div id="menu"> <ul> <li id="top_border"><a href="#"> Banana </a> <ul> <li> <img src="banana.png" title="banana" alt="banana" width="80" height="63" class="fruits" /> <div class="sep"> <h3>La banana</h3> <p>Il banano è una pianta bananorifera del genere Musa nella famiglia delle Musaceae. I gambi diventano alti tra 4 e 8 m, con foglie grandi lunghe tra 2 e 3 m. Il termine banana è applicato al frutto prolungato della pianta, che si sviluppa (nella specie e nelle varietà commestibili) in una serie di grappoli. Le banane pesano tipicamente tra i 125 e i 200 g, benché questo peso vari considerevolmente fra le differenti cultivar. Il frutto è commestibile per circa l'80 per cento, il restante 20 per cento è buccia; può essere consumato crudo o cotto.La parola banana deriva dall'arabo e significa dito. La banana, che non era ancora stata scoperta ed importata in Europa, veniva descritta nel 1601 come il frutto che profuma di rosa.</p> </div> <span> <img src="planisfero1.jpg" alt="planisfero" title="planisfero" width="200" height="133" class="world" /> </span> <div id="fruit0"> vuoto </div> </li> </ul> </li> <li><a href="#"> Ananas </a> <ul> <li><img src="ananas_small.png" title="ananas" alt="ananas" width="80" height="115" class="fruits" /> <div class="sep"> <h3>L'ananas</h3> <p>Ananas è un genere di piante appartenente alla famiglia delle Bromeliaceae. È conosciuto soprattutto per la specie coltivata Ananas comosus. La parola Ananas deriva dal nome del frutto nella lingua degli indi Guarani.</p> </div> <span> <img src="planisfero1.jpg" alt="planisfero" title="planisfero" width="200" height="133" class="world" /> </span> <div id="fruit1"> vuoto </div> </li> </ul> </li> <li><a href="#"> Mela </a> <ul> <li><img src="mela.png" title="mela" alt="mela" width="80" height="54" class="fruits" /> <div class="sep"> <h3>La mela</h3> <p>ILa mela è il frutto (più precisamente si tratta di un falso frutto a pomo) del melo. Il melo è originario dell'Asia centrale, la evoluzione dei meli botanci risalirebbe al Neolitico. La speciè è presente in Italia nominalmente con circa 2000 varietà, la definizione più precisa è difficile data la sovrapposizione storica delle nominazioni, e le specie estinte o irreperibili.La mela è il frutto più destagionalizzato (lo si trova tutto l'anno), ciò richiede la presenza di impianti che provvedono alla conservazione e ne distribuiscano la disponibilità su di un ampio arco di tempo. La maturazione naturale varia da fine agosto a metà ottobre.La disponibilità alla conservazione naturale dei frutti è drasticamente diversa nelle diverse varietà, ma dato gli elevati contenuti in acidi organici di norma la conservazione va da uno a quattro mesi.Nella conservazione industriale sono importanti le condizioni fisiche in cui questa avviene. Dopo il raccolto, i frutti sono conservati a temperature da 0.5 a 2.5 °C con umidità relativa del 59-68%. Per conservazioni prolungate si ricorre a conservazioni in celle con atmosfera controllata (più ricca di CO2).Le mele sono destinate prevalentemente al consumo casalingo. In Italia l'utilizzazione industriale riguarda la produzione e la rivendita di fette di mela per l'industria dolciaria) per la quale sono idonee le mele delle varietà Golden Delicious, Rome Beauty, Costa's Trade, Imperatore e di Blanche Neve.Altre destinazioni per le mele in industria sono: produzione di succhi, sidro, olio di semi di mela, (molto utilizzato nei paesi del nord Europa ed ottenuto come sottoprodotto dalla produzione del succo e del sidro), creme, fette di mela essiccate, produzione di alcol da distillazione da fermentati.Gli obiettivi del miglioramento genetico riguardano l'ottenimento di piante resistenti agli insetti, in particolare ai rodilegno, difficilmente contrastabili, al colpo di fuoco batterico, alla ticchiolatura, oidio e afidi. Si punta anche all'ottenimento, per le varietà commerciali più note, di cloni autocompatibili.</p> </div> <span> <img src="planisfero1.jpg" alt="planisfero" title="planisfero" width="200" height="133" class="world" /> </span> <div id="fruit2"> vuoto </div> </li> </ul> </li> <li><a href="#"> Limone </a> <ul> <li><img src="limone.png" title="limone" alt="limone" width="80" height="78" class="fruits" /> <div class="sep"> <h3>Il limone</h3> <p>Il limone (Citrus × limon (L.) Burm.f. ) è un albero da frutto appartenente al genere Citrus e alla famiglia delle Rutaceae. Il nome comune limone si può riferire tanto alla pianta quanto al suo frutto.È un antico ibrido, forse tra il pomelo ed il cedro, ma da secoli costituisce specie autonoma che si propaga per talea e per innesto.</p> </div> <span> <img src="planisfero1.jpg" alt="planisfero" title="planisfero" width="200" height="133" class="world" /> </span> <div id="fruit3"> vuoto </div> </li> </ul> </li> </ul> </div></div></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted November 8, 2009 Share Posted November 8, 2009 in what way does it change position? Link to comment Share on other sites More sharing options...
blob84 Posted November 8, 2009 Author Share Posted November 8, 2009 in what way does it change position?if you copy the code in a document and try to zoom in or zoom out the page is better than to explain :)thanks Link to comment Share on other sites More sharing options...
Ingolme Posted November 8, 2009 Share Posted November 8, 2009 The problem is that unless every last element of your page is absoutely positioned, they'll resize at different rates. Because absolutely positioned elements never recalculate their positions, while other forms of layout do in order to fit in the screen correctly. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.