Allineamento menu e relativo dropdown

[Jamil89]

dropdown e menu.PNG

Ciao a tutti ragazzi! La situazione è quella che vedete da immagine, io vorrei potere allineare centralmente la finestrella sottostante a quella superiore. Il fatto è che inserendo "left" nell'ul sottostante, la finestra si sposta sì ma non viene centrata (o meglio...si riesce a centrarla ma qualora il menu di sopra presentasse una dimensione differente allora sarebbe inutile).
Posto il codice sottostante:

.dropdown-toggle.btn-primary.bottoneAlto2{
    background-color: #c1bdbd;
    border-top: 0px ridge #c1bdbd; 
    border-bottom: 0px ridge black; 
    border-left: 0px ridge #c1bdbd; 
    border-right: 0px ridge black; 
    border-radius: 3px;
    margin:0px;
    webkit-box-shadow: 10px 10px 5px #888888; /*Safari*/
    moz-box-shadow: 10px 10px 5px #888888; /*Mozilla*/ 
    box-shadow: 10px 10px 5px #888888;  
    min-width:180px;
    margin-bottom:5px;

}


.ulmenu{
    text-align:center;
    background-color: #c1bdbd;
    padding: 0px;
    border-top:0px solid black;
    border-bottom:0px solid black;
    border-right:0px solid black;
    border-left:0px solid black;
    border-radius:3px;
    margin-top:7px;
    webkit-box-shadow: 10px 10px 5px #888888; /*Safari*/
    moz-box-shadow: 10px 10px 5px #888888; /*Mozilla*/ 
    box-shadow: 10px 10px 5px #888888;
    }

Mi sapreste dare una mano? Grazie

[KillerWorm]

Ciao, puoi postare anche il codice HTML su cui è applicato quel CSS? Magari giusto un esempio per poter riprodurre la situazione.




[Mod]
Quando posti del codice sul forum è opportuno utilizzare gli appositi tag di formattazione (vedi regolamento di sezione). Grazie.
Per il momento ho provveduto io.

[Jamil89]

<div class="contenitoreElementoAlto dropdown">
    <button class="btn btn-primary dropdown-toggle bottoneAlto2" type="button" data toggle="dropdown">
         <font class="fontElementi1">
         Profilo azienda
         </font>
        <span class="caret span1">        
        </span>
    </button>
    <ul class="dropdown-menu ulmenu" role="menu">
        <li class="ilmenu">
            <a href="#" class="a1el1">
                <font class="li1el1">
                 Chi siamo
                 </font>
            </a>           
        </li>
        <li class="ilmenu">
            <a href="#">
                <font class="li1el1">Contatti
                </font>
            </a>
        </li>
    </ul>
</div>

Ciao. E' questo...ora vedo se è indentato dopo che l'ho inviato altrimenti lo modifico, sorry!

[KillerWorm]

Con solo questo codice non riesco a riprodurre ciò che descrivi e che è mostrato nell'immagine; presumo ci sia dell'altro css applicato a tali elementi, magari gestito anche attraverso JavaScript. Personalmente mi viene difficile aiutarti se non vedo l'elaborato in azione.
Se hai una pagina pubblica sarebbe utile postare il link.

[Jamil89]

Non è pubblica purtroppo...vedo di cercare di inviarti tutto

[Jamil89]

home.txt stile.txt

Allego entrambi

[KillerWorm]

Oh visto. Il problema sta nel fatto che si tratta di centrare orizzontalmente, rispetto al suo genitore, un elemento il quale ha position:absolute e non ha una width definita. Questi due fattori, messi assieme, rendono la cosa un po' complicata.

Se la width fosse definita, la tecnica più utilizzata è quella di impostare left:50% e margin-left pari al valore negativo della metà di width.

Nel tuo caso bisogna invece ricorrere ad altri metodi.

Un metodo è questo, con l'uso di proprietà CSS3:

#elemento_centrato {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}

Chiaramente, trattandosi di CSS3, dovrai considerare il discorso riguardo il supporto dei vari browser.

Qui una discussione su css-tricks in cui sono riportate e argomentate tali tecniche.

Un'altra soluzione prevede l'uso di un ulteriore elemento contenitore.
Qui un fiddle di esempio, proposto in questa discussione su stack-overflow. In quel caso si tratta di un tooltip, ma il metodo credo sia applicabile anche al tuo caso.

Vedi se con queste soluzioni riesci a risolvere, poi è possibile che ce ne siano anche delle altre.

[Jamil89]

Grazie!