Salve ragazzi, preciso che sono un neofita, quindi prego, a chiunque abbia intenzione di aiutarmi, di non spaventarsi alla vista del codice che posterò
In poche parole il mio problema è che, con la riduzione della pagina alcuni elementi si spostano mentre ridimensiono, appunto, la pagina, in particolar modo, parlo del "menu" della mia pagina. Come devo fare per ovviare a questo problema ? Grazie mille anticipatamente a chiunque tenterà di aiutarmi.
P.S: Ovviamente sono sicuro che questo codice presenterà un'infinita di errori, quindi non fatevi problemi a dirmi dove e perche ho sbagliato. Grazie ancora a tutti per il vostro tempo.
codice:index.html <html> <head> <link href="stile.css" rel="stylesheet" type="text/css"> <title>Il Regno Degli Animali</title> </head> <body> <div id="lista"> <table> <tr> <td><a href="www.google.it">HOME</a></td> <td><a href="www.google.it">CONTATTI</a></td> <td><a href="www.google.it">DOVE SIAMO</a></td> <td><a href="www.google.it">PREZZI</a></td> </tr> </table> </div> <div id="img"> <img src="immagine.jpg"/> </div> <div id="linea"></div> <!--<div id="contenitore">--> <a href=""><div id="sinistra"> <div id="sxup"> <h2>Cuccioli Di Cane</h2> </div> <img src="immagine3.jpg"/> </div></a> <a href=""><div id="centro"> <div id="ceup"> <h2>Uccelli</h2> </div> <img src="uccello.jpg"/> </div></a> <a href=""><div id="destra"> <div id="dxup"> <h2>Anfibi</h2> </div> <img src="anfibio.jpg"/> </div></a> <!--</div>--> </body> </html> Stile.css body {background-color:#E0FFBF} #lista {margin-top:15px; } lista table {margin-left:180px; } #lista td {border: 1px solid #000; border-radius:10px 10px; background-color:#604200; } #lista td a {margin-left:25px; margin-right:25px; text-decoration:none;} #lista td a:link {color:#fff} #lista td:hover {background-color:#D2B06A} #lista td:hover a {color:#604200} #img {width:950px; height:350px; margin-left:180px; margin-top:5px;} #img img {height:100%; width:100%; border-radius: 10px 10px;} #linea {width:1100px; margin-top: 20px; margin-left:105px; border: 3px solid #604200} /*#contenitore {margin-top:15px; position:relative;}*/ #sinistra {height:200px; width:300px; border:1px solid #000; margin-left:55px; margin-top:15px; float:left; border-radius:10px 10px; position:absolute;} #sinistra img {width:100%; height:170px; border-radius:0 0 10px 10px} #sxup {height:30px; width:100%; background-color:#D2B06A; border-radius:10px 10px 0 0} #sxup h2 {margin:0 0 0 60px; color:#fff} #centro {height:200px; width:300px; border:1px solid #000; float:left; margin-left:150px; margin-top:15px; border-radius:10px 10px; position:absolute; margin-left:500px} #centro img {width:100%; height:170px; border-radius:0 0 10px 10px;} #ceup {height:30px; width:100%; background-color:#D2B06A; border-radius:10px 10px 0 0} #ceup h2 {margin:0 0 0 110px; color:#fff} #destra {height:200px; width:300px; border:1px solid #000; margin-left:150px; margin-top:15px; float:left; border-radius:10px 10px; position:absolute; margin-left:955px} #destra img {width:100%; height:170px; border-radius:0 0 10px 10px;} #dxup {height:30px; width:100%; background-color:#D2B06A; border-radius:10px 10px 0 0} #dxup h2 {margin:0 0 0 110px; color:#fff}
Rispondi quotando
