Finalmente è arrivato il gran momento...è vero ancora non ho appreso come fare layout a due o tre colonne, ma non ho saputo resistere ed ho cominciato a lavorare al mio progetto: il sito di silent hill fatto con (x)html e css.
Ho pensato di creare come prima pagina una di presentazione, ma per il momento ho impostato solo una pagina che dice che il sito sta arrivando....vabbè cmq per impostare la pagina ho pensato ad un layout fisso, con tecnica del footer a fondo pagina, seguendo la guida di html al riguardo, anche se per far funzionare il tutto correttamente ho dovuto impostare anche un right:0 per il footer che altrimenti appariva tutto spostato....
La pagina presenta un'immagine al centro e una scritta in basse sul copyright...
quindi ho pensato: non so come fare una cosa fluida con un'immagine, quindi la imposto a una dimensione di 600X400 pixel così che la vedano a tutte le risoluzioni...
ci sarebbe un metodo per impostare un layout fluido usando un'immagine??? penso che dovrei usarla come background ma attendo vostre risposte...poi scusate se rompo immensamente le ballistic, ma potresre osservare il semplice codice della pagina html e css e dirmi se va bene???
Qui il codice della pagina (x)html:
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" xml:lang="en" lang="en"> <head> <title>Silent Hill Chronicles - Presentazione</title> <meta http-equiv="Content-Type" content='text/html;charset="UTF-8"' /> <style type="text/css"> @import url(pagpr.css); </style> </head> <body> <div id="main"> <div id="img_presentazione"> [img]grafica/pres/temp.jpg[/img] </div> <div id="footer" title="Copyright ©"></p> 2005 © Silent Hill Chronicles - Grafica e Layout sono di esclusiva proprietà di Federico Cappabianca </p> </div> </div> </body> </html>
E qui il codice del .css:
codice:html, body { margin : 0; padding : 0; height : 100%; color : silver; } body { font-size : 76%; font-family : Verdana, Arial, Helvetica, serif; text-align : center; background-color : #000000; } div#main { margin : 0 auto; width : 600px; height : 100%; position : relative; } body>div#main { height : auto; min-height : 100% } div#footer { color : silver; position : absolute; bottom : 0; right : 0; text-align : center; width : 100%; padding: 10px 0; font-size : 80%; } div#img_presentazione { margin : 15px auto; width : 600px; height : 400px; border : 5px outset silver; } div#footer p img { border : medium none black; }
Grazie
Rispondi quotando
