break su di

Question

Quando ho un div con position: absolute, e in essa è un'altra div con position: absolute il div interno posizionerà nel telaio data tramite la (involucro) div esterno div genitore. Ora voglio creare una classe (css) chiamata error_message che si posiziona esattamente al centro del sito, indifferente da dove viene chiamato, quindi ho bisogno di rompere ogni div avvolto attorno al messaggio error_message .. Come faccio a fare questo?

Answer 1

Ho avuto un problema simile con il posizionamento di un aspirapolvere-testo centrato sotto un listino tasto immagine galleggiava.

per me la soluzione stava usando il valore "fissa" per la "posizione" proprietà

position: fixed 

allora si può posizionare il messaggio di errore dalla parte superiore sinistra del corpo di nuovo. Io uso un altro div wrapper per posizionare il centro del centro di tutto il testo di Hoover.

trovato la soluzione qui:

CSS nested Div with position absolute?

il codice non è il codice della foto che vedete, l'immagine è solo per l'illustrazione.

foglio di stile in meno formato (vedi http://lesscss.org/)

<style> 
    .button 
    { 
     float: left; 
     position: relative; 

     a 
     { 
      &:hover, &:focus 
      { 
       .titlePos 
       { 
        .title 
        { 
         display: block; 
        } 
       } 
      } 
      .titlePos 
      { 
       position: fixed; 
       top:50%; 
       left:50%; 
       width: 400px; 
       margin-left: -200px; 

       .title 
       { 
        position:relative; 
        display: none; 
        top: 130px; 
        text-align: center; 
       } 
      } 
     } 
</style> 

html:

<div id="wrapper"> 
    <div id="content"> 
     <ul> 
      <li> 
       <div class="button"> 
        <a href="#" > 
         <div class="buttonImage"> 
          <img /> 
         </div> 
         <div class="titlePos"> 
          <div class="title">Button Hoover Text1</div> 
         </div> 
        </a> 
       </div> 
      </li> 
      <li> 
       <div class="button"> 
        <a href="#" > 
         <div class="buttonImage"> 
          <img /> 
         </div> 
         <div class="titlePos"> 
          <div class="title">Button Hoover Text2</div> 
         </div> 
        </a> 
       </div> 
      </li> 
      <li> 
       <div class="button"> 
        <a href="#" > 
         <div class="buttonImage"> 
          <img /> 
         </div> 
         <div class="titlePos"> 
          <div class="title">Button Hoover Text3</div> 
         </div> 
        </a> 
       </div> 
      </li> 
      <li> 
       <div class="button"> 
        <a href="#" > 
         <div class="buttonImage"> 
          <img /> 
         </div> 
         <div class="titlePos"> 
          <div class="title">Button Hoover Text4</div> 
         </div> 
        </a> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

non sono sicuro perché si vorrebbe che div di uscire div genitore. Forse provare a lavorare su una nuova struttura html per quelli?

http://haslayout.net/css-tuts/Horizontal-Centering e http://haslayout.net/css-tuts/Vertical-Centering

Questi dovrebbero aiutarti!

Answer 3

Penso che l'unico modo per avere un'interruzione div di tutti i genitori div s sia avere un posizionamento assoluto su tutti loro, che ovviamente creerà il proprio insieme di problemi.

Perché non semplicemente avere un predefinito div nascosto come figlio diretto del corpo, invece di inserirlo nel markup. È quindi possibile posizionarlo facilmente come desiderato e inserire i messaggi di errore al suo interno con l'aiuto di jQuery. Un ovvio vantaggio di questo metodo è che dovresti scrivere solo questo div una volta e inserire dinamicamente il messaggio di errore. Vorrei anche suggerire di dare un'occhiata a jQuery UI che ti permette di creare facilmente dialoghi, sia normali che modali, oltre a tonnellate di altre funzionalità.

---

UPDATE

Dal JS non è consentito, un modo semplice per fare questo sarebbe davvero in mostra il div solo se c'è stato un errore. Quindi il codice PHP sarebbe ...

if (isset($error)) { 
    echo '<div class="show_error">' . $error . '</div>'; 
} 

... e la classe CSS perché sarebbe ...

.show_error { 
    width: 400px; // error element's width 
    height: 200px; // error element's height 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; // minus half the height 
    margin-left: -200px; // minus half the width 
} 

Naturalmente, si può ulteriormente lo stile del div errore come si desidera , ma questi sono necessari per posizionarlo nel punto morto.

Spero che questo aiuti!

Answer 4

Si dovrebbe provare a utilizzare la proprietà di css position:fixed, invece di position:absolute, per l'errore div. position:fixed posizionerà un elemento in base alla finestra del browser, senza riguardo per dove cade nel DOM. Se si desidera che sia centrato nella finestra, indipendentemente dalle dimensioni della finestra, si può fare in modo che il div di posizione fissa copra l'intero schermo (left: 0, right: 0, ecc.). e quindi allineare il testo del messaggio di errore al suo interno.