DIV: la mia ignoranza non ha limiti XD

**Terminator_Web** · 04-08-2008, 20:15

ciao a tutti, ho provato a seguire i consigli citati qui per creare una pagina di prova con dreamweaver.

ecco cosa ho fatto:

1. ho creato un nuovo documento in html con questo codice (preso da qui )

codice:

<html>
    <head>
        <title>Prova layout 2 colonne</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" rel="stylesheet" href="style.css" title="Style" media="all" />
    </head>
    <body>
        <div id="contenitore">

            <div id="header"><h1>Titolo del sito</h1></div>
            <div id="colsx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
            <div id="coldx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
            <div id="footer">Lorem ipsum dolor sit amet.</div>
        </div>
    </body>
</html>

ma quando faccio per visualizzarlo, invece di apparirmi il testo come in questa pagina, il testo mi appare uno sotto all'altro, cioè tutto di seguito.

per caso centra qualkosa questo codice ? (inserito prima dell'apertura del DIV:

codice:

<style type="text/css">
...
</style>

potete spiegarmi meglio come inserire i div ... grazie a tutti

cosi x curiosita, i div vanno solo con il css vero? non con html?

**salasir** · 05-08-2008, 08:15

Ma se hai preso quel layout come esempio, dovrebbe essere tutto a posto.
Hai toccato qualcosa nel css? (quello dentro a style.css)

**Terminator_Web** · 05-08-2008, 10:41

se dici quello che sta dentro a questo codice:

codice:

<style type="text/css">
...
</style>

allora no.

praticamente io ho solo aggiunto questo codice qui sopra, in modo da inserire il css nel html, poi salvo tutto, cioè questo:

codice:

<html>
    <head>
        <title>Prova layout 2 colonne</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" rel="stylesheet" href="style.css" title="Style" media="all" />
    </head>
    <body>
        <div id="contenitore">

            <div id="header"><h1>Titolo del sito</h1></div>
            <div id="colsx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
            <div id="coldx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
            <div id="footer">Lorem ipsum dolor sit amet.</div>
        </div>
    </body>
</html>

in .html però non si vede niente.

mi sorge un dubbio però, per caso nel codice citato qui sopra cè anche indicato il colore che prende la tabella :master: :master: :master: ??

però il bello, è che nel codice css cè il testo ... proprio come nel link ... però non si vede nessuna scritta ... mah ... cosa mi consiglieresti?

**salasir** · 05-08-2008, 10:48

Il codice che indichi è solo html e non c'è nessun riferimento a colori (come deve essere).

però il bello, è che nel codice css cè il testo ... proprio come nel link

nel css c'è la formattazione non il testo ...
Forse non ho capito molto, oppure tu hai le idee un po' confuse.

Prova a scaricare nuovamente il codice della pagina così com'è e relativo css. Attenzione al percorso! Come lo indica il codice, sorgente della pagine e sorgente css devono risiedere nella stessa cartella!

**Terminator_Web** · 05-08-2008, 11:59

ma devo creare due pagine una in html e una in css ugali??

o dove posso trovare delle guide che spiegano in modo completo i div? grazie

**salasir** · 05-08-2008, 12:21

Credo che tu abbia un po di confuzsione in testa ..

codice:

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
	<head>
		<title>Prova layout 2 colonne</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link type="text/css" rel="stylesheet" href="style.css" title="Style" media="all" />
	</head>
	<body>
		<div id="contenitore">
			<div id="header"><h1>Titolo del sito</h1></div>
			<div id="colsx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
			<div id="coldx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
			<div id="footer">Lorem ipsum dolor sit amet.</div>
		</div>
	</body>
</html>

Questo lo salvi come Pagina.htm

mentre questo lo salvi nella stessa cartella come style.css

codice:

body {background:white; text-align:center; font-family:Helvetica, arial, sans-serif;}

 div#contenitore {background:#F90; width:900px; margin:0 auto; text-align:left; }

  div#header {background:#4A2C3E; height:5em;}

   h1 {color:white; text-align:right; padding:1em 1em 0 0; font-family:Georgia, serif;}

  div#colsx {width:630px; \width:650px; w\idth:630px; float:left; padding:10px;}

  div#coldx {background:#060; width:228px; \width: 250px; w\idth:228px; float:left; padding:10px; border-left:2px solid white;}

  div#footer {background:#999; clear:left; border-top:3px solid #4A2C3E; text-align:center; }

**Terminator_Web** · 05-08-2008, 12:45

ahn ora funziona ... si si ...

ma io invece di salvare in style.css posso cambiare nome?

quindi io per modificare le tabelle basta che modifico il css ... e come faccio a capirmi con i nomi? tipo div#colsx div#footer come faccio a sapere a cosa consistono? xke non lo so ... ci sono guide?

**salasir** · 05-08-2008, 13:47

Senza una minima conoscenza di CSS non andrai lontano...
Rischi di andare a tentativi non capendo cosa stai facendo ed ottenendo i risultati contrari a quelli che ti aspetti. E alla fine imprecherai con i CSS rifugiandoti nei layout tabellari ...

Comunque:

codice:

div#colsx {width:630px; \width:650px; w\idth:630px; float:left; padding:10px;}

si riferisce a

<div id="colsx">Lorem ipsum dolor sit amet, ...</div>

Ti consiglio una buona guida CSS (Inizia da quella su html.it) e guarda qui:
Link utili

**Terminator_Web** · 05-08-2008, 13:58

ahn ok ho capito.

mi dovro sforzare astudiarlo XD ... un'ultima cosa, non esistono editor per visualizzare in tempo reale quello che sto scrivendo in css?
tipo frontpage o dreamweaver per html e altri ...

ho provato con dreamweaver ma non mi da la visuale in anteprima e devo in continuazione salvare ed aprire firefox ... non cè un programma che dia l'anteprima?

**salasir** · 05-08-2008, 14:01

Io uso notepad ...

Quando sto modificando qualcosa, File>Salva il sorgente CSS e F5 sulla pagina html ...
E lo vedo in tempo reale ..

Discussione: DIV: la mia ignoranza non ha limiti XD

Strumenti discussione

Ricerca discussione

Visualizza

DIV: la mia ignoranza non ha limiti XD

Permessi di invio