Ciao a tutti...
sto' costruendo un layout in css per un sito internet.
Sto' incontrando delle difficolta' ad centrare la pagina a risoluzioni diverse:
1024X768
e
1280x1024
(sto' provando a cambiare risoluzione su un monitor 19" che ha risoluzione nativa 1280x1024)
Infatti la pagina a seconda della risoluzione non e' proprio centrata
e il testo mi da' fuori dai bordi dell'immagine sottostante.
potete vedere un esempio a questo indirizzo:
Questa e' la schermata che vedo io a risoluzione 1024x768
problema che compare la barra di scorrimento orizzontale, ma il testo e' all'interno dell'immagine sottostante.
e questa e' la schermata che vedo io a risoluzione 1280x1024
la barra di scorrimento orizzontale non c'e' piu', ma il testo e' fuori dai bordi dell'immagine sottostante
Questo e' il codice CSS
codice:body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #787878; } #container { position:absolute; margin-left:-10px; } div.top { width:100%; height: 265px; background-image: url('top.jpg'); background-repeat: no-repeat; background-position: left top; padding-top: 20px; } div.middle { margin: 245px 0px 0px 0px; width:100%; background-image: url('middle.jpg'); background-repeat: repeat-y; } div.foot { height: 167px; width: 1024px; background-image: url('foot.jpg'); background-repeat: no-repeat; background-position: left bottom; padding-bottom: 20px; top:0px; } #contenuto { text-align: justify; margin-bottom: 20px; margin-right: 15%; margin-left: 0px; padding: 40px 50px 10px 150px; } div#menu ul{list-style:none;margin:0 auto;padding:0} div#menu ul li{float: left;width: 75px;margin:0 0 0 3px; padding:0;border: 1px solid #2693FF} div#menu a{display: block;height: 25px;line-height: 25px; text-decoration:none; text-align: center; background-color: #FFFFC5;color: #41418A} div#menu a:hover{background-color: #FF7E00;color: #fff} #boxmenu { position:absolute; top:90%; margin: 20px 0px 0px 160px; } #slogan { position: absolute; top: 10%; margin: 20px 0px 0px 400px; }
Questo e' il codice HTML
codice:<html> <head> <title>Titolo</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="container"> <div class="top"> <div class="middle"> <div id="contenuto"> Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... grazie ancora! Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... grazie ancora!Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... grazie ancora!Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... grazie ancora!Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... grazie ancora!Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... grazie ancora!Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... grazie ancora! Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... Scrivi qui il tuo testo...Scrivi qui il tuo testo... Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo...Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... Scrivi qui il tuo testo... sasadasdadasda <div id="slogan"> lo slogan del sito e non solo </div> <div id="boxmenu"> <div id="menu"> <ul>[*]Home[*]Chi siamo[*]Prodotti[*]Contatti[*][/list] </div> </div> </div> <div class="foot"> </div> </div> </div> <div> </body> </html>
Spero in un suggerimento per risolvere questo problema.
grazie..
Rispondi quotando
