Sito con i CSS: Centrare blocco vuoto al centro della pagina.

Printable View

07-02-2008, 16.21.18

Sito con i CSS: Centrare blocco vuoto al centro della pagina.

Salve comunità di AlterVista,
sono nuovo e spero di non aver sbagliato sezione. Dopo aver letto varie guide sui CSS ho deciso di mettermi all'opera ed ho fatto delle prove, ma senza risultato positivo ho iniziato a postare su dei forum per chiedere aiuto ma dato che dove postavo nessuno mi rispondeva ho trovato questa community che uno definisce "la migliore" sia come Hosting Free che come forum di discussione.

Avendo un immagine, un blocco vuoto, come posso tenerlo sempre al centro della pagina con queste impostazioni: 800x600.

Questo è il codice:

Codice:

body{ background-image:url('sfondo.gif'); } div.header{ background-image:url('layout.gif'); background-repeat:no-repeat; text-align:left; height:800px; width:600px; }

Vorrei che un div (<div class="header">Ciao</div>) sia sempre al centro della pagina con quelle misure e che su questo div si possa scrivere.

Sapreste aiutarmi? Grazie Anticipate

P.S. E' vero che ho mancato la z-index ma non è un problema.
07-02-2008, 16.57.19
dreadnaut

la teoria è che per centrare un blocco ( qualcosa con display:block;, esplicito o implicito, ad esempio un <DIV> ) è sufficienta dargli margin:auto.

In realtà esiste Internet Explorer, quindi bisogna fare un giro più complesso, ma non di tanto. Ti faccio un esempio con body e div, ma vale per qualsiasi coppia "contenitore" e "contenuto":

Codice:

body { text-align: center; /* per IE */ } body div { text-align: left; /* rimettiamo a posto il testo */ width: 800px; /* fissiamo la larghezza */ margin: 0 auto; /* margini laterali automatici -> centrato */ }
07-02-2008, 17.03.10

Ciao dreadnaut grazie di avermi risposto, scusa mi potresti dire come hai fatto a mettere il mio codice in questo spazio speciale!? Comunque mi potresti spiegare meglio come si fa. Cioè non ho capito bene ho visto su AlterVista tanti siti che hanno un immagine (specie il mio box) di sottofondo e sopra ci scrivono ciò che vogliono. Posso fare lo stesso anche io? Nel forum non ho trovato niente.
07-02-2008, 17.16.22
dreadnaut

per quanto riguarda il codice qua sul forum, esiste una serie di tag che puoi inserire come [tag]qualcosa[/tag]. Quello usato sopra è [code], ma esistono anche [html] e [php] che colorano le parole chiave per rendere il codice più leggibile. (premi il tasto edita sul tuo post per vedere com'è fatto!)

Per il tuo sito, puoi cominciare con una semplice guida (e.g. su html.it) e al tempo stesso guardare come sono fatte le pagine da cui vuoi prendere spunto, usando il menu Visualizza \ Sorgente HTML del tuo browser.
07-02-2008, 17.28.15

Grazie ancora per la risposta, le guide che io ho letto sono su HTML.it, e Web-link.it ma comunque quando sono in pratica non riesco a fare nulla. Riguardo ai codici ho trovato scritto nelle FAQ come utilizzarlo e quindi ne faccio una prova: ho trovato questo sito e quello che voglio fare e un po' come lui, cioè vedete quel box al centro bianco dove ci tiene scritto tutte quelle cose e sopra c'è anche il menù e il logo? Bene ho cercato di visualizzare il suo codice ma non sono riuscito a riprodurlo...sai aiutarmi. (Posso darti del tu?).
07-02-2008, 17.43.15
dreadnaut

beh, tutto dipende dai colori. Se nell'esempio sopra li aggiungi, ottieni un "box" bianco.

Codice HTML:

<html> <head> <style type="text/css"> body { text-align: center; /* per IE */ background: gray; } body div { text-align: left; /* rimettiamo a posto il testo */ width: 800px; /* fissiamo la larghezza */ margin: 0 auto; /* margini laterali automatici -> centrato */ background: white; } </style> </head> <body> <div> <h1>Titolo</h1> <p>bla bla bla</p> </div> </body> </html>

etc etc
07-02-2008, 17.50.15

Ottimo dreadnaut più o meno era quello che volevo, il fatto sta che il mio box ha i bordi arrotondati e una guida su HTML.it diceva che il trucco stava nel caricare un immagine e sopra scrivergli del testo. Io ho provato con questa immagine ma non capisco come integrare il codice. Cioè con quel codice postato da me sballa sempre in qualche modo.
07-02-2008, 18.01.14
dreadnaut

uhm, non mi sembra che quell'immagine abbia bordi arrotondati, ma boh :|

Puoi provare con qualche metodo preconfezionato.
07-02-2008, 18.04.33

:shock: L'ho creato con Paint (figura a bordi arrotondati) e esportato su PhotoShop prendendomi l'interno e salvandolo su formato .gif trasparente.

http://dreadnaut.altervista.org/_alt...-sign-tiny.png edit:

Ho visto Nifty ma non mi piace utilizzare script o ActiveX, è possibile farlo senza?

http://dreadnaut.altervista.org/_alt...-sign-tiny.png edit 2x:

Allora? Nessuno sa aiutarmi? Vi prego minimo le prime dritte ... ho solo bisogno di un po' di aiuto...mi avevano detto che era un'ottima comunità.
07-02-2008, 22.05.56
dreadnaut

Citazione:

Originalmente inviato da AngelBot

ho solo bisogno di un po' di aiuto...mi avevano detto che era un'ottima comunità.

a me avevano detto che c'era vita intelligente su questo pianeta, ma ormai non ci credo più.

Io non vedo niente nell'immagine di cui hai messo il link sopra. Quando hai un immagine sensata ed assegnato il background al div come hai fatto nel primo post, la metti sul tuo sito e posti il link qua, così si capisce qualcosa.

ed intanto leggiti il regolamento del forum. Questa è una buona community, perché la gente è disponibile, paziente ed educata.
08-02-2008, 17.47.23

Scusate abbandono questa idea studierò da un libro che mi sono comprato. Grazie comunque.