Risoluzione e div

**Liam81** · 15-05-2006, 15:27

Ciao a tutti,
ho un div che appare e scompare ogli volta che premo un pulsante.
Come posso visualizzare quest'ultimo al centro della mia pagina indipendentemente dalla risoluzione del monitor?

**Mich_** · 15-05-2006, 16:14

"apparire e scomparire" puo` voler dire diverse cose a livello di codice.
Inoltre il posizionamento dipende dal blocco in cui l'oggetto e` inserito.

Risultato:
per poterti rispondere occorre conoscere:
- come e` fatto il <div>
- in quale oggetto e` inserito
- come viene visualizzato/nascosto
- quale linguaggio viene usato nella pagina (DOCTYPE)

**Liam81** · 15-05-2006, 16:30

Il div è questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titolo</title>
<script language="javascript" type="text/javascript">

</script>
</head>
...
...
<body>

<div id="attesa" name="attesa" style="visibility: hidden; display: none;">
Attendere...
</div>
....
....

</body>
</html>

**Liam81** · 15-05-2006, 16:32

manca questo:

<input type="submit" name="subSearch" id="subSearch" value="Ricerca" OnClick="javascript: attesa();">

**Mich_** · 15-05-2006, 16:54

Anzitutto non puoi avere due oggetti dello stesso documento con lo stesso nome: attesa e` un <div> ed e` una funzione. Cambia il nome di uno (nel mio esempio ho cambiato il nome alla funzione)

Nel codice che hai postato manca un oggetto: il contenitore della pagina, in cui e` inserito anche il bottone. Inoltre per poterci lavorare bene, e` meglio se il CSS sta in un file a parte (altrimenti non funziona in XHTML Strict)

Suppongo quindi che la pagina sia organizzata cosi`

codice:

<body>
  <div id="attesa" name="attesa">
    Attendere...
  </div>
  <div id="restopagina">
    ...
    <button id="subSearch" value="Ricerca" onclick="fAttesa();">
  </div>
</body>

Il CSS per il div attesa dovra` essere di questo tipo

codice:

html, body {
  width: 100%; 
  height: 100%;
  font-size: 100%;
  text-align: center; /* necessario per centrare anche in IE */
}
#attesa {
  position: absolute;
  width: 400px;
  height: 300 px;
  margin: auto;
  display: none;
}

Se il display e` messo a none, non serve modificare la visibilita`.

PS: Lo script potrebbe diventare

codice:

function fAttesa() {
  var ogg = document.getElementById('attesa');
  ogg.style.display = (ogg.style.display=='none') ? 'block' : 'none';
}

**Liam81** · 15-05-2006, 17:45

Grazie Mich_, ho provato a seguire le tue indicazioni, ma il mio div si posiziona in alto a sinistra e non al centro della mia pagina.

Ho una domanda ma nel CSS dopo position: absolute; non ci vanno top e left?
Infine volevo precisare una cosa la mia pagina è struttura in questo modo:

....
....
<body>
<div id="attesa" name="attesa">
Attendere...
</div>
<table id="table_main" name="table_main">
<tr>
<td>
<table id="table_header" name="table_header">
<tr id="banner" name="banner">
...
...

**Mich_** · 15-05-2006, 18:03

Non conviene mai usare tag non corretti. Non credo che hai necessita` di mettere una tabella direttamente nel body. E comunque le tabelle sono fatte per dati con relazione sia di riga che di colonna: tutti gli altri casi sono fuori dall'uso corretto.

Per il posizionamento, probabilmente tu usi un browser non corretto, per cui occorre trovare gli hack opportuni.
Il top e left determinano la posizione dell'angolo alto a sin di un blocco: nel tuo caso non conosci quell'angolo, quindi devi usare altri metodi: per i browser conformi devi dare margini automatici, per il browser IE devi usare stratagemmi strani: per l'orizzontale si usa text-align da applicare al blocco superiore, per il verticale non ricordo (devi cercare nei vari siti di layout, tipo constile (indirizzi tra i "link utili").

Per fare una cosa semplice che funzioni dappertutto, forse conviene usare un blocco grande quanto il body, con sfondo trasparente, dentro il quale posizionare il blocchetto da far apparire in primo piano.

PS: potrebbe essere necessario usare anche z-index, per definire quali blocchi devono stare sopra (altrimenti quello definto dopo sta sopra).

**Liam81** · 16-05-2006, 10:28

Per i tag hai ragione, però non ho capito cosa e dove devo cercare...
Scusami e grazie

**Mich_** · 16-05-2006, 10:41

La pagina e` pubblicata? Puoi postare il link? In alternativa serve il codice HTML e CSS del pezzo in questione.
Non riesco a dare consigli su una cosa che non vedo e non so come e` fatta.

**Liam81** · 16-05-2006, 10:45

ok ora cerco di mettertela online

Discussione: Risoluzione e div

Strumenti discussione

Ricerca discussione

Visualizza

Risoluzione e div

Permessi di invio