Visualizzazione risultati 1 fino 8 di 8

Discussione: Problema con il posizionamento dei div

  1. #1
    Guest

    Predefinito Problema con il posizionamento dei div

    Buonasera, sto realizzando un sito e ho un problema nel posizionare dei div.
    Ho un div centrale con all'interno altri div. Un div ha come background un'immagine ma quando riduco anche di poco la finestra l'immagine rimane della stessa dimensione ma il suo contenitore, e anche gli altri, si riducono drasticamente e si allungano. Un'altro div posto al di sotto e contenente un testo si deforma allungandosi. Di seguito il codice:

    Codice HTML:
    <div id="contenitore">
    	<div id="img"></div>
    	<div id="descrizione">
    		<p>Testo  </p>
    	</div>
    	<div id="inserti">
    		<div id="primo"></div>
    		<div id="secondo"></div>
    		<div id="terzo"></div>
    	</div>
    CSS:
    Codice:
    /* contenitore centrale */
    	#contenitore{width:40%;border:2px solid black;height:1200px;margin:0 auto;
    		       box-shadow: 0 0 25px #000;-moz-box-shadow:0 0 25px #000;webkit-box-shadow:0 0 25px #000;
    		       filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction135, Strength=10);}
    	
    	
    	/* immagine principale */
    			 
    	#img {background-image:url(images/foto_home.png);background-repeat:no-repeat;background-position:center;
    		height:300px;width:700px;margin: 0 auto;margin-top:30px;}
    		
    	#descrizione {margin: 0 auto;margin-top:30px;height:300px;width:75%;}
    	
    	p {text-align:center;font-size:20px;box-shadow: 0 0 25px #969696;padding:7px;
    		-moz-box-shadow:0 0 25px #969696;webkit-box-shadow:0 0 25px #969696;
             filter:progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction135, Strength=10);}
    	   
    	   
    	  #inserti {margin: 0 auto;margin-top:30px;height:350px;width:75%;border: 1px solid black;}
    	  #primo {float:left;border: 1px solid black;height:340px;width:35%;}
    	  #secondo{float:left;border: 1px solid black;height:340px;width:35%;}
    	  #terzo {float:left;border: 1px solid black;height:340px;width:35%;}
    Ultima modifica di alemoppo : 03-10-2014 alle ore 11.25.40 Motivo: +tag

  2. #2
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    prima di tutto usa i tag per includere il codice nel post ..

    nel codice HTML manca una chiusura di un DIV (forse solo un errore di trascrizione qui..)

    tutti i DIV hanno una larghezza in percentuale ad eccezione di quello che contiene l'immagine in background
    questa e' la ragione per cui al dimensionarsi della finestra il DIV #IMG rimane di dimensioni fisse mentre gli altri modificano le loro dimensioni in percentuale.

    il P che contiene il testo e' subordinato al DIV #descrizione , quindi si "adatta" alla percentuale.

    cio' che non si deducie dal tuo post , e' la domanda !?
    come vorresti i tuoi elementi ?

    ... e' normale che degli elementi che hanno una impostazione di dimensione in percentuale variano in base al variare della finestra;
    quindi si contraggono o si allargano...

  3. #3
    Guest

    Predefinito

    vorrei che gli altri div si comportassero come quello che contiene l'immagine

  4. #4
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    visto che quello che contiene l'immagine ha una dimensione fissa e non in percentuale
    devi impostare anche gli altri DIV con dimensioni fisse!

    o .. se necessiti di avere tutto in percentuale , devi modificare il div immagine da dimensioni fisse a percentuali


    certo se hai un mix (percentuale / fisso) alcuni elementi modificheranno la loro proporzione ed altri no , creando un disallineamento

  5. #5
    Guest

    Predefinito

    grazie della dritta!

  6. #6
    Guest

    Predefinito

    ho un'altro problema, a parte che non riesco a rispondere alla discussione normalmente e quindi devo usare la risposta rapida, vabbè.
    Ho un div con un background, all'interno ho una lista orizzontale, so che per farla orizzontale bisogna usare il float:left, il problema è che la lista rimane tutta a sinistra, ho provato a spostarla mettendola dentro un altro in div, in modo che il div contenente la lista fosse centrato dentro il div superiore col background ma non riesco a centrarlo, ho usato martin: 0 auto, che per i contenitori sottostanti aveva funzionato ma con questo no. In pratica ora tutti gli altri div non si ridimensionano in maniera disuguale ma la lista sembra fissa. Non ho messo nessun posizionamento assoluto quindi non capisco perchè questo div non funzioni.

  7. #7
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    la lista ( quindi UL LI ) non devi usare float per averla orizzontale ti basta definire nel CSS
    Codice:
    li{
    display:inline-block;
    }

  8. #8
    Guest

    Predefinito

    ah ok grazie della dritta, è che su alcuni siti consigliavano di usare il float!Provo come dici tu!

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •