Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    centrare 4 div affiancati e con position absolute

    salve
    Vi espongo il mio problema:
    ho 4 div, devono essere perforza position: absolute; dato che tramite un java si aprono e si chiudono

    non riesco a centrarli nella pagina con le varie risoluzioni

    nel mio css ho messo le posizioni utilizzando "left" e distanziandoli tra di loro sempre di 200px, ma così non vengono mai centrati

    css:
    codice:
    #slider {
    	position: absolute;
    	float: left;
    	left:110px;
    	bottom: -400px;
    	width: 190px;
    	height: 420px;
    	background-color: #CCC;
    }
    
    #slider2 {
    	position: absolute;
    	float: left;
    
    	left:310px;
    	bottom: -400px;
    	width: 190px;
    	height: 420px;
    	background-color: #CCC;
    }
    
    #slider3 {
    	position: absolute;
    	left:510px;
    	bottom: -400px;
    	width: 190px;
    	height: 420px;
    	background-color: #CCC;
    }
    
    #slider4 {
    	position: absolute;
    	left:710px;
    	bottom: -400px;
    	width: 190px;
    	height: 420px;
    	background-color: #CCC;
    }
    html:

    codice:
      <div id="openCloseIdentifier"> </div>
      <div id="slider">
        <div id="sliderContent">
          
    
    Testo 1</p>
        </div>
        <div id="openCloseWrap">  titolo 1 </div>
      </div>
      
      <div id="openCloseIdentifier2"></div>
      <div id="slider2">
        <div id="sliderContent">
          
    
    Testo 2</p>
        </div>
        <div id="openCloseWrap">  titolo 2 </div>
      </div>
      
      <div id="openCloseIdentifier3"></div>
      <div id="slider3">
        <div id="sliderContent">
          
    
    Testo 3</p>
        </div>
        <div id="openCloseWrap">  titolo 3 </div>
      </div>
      
      <div id="openCloseIdentifier4"></div>
      <div id="slider4">
        <div id="sliderContent">
          
    
    Testo 4</p>
        </div>
        <div id="openCloseWrap">  titolo 4  </div>
      </div>
    conoscete soluzioni??
    la teoria è quando sai tutto ma non funziona nulla;

    la pratica è quando funziona tutto ma non sai il perchè;

    in sostanza... non funziona nulla e non sai mai il perchè

  2. #2
    Iniziamo a fare un po' di ordine:
    1. Se usi i posizionamenti assoluti il float non ha effetto alcuno.
    2. Quanto spazio deve esserci tra la fine di un div e l'inizio del seguente? 10px? (questo è quello che si desume dal codice che hai postato)
    3. Questi div sono inseriti in un contenitore già centrato nella pagina o devono essere posizionati rispetto alla finestra del browser?
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  3. #3
    1) float, errore mio, l'avevo messo quando ho fatto alcune prove

    2) esatto, 10px tra un div e l'altro

    3) momentaneamente hanno un contenitore

    codice:
    footer2 {
    	bottom: 15px;
    	color: #fff;
    	display: block;
    	font-size: 11px;
    	height: 500px;
    	.line-height: 34px;
    	left: 0;
    	overflow: hidden;
    	position: fixed;
    	width: 100%;
    	z-index: 3;
    }
    ho provato a dare come width la somma dei div le distanze (10px x 3), = 790px e poi dargli margin 0auto, ma come risultato i div comiciano sempre dallo stesso punto e poi mi taglia l'ultimo, come se non ci entra ma continua comunque
    la teoria è quando sai tutto ma non funziona nulla;

    la pratica è quando funziona tutto ma non sai il perchè;

    in sostanza... non funziona nulla e non sai mai il perchè

  4. #4
    Dal momento che footer2 lo metti fixed, immagino tu lo voglia posizionare rispetto alla finestra.
    Allora fai così:
    codice:
    footer2 { 	
        position: fixed;
        width: 790px;
        left: 50%;
        margin-left: -395px;
    }
    Ovviamente, i 4 div in footer2 devono essere posizionati esattamente in modo da occupare precisamente lo spazio di 790px. Per fare questo il primo div deve avere un left pari a 0 e così via con gli altri.
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  5. #5
    SEI UN GRANDEEEEEEEE, FUNZIONAAAAAAA

    sono giorni che impazzisco per questa cosa, e con 4 righe di codice hai risolto.
    la teoria è quando sai tutto ma non funziona nulla;

    la pratica è quando funziona tutto ma non sai il perchè;

    in sostanza... non funziona nulla e non sai mai il perchè

  6. #6
    Per riprendere la tua citazione: ci vuole poco per passare dal "non funziona nulla e non sai mai il perchè" al "sai tutto e funziona tutto"!
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.