Non riesco a mettere tutto il testo al "centro" della pagina..

Versione Completa Stampa Cerca Utenti Iscriviti Condividi :

AESSENET.ORG - Forum » AESSENET.ORG - Forum » Internet e Software » Webpublishing, Grafica & Programmazione

Master Mystery

00mercoledì 12 maggio 2004 13:20

Come la maggior parte dei siti, vorrei avere tutto il testo (per news e altro) al centro..

Io uso un foglio di stile (sono agli inizi), e ho messo questo per mettere il tutto al centro:

body 
{
  font-family: verdana, sans-serif;
  font-size: 11px;
  line-height: 1.5em;
  color: #333;
  margin: 80;
  padding: 0;
  background: #000000;
}

Mi sfugge cosa voglia dire "padding"..

Comunque ho provato a mettere altri numeri anche lì, ma non succede niente.. e con Dreamweaver io il testo e tutto lo vedo al centro come vorrei!! Ma aprendolo poi con un normale browser (Opera, IE ecc..) non va! Cosa sbaglio? Come posso fare per avere tutto al centro?

Intanto grazie

||STEBO||

00mercoledì 12 maggio 2004 14:00

se intendi "centrato" puoi risolvere semplicemente inserendo all'inizio della pagina il tag <CENTER>, subito dopo <body>, e alla fine il rispettivo tag di chiusura </CENTER> subito prima di </body>.

se invece intendi proprio al centro della pagina, ma nn centrato, dovresti distrubuire il tutto all'iterno di una tabella e delle sue celle. ti rimando alla mia guida nella sezione technet

Master Mystery

00mercoledì 12 maggio 2004 16:57

Ho letto quello che avevi scritto ma io preferisco di gran lunga i fogli di stile alle tabelle.. in quanto riesco a personalizzare tutte le pagine WEB con un unico file di testo.. poi le tabelle non mi piacciono tanto, anche perchè se ne faccio una non riesco a centrarla dove voglio, e sono tutte bianche, non riesco a farle trasparenti in modo da non essere in contrasto con il design della pagina stessa..

Comunque ho provato di nuovo con il foglio di stile, e mettendo "margin: 10%;" invece di "margin: 80;" sono riuscito a centrare il tutto (infatti io intendevo proprio avere il testo al centro della pagina, non "centrato").

Il punto è che ora riesco a fare modifiche SOLO in questa percentuale di spazio.. praticamente al centro mi ha messo proprio TUTTO!

E allora ho riprovato con le tabelle.. ma:
1. come ho già detto mi fa una tabella con dentro tutto bianco.. come posso settare queste in modo "trasparente"?
2. Come caspita faccio per metterle al centro della pagina?

Se può essere di aiuto uso Dreamweaver MX 2004.. intanto grazie

||STEBO||

00mercoledì 12 maggio 2004 17:28

ho provato io stesso con DW Mx:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#9999CC">
<div align="center">
<table width="600" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
</body>
</html>

allora:
.01. a me le tabelle le da automaticamente trasparenti;
.02. con <div align="center"> e </div> centri la tabella nella pagina;
.03. i fogli di stile puoi applicarli anche alla stessa tabella. forse qualcheduno impallidirà, ma io preferisco di gran lunga FP per editare i fogli css. nel menù formato - stile puoi decidere a cosa applicare lo stile. ovviamente puoi lavorare sia usando i tag <style> su una pagina web sia su un foglio di stile vero e proprio [dopo averne fatto una copia

]

drudo

00mercoledì 12 maggio 2004 17:47

Se ti piacciono i CSS dai una buona letta quì:

www.constile.org/ (uno degli italiani più bravi a mio viso)
www.diodati.org/index.asp (un riferimento!)
www.inknoise.com/experimental/layoutomatic.php (ti crea un layout in automatico)

ciao
drudo

P.S. Per farti vedere che anche un'ignoranZ come me può fare cose carine con i CSS ecco come verrà fuori il mio sitino :
drudo.altervista.org/xhtml/ (senza ombra alcuna di tabella e con validazione XHTML1.0

)

Master Mystery

00venerdì 21 maggio 2004 05:18

In questi giorni me lo sto studiando un pochettino quando ho tempo.. ora però mi piacerebbe sapere come avere fra i bordi delle "tabelle" fatte con i CSS, una specie di cornice, con un colore che va nello sfumato.. praticamente sarebbe una sola immagine gif da pochissimi pixel che viene ripetuta all'infinito per tutti i lati della tabella, in modo da avere questa cornice.. spero di essermi spiegato.. magari con i fogli di stile così non modifico ogni pagina

p.s. il layout me lo sono fatto dal sito che mi hai indicato, visto che cmq era l'impostazione che volevo, grazie

aessenet

00venerdì 21 maggio 2004 07:56

Aggiungo solo un link agli ottimi di drudo:

www.devguru.com/Technologies/css/quickref/css_index.html

C'è l'elenco di tutte le proprietà usabili nei css..sia in ordine alfabetico che ordinati in base all'elemento che le contiene.

Master Mystery

00venerdì 21 maggio 2004 13:39

Guarda, per mettere questi benedetti bordi con le immagini, e non colorati, ho messo ognuno di questi codici:

<STYLE>
BODY { border-top-width: 5px; url("formattazione html\grafica\barra9.gif"):}

</STYLE>

_____________________

