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

    Div contenitore (di div flottati) centrato verticalmente

    Salve.
    Mi serve una mano per risolvere un piccolo problema.

    Sto convertendo un menù realizzato con una tabella in un menù a sviluppo orizzontale composto da div regolati da un foglio di stile.
    Il codice che ho messo sù e questo.
    codice:
    <div id="menu">
    	<div class="sezioni">Link1</div>
    	<div class="sezioni">Link2</div>	
    	<div class="sezioni">Link3</div>	
    	<div class="sezioni">Link4</div>	
    	<div class="sezioni">Link5</div>	
    	<div class="sezioni">Link6</div>
    </div>
    dove...
    codice:
    .sezioni	{ float: left; width: 16%; font-family: Arial, Verdana, Helvetica; font-size: 10px; align: center; text-align: center; vertical-align: middle; }
    
    #menu
    {
    	height: 45px;
    	margin: 0px 0px 0px 201px;
    	padding: 15px 40px 0px 40px;
    	vertical-align: middle;
    	text-align: center;
    	font-size: 10px;
    	border-bottom: 1px solid #ffffff;
    }
    ma non va bene, perché su Explorer vedo male il risultato, oltre al fatto che il frame sottostante, con il sito vero e proprio, si vede tutto bianco!
    Credo occorra un codice che fissi l'altezza a 60px invece che essere la differenza tra 60 e il padding top, ma non so come fare...

    ---

    Edit: risolto il problema di visibilità su Explorer.
    Dimenticavo che non riesco nemmeno a centrare il #menu nello spazio lasciato libero dal frame adiacente, come se il padding destro fosse diverso dal sinistro, mentre invece è uguale!

  2. #2
    Prova a fare un div dentro un div... wrapper

    Sam

  3. #3
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Invece dei div puoi usare una lista, un esempio di partenza

    codice:
    css: 
    
    #menu {
    	margin: 0 0 0 201px;
    	padding: 15px 40px 0px 40px;
    	border-bottom: 1px solid #ffffff;
    }
    #menu ul {
    	width:800px; /* da modificare */
    	margin:0 auto;
    	padding: 0;
    	list-style:none;
    }
    #menu li {
    display:block;
    float:left; 
    width: 16%;
    
    }
    #menu a	{ 
    display:block; 
    height:45px;
    line-height:45px;
    font-family: Arial, Verdana, Helvetica; 
    font-size: 10px;
    text-align: center;
     }
    
    html:
    
    <div id="menu">
     <ul>
    	[*]Link1
    	[*]Link2	
    	[*]Link3	
    	[*]Link4	
    	<liLink5	
    	[*]Link6[/list]
    </div>
    se non imposti una larghezza per il tuo menu non potrai averlo centrato perché hai elementi che flottano a sinistra (fra l'altro 6 link per il 16% fanno il 96%, quindi a destra resta più spazio, la soluzione è dare una dimensione precisa al menu e lo stesso ai link)

  4. #4
    @ esseAemme: se intendi il div contenitore, c'è già, tutti i div "sezioni" sono racchiusi nel div "menu"...

    @ Prill: la larghezza è un problema che mi porto appresso da settimane, anche in altre discussioni, anche se prima riguardava la parte sottostante del sito, sempre divisa in un menù a sinistra largo 200px e in un div principale che occupa la larghezza restante.
    Ho scoperto che omettendo la larghezza e dando soltanto i margini, i contenuti del div principale si adattano alla risoluzione del monitor, sennò mi trovo con spazio vuoto sulla destra.
    Come faccio a dare una larghezza al menù per centrarlo, e al tempo stesso garantirmi che i vari div (o elementi di lista) dei link si dispongano equamente nello spazio assegnato?

    Per quanto riguarda invece l'altezza, ho risolto dando un
    codice:
    margin-top: 15px;
    a .sezioni.

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.