position: absolute --> però mi si sposta tutto...!

Printable View

19-01-2012, 16.33.24

position: absolute --> però mi si sposta tutto...!

ciao a tutti! sono nuovo sia del forum sia del mondo html e affini. mi è quasi un linguaggio alieno ma con molta fatica ho fatto un piccolo sito per un esame che devo dare:

http://gelkindo.altervista.org/

il problema è che quasi tutti gli elementi (a parte il logo "gelkindo" fisso in alto a sinistra in tutte le pagine) si "spostano" quando vado a ridimensionare la finestra del browser... non riesco a capire il motivo. il logo a differenza degli altri elementi è un'immagine di background e non mi da problemi. è tutto il resto che va per i fatti suoi...
19-01-2012, 17.47.48
acsocmel

position absolute funziona in relazione all'elemento genitore, in questo caso "body"
in genere il body corrisponde alla finestra e quindi ridimensionandola cambi i riferimenti agli oggetti posizionati in maniera assoluta
tutti i tuoi elementi si spostano perchè hai usato le percentuali
se avessi usato i px starebbero inchiodati in quella posizione (in realtà dipenderebbe da left o right)
comunque ti consiglio di rifare tutto partendo dallo studio dell'xhtml
ti mostro il codice base di una pagina xhtml

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="tuo file css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> </body> </html>
19-01-2012, 19.07.40

ho provato ad usare i pixel ma non cambia niente... per quanto riguardo lo studio xhtml purtroppo non ho il tempo di ripartire da capo. è già tanto se son riuscito a tirar fuori qualcosa di più o meno funzionante... e pensare che dopo mi toccheranno i css brrrrr
20-01-2012, 14.56.14
acsocmel

come vedi la tua homepage usa percentuali e non px
ma non è questo il problema
il problema è che stai usando già position, l'ultima cosa che devi studiarti visto le complicanze insite
devi leggere una guida per non andare avanti a tentoni
se ho imparato io, allora tutto il mondo può imparare
questo codice è esattamente quello che non bisogna fare

Codice HTML:

<HTML> <HEAD> <META NAME="GENERATOR" Content="AlterVista - Editor HTML"> <TITLE>gelkindo | dritto al punto</TITLE> </HEAD> <BODY> <DIV STYLE="position:absolute; top:20%; left:20%"> <a href="home.html"><img src="immagini/home.png"></a> </div> <DIV STYLE="position:absolute; top:20%; left:37%"> <a href="info.html"><img src="immagini/info.png"></a> </div> <DIV STYLE="position:absolute; top:20%; left:53%"> <a href="portfolio.html"><img src="immagini/portfolio.png"></a> </div> <DIV STYLE="position:absolute; top:20%; left:72%"> <a href="contacts.html"><img src="immagini/contacts.png"></a> </div> <div style="position:absolute; top:40%; left:27%"> <h2> <font color="#000000" face="Hand Of Sean"> " Tutta la faccenda del fumo, delle sigarette<br> è come una truffa di proporzioni gigantesche.<br> Anche le persone intelligenti possono venir truffate,<br> ma è solo un pazzo chi, avendo scoperto la truffa,<br> continua a farsi imbrogliare ". </font> </div> <div style="position:absolute; top:75%; left:62%"> <h2> <font color="#38a962" face="Hand Of Sean"> Allen Carr </font> </div> </h2> <body background="immagini/sfondo.jpg" > <div style="position:absolute; top:20px; left:160px"> <a href="home.html"><img src="immagini/logo.png" width="239,5px" height="77,5"></a> </div> </BODY> </HTML>