diversi problemi da risolvere tra cui centratura in IE

**I'm milhouse** · 22-01-2006, 20:26

ecco i due problemi che mi si presentano:
-vorrei che non ci fosse spazio tra l'header e il container.
-vorrei che in explorer il tutto fosse centrato invece che allineato a sinistra.
-non riesco a scrivere nella colonna più larga..
Grazie.
Posto il codice:
body {
background: #f5fe00;
font-family: Arial, Verdana, Sans-serif;
font-size: 14px;
color: #000;
text align: center;
}
#content {
width: 500px;
height: 400px;
margin: 10 auto;
background: #000;
}
#header {
width: 500px;
height: 100px;
background: #fa03d4;
margin: 10 auto;
}
#footer {
width: 500px;
height: 50px;
background: #fa03d4;
margin: 10 auto;
}
#colonnadx {
widht: 100px;
height: 400px;
background: #ffffff;
margin: 0 0 0 350px;
}
#rimpiazza {
background:url(1.gif)no-repeat 50% 50%;
widht: 383px;
height: 90px;
text-indent:-100em;
}
</style>
</head>
<body>

<div id="header">
<div id="rimpiazza">Lorem ipsum <span></span></div>
</div>
<div id="content">
<div id="colonnadx"></div>
</div>
<div id="footer">
</div>
</body>
</html>

**Mich_** · 23-01-2006, 11:20

Il 10 che scrivi nei margini superiore e inferiore ti provoca uno spazio tra i vari elementi. Mettilo a 0.

text-align: center; /* (senza spazio e con la lineetta) */

Nota che un <div> vuoto, puo` venir ignorato (e qualcuno dei maggiori browser in circolazione effettivamente lo ignora).

**I'm milhouse** · 23-01-2006, 11:41

Originariamente inviato da Mich_
Il 10 che scrivi nei margini superiore e inferiore ti provoca uno spazio tra i vari elementi. Mettilo a 0.

text-align: center; /* (senza spazio e con la lineetta) */

Nota che un <div> vuoto, puo` venir ignorato (e qualcuno dei maggiori browser in circolazione effettivamente lo ignora).

Risolto il problema dello spazio tra i vari div..io vorrei creare un layout simile a questo (a livello di struttura) mi piacerebbe progettarlo con qualcuno in modo da apprendere meglio tutti i passaggi..
questo sarebbe il layout..

**Mich_** · 23-01-2006, 12:17

Lascio la parola a qualcun altro, ma non sperare nella manna.

Prova invece a sviluppare partendo dal significato che vuoi dare ai tuoi "box", scrivendo il codice (X)HTML semanticamente corretto.
Il passo successivo e` scrivere il CSS, a partire dai box piu` esterni.
Chiaramente nelle prime fasi dell'apprendimento dovrai verificare passo-passo quello che fai; e` essenziale che provi in un browser conforme (FF, Moz, ...), mentre l'adattamento per IE puoi farlo in un secondo tempo (in qualche caso occorre applicare degli hack).

**I'm milhouse** · 23-01-2006, 12:58

cosa intendi per box più esterni?

**Mich_** · 23-01-2006, 15:34

La struttura logica di una pagina, tipicamente e` formata da una serie di suddivisioni logiche, che in parte sono innestate le une nelle altre. Tali suddivisioni logiche, devono trovare corrispondenza in una suddivisione fisica della pagina in opportuni box, che tipicamente saranno dei <div> (ma non solo: anche liste, form, ecc).

Il box piu` esterno di tutti e` chiaramente il documento stesso (<body>).

Nel decidere la formattazione, conviene iniziare dall'esterno, altrimenti poi rischi di trovarti una situazione che ti esplode in mano (= non riesci piu` a capire cosa stai facendo).

**I'm milhouse** · 23-01-2006, 16:47

quindi se io volessi creare una struttura simile a quella avrei questo codice:

<div id="header">
<div id="menù">
</div>
</div>
<div id="container">
<div id="colonnadestra">
</div>
</div>
<div id="footer">
</div>

esatto?
Ma il div container deve contenere anche il div header e il div footer?
Grazie

**Mich_** · 23-01-2006, 17:05

Riscrivo (e completo) la struttura che hai postato:

codice:

<body>
<div id="header">
  

qualcosa</p>
  <div id="menù">
    <ul>[*] ... Lista del menu ...[/list]
  </div>
</div>
<div id="container">
  <div id="principale">
    

contenuto princ</p>
  </div>
  <div id="colonna">
    

contenuto laterale</p>
  </div>
</div>
<div id="footer">
  

contenuto footer</p>
</div>
</body>

Ho inserito qualcosa in ogni blocco, altrimenti il browser non sa cosa fare.
Ho racchiuso tutto all'interno del <body>. Chiaramente non serve mettere tutto nel container. Il <body> gia` racchiude il tutto.
Il Container non ha senso che contenga solo un blocco, ma se una e` una colonna, e` logico che ci sia anche un blocco principale (affiancato alla colonna).
Nei nomi logici, non ha senso usare il nome "colonnadestra": il fatto che stia a destra non fa parte della struttura logica, ma della formattazione (che viene realizzata dal CSS, non dal codce HTML).

**I'm milhouse** · 23-01-2006, 17:13

grazie..i nomi li ho utilizzati per rendere l'idea:-)

Testo il tutto e ti faccio sapere..

**I'm milhouse** · 23-01-2006, 17:21

per la colonna destra devo usare position:relative in quanto non segue il flusso..o..

Discussione: diversi problemi da risolvere tra cui centratura in IE

Strumenti discussione

Ricerca discussione

Visualizza

diversi problemi da risolvere tra cui centratura in IE

Permessi di invio