div centrato risulta tagliato con tablet 1024 x 768

**alx17** · 29-04-2013, 16:57

Salve a tutti

Sono circa tre mesi che studio i vari linguaggi per poter diventare un web master (solo per premettere di essere alle prime armi).

Per cominciare a impratichirmi ho accettato di realizzare il sito di un amico:
http://www.ristorantinpuglia.it/pezza/index.html

Ho un problema con la visualizzazione dell'elemento “main” sui tablet con orientamento landscape (1024 x 768 – soprattutto ipad). Ovvero, in quel tipo di visualizzazione la finestra risulta tagliata in alto e in basso.

Le tecniche che ho usato per centrare il div sono.

Tramite css:

#main{
position:absolute;
top:50%;
left:50%;
width: 927px;
height: 780px;
margin-left:-463px;
margin-top: -390px;
}

oppure applicando una soluzione jquery apposita nella pagina index:

<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}

$('#main').center();
</script>

Entrambi gli approcci però presentano lo stesso problema.

Forse dipende dall'eccessiva grandezza dell'elemento stesso (eppure le dimensioni 927x780 non mi sembrano eccessive perchè non vengano adattate automaticamente da quel tipo specifico di device)?

So che probabilmente dovrei agire con le media queries per rendere il tutto più responsive, ma mi chiedevo se non ci fosse una soluzione più veloce per risolvere quell'unico problema (per ora) di adattabilità.

Grazie mille per qualsiasi aiuto.

alx17

**Nobody33** · 29-04-2013, 18:42

Prova:

codice:

#main{
margin: 0 auto;  //questo ti centra il contenitore principale
width: 927px;
 }

**carlomarangoni** · 29-04-2013, 18:49

Prova ad aggiungere

codice:

overflow:hidden;

oppure togliere una 50 di px in larghezza e in altezza sempre a causa delle barre

**alx17** · 29-04-2013, 19:38

Ciao nobody33 e carlomarangoni

Grazie per il vostro aiuto.

Premetto che come sfondo ho una slideshow (sempre jquery) che occupa tutto lo schermo a prescindere della risoluzione di questo.

Su questo sfondo ho scelto di centrare il div main sia orizzontalmente che verticalmente.
Per questo le soluzioni dei css o jquery che ho postato prima (purtroppo non ne ricordo le fonti altrimenti le citerei).

Ovvero quel tipo di soluzioni centra il main, a prescindere dalla risoluzione degli schermi, esattamente al centro dello schermo (verticalmente e orizzontalmente).
Funziona con desktop, pc (anche con schermi molto grandi) e altro ma non con il tablet 1024 x 768 in orientamento landscape (sinceramente ho provato solo con ipad).

Ho provato le soluzioni di entrambi:

#main{
margin: 0 auto;
width: 927px;
/* con o senza overflow:hiddden; */
}

ma centrano il div solo orizzontalmente e l'effetto grafico del main in alto con tanto spazio sotto quando lo schermo è più grande non è un granchè.

Grazie per i vostri consigli e altri che verranno.

alx17

**Nobody33** · 29-04-2013, 19:53

prova

codice:

#main{
margin: 20px auto;
width: 927px;

}

Giocaci un po con il margine in alto.

**alx17** · 29-04-2013, 20:15

Ciao e grazie

Purtroppo la soluzione serve solo a spostare un pò più giù il div (ovvero di 20px) ma non a posizionarlo al centro dello schermo (anche verticalmente) a prescindere dall'altezza di quest'ultimo.

alx17

**Nobody33** · 29-04-2013, 20:27

proprio cosi.

Ma non credo che ci sia una pura soluzione .css al tuo problema.

Se dovesse esistere, fammelo sapere

EDIT

Pensandoci su bene, una possibile soluzione esisterebbe, ma non so se funziona con IE8 e sotto:

codice:

<html>
<head>
<style>
div.esterno {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

div.interno {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: left;
}
</style>
</head>
<body>
<div class="esterno"><div class="interno">contenuto</div></div>

</body>
</html>

**carlomarangoni** · 30-04-2013, 00:00

Guarda che se togli un po di pixel la soluzione per centrare il div nello schermo resta intatta !!

Ammettiamo che togli per esempio 50px in altezza e 50 in larghezza il tuo codice divianta:

codice:

#main{
 position:absolute;
 top:50%;
 left:50%;
 width:877;
 height: 730px;
 margin; -365px 0 0 -439px;
 }

Io ho fatto l'esempio dei 50px; ma tu puoi togliere quelli che vuoi adattando i valori di margin e il div sarà sempre centrato in orizzontale e in verticale

**alx17** · 30-04-2013, 14:20

Ciao e grazie mille per il tuo aiuto

Per ragioni grafiche volevo evitare di ridurre il riquadro, ma mi sa che a questo punto appare come l'unica soluzione.

Il fatto è che, stranamente, se scelgo di non centrare il div anche verticalmente, ovvero solo con il classico "margin :0 auto;" l'elemento viene visualizzato sull' ipad tutto intero.

Viene tagliato solo se scelgo la soluzione di centrare anche verticalmente, a parità di dimensioni.
Strano, vero...

Comunque, continuo a sperare in altre soluzioni.

Grazie ancora...

alx17

**Grambo** · 30-04-2013, 17:55

io centro così

body{ margin:0; padding:0; }
#contenitore{ position:relative; margin:auto; width: 1000px; height: 618px; top:0px;}

contenitore da 1000px, prova inserendo le misure che vuoi avere

Discussione: div centrato risulta tagliato con tablet 1024 x 768

Strumenti discussione

Ricerca discussione

Visualizza

div centrato risulta tagliato con tablet 1024 x 768

Permessi di invio