body { border-bottom-style: url("formattazione html\grafica\barra9.gif"); }

____________________________

e TANTI altri ma non va..

Se serve posto l'intero CSS che ho fatto:

body 
{
  font-family: verdana, sans-serif;
  font-size: 11px;
  line-height: 1.5em;
  color: #333;
  margin: 0;
  padding: 0;
  background-color: #263f68;
  
}

a:link 
{
  color: #224566;
  border-bottom: 1px dotted #224566;
  text-decoration: none;
}

a:visited 
{
  color: #224566;
  border-bottom: 1px dotted #224566;
  text-decoration: none;
}

a:hover 
{
  color: #ff6b16;
  border-bottom: 1px solid #ff6b16;
  text-decoration: none;
}

p 
{
  margin: 1em 0 1em;
  text-align: none;
  padding: 0;
}

h1 
{
  font-size: 250%;
  font-weight: bold;
  color: #5b80b2;
  padding: 0;
  margin: 0;
}

h2 
{
  font-size: 175%;
  color: #a8c1ea;
  padding: 0;
  margin: 0.2em 0 1em 0;
}

h3, th 
{
  font-size: 135%;
  font-weight: bold;
  color: #5b80b2;
  padding: 0 0 2px 0;
  margin: 1.2em 0 -.2em 0;
  border-bottom: 1px solid #ddd;
}

abbr, acronymn 
{
  border-bottom: 1px dotted;
}

strike 
{  
  text-decoration: line-through;
}

ul 
{
  list-style: none;
  margin: 1em 0 1em 0;
  padding-left: 24px;
  color: #666;
}

li 
{
  padding: 0 0 4px 17px;
  line-height: 1.3em;
  background: url(li.gif) no-repeat 0 2px;
}

#indice
{
  list-style: none;
  margin: 1em 0 1em 0;
  padding-left: 24px;
  color: #666;
}

#indice li
{
  padding: 0 0 4px 17px;
  line-height: 1.3em;
  background: url(lezione.gif) no-repeat 0 2px;
}

hr
{
  height: 1px;
  color: #fff;
  background-color: #fff;
  border: 0px dashed #aaaaaa;
  border-top-width: 1px;
}

tr
{ 
  background: #ffffff;
}

tr:hover, .rolls
{ 
  background: #f8f8f8;
}

th
{ 
  background: #f5f5f5;
  font-size: 100%; 
}

td
{ 
  text-align: center;
  line-height: 1.2em;
  border-bottom: 1px dotted #aaaaaa;
}

table 
{ 
  border: px solid #aaaaaa;
}

#container {
			width: 760px;
			\width: 780px;
			w\idth: 95%;
			border: 1px solid gray;
			margin: 10px;
			margin-left: auto;
			margin-right: auto;
			padding: 10px;
		}

		#banner {
			padding: 20px;
			margin-bottom: 5px;
			background-color: #FFFFFF;
		}

		#content {
			padding: 5px;
			margin-left: 215px;
			margin-right: 215px;
			background-color: #f6f8fd;
		}

		#sidebar-a {
			float: left;
			width: 200px;
			\width: 210px;
			w\idth: 200px;
			margin: 0;
			margin-right: 5px;
			padding: 5px;
			background-color: #f6f8fd;
		}

		#sidebar-b {
			float: right;
			width: 200px;
			\width: 210px;
			w\idth: 200px;
			margin: 0;
			margin-left: 5px;
			padding: 5px;
			background-color: #f6f8fd;
		}

		#footer {
			clear: both;
			padding: 5px;
			margin-top: 5px;
			
			background-color: #263f68;
		}

Io vorrei fra i bordi una cornice blu scura sfumata, da blu scuro al più chiaro, una cosa così.. e deve praticamente usare soltanto una immagine da pochissimi pixel moltiplicata all'infinito per tutti i lati..

Master Mystery

00venerdì 21 maggio 2004 14:02

Ah, inoltre una cosa che mi piacerebbe molto, è la possibilità di inserire (dove voglio) una immagine come sfondo al testo.. abbastanza "trasparente" per far vedere comunque il testo, ma una immagine non sarebbe male.. sapete mica come fare?

drudo

00venerdì 21 maggio 2004 19:35

Non vorrei spararla grossa, ma non mi pare che inserire un'immagine di "sfondo" nel bordo rientri nelle specifiche:
www.w3.org/TR/REC-CSS2/box.html#border-properties

Ah, inoltre una cosa che mi piacerebbe molto, è la possibilità di inserire (dove voglio) una immagine come sfondo al testo.. abbastanza "trasparente" per far vedere comunque il testo, ma una immagine non sarebbe male.. sapete mica come fare?

Non ho proprio ben capito... cmq potresti associare un'immagine di sfondo al tag **p** ad es.

p { background: url("sfondo.gif") right top }

oppure creare una classe:

.sfondo { background: url("sfondo.gif") right top }

da richiamare ad es. così

<p class="sfondo">testo</p>

oppure

<div class="sfondo">testo</div>

Boh dipende da come hai scritto il sito...
Cmq trovi un po' di proprietà sugli sfondi quì:
www.w3.org/TR/REC-CSS2/colors.html

ciao
drudo

Questa è la versione 'lo-fi' del Forum Per visualizzare la versione completa clicca qui
Tutti gli orari sono GMT+01:00. Adesso sono le 18:02.