5 messaggi dal 30 agosto 2018
Salve, nel mio sito ho un sub menu solo da prodotti da cui poi scendono le voci tavoli, divani, sedie e cucine.
Il problema è che la grafica lascia un po a desiderare, nel senso che c'è un logo di fianco ad ogni voce e vorrei che fosse allineato e con lo stesso spazio dal testo per ogni voce del menu.
P.S.: il mio sito è multiligue, allego css e html del sub.
<div id="id_prodotti_div" class="medium-3 small-3 columns">
        <a id="id_prodotti" href="/prodotti.asp" class="button link_interno"><img src="/img/quadratolite.png" style="margin-right:10px;">
            <%if (session("lingua") ="it") then%>PRODOTTI <%end if%>
          <%if (session("lingua") ="en") then%>PRODUCTS <%end if%>
          <%if (session("lingua") ="de") then%>PRODUKTE <%end if%>
          <%if (session("lingua") ="ru") then%>&#1055;&#1056;&#1054;&#1044;&#1059;&#1050;&#1058;&#1067; <%end if%>
          <%if (session("lingua") ="es") then%>PRODUCTOS<%end if%></a>  
                  <div id="sub-menu" class="text-align center">
                      <a id="id_tavoli" href="/prodotti/tavoli.asp" class="button link_interno"><img src="/img/quadratolite.png" style="padding-right: 31px;">
                          <%if (session("lingua") ="it") then%>TAVOLI   <%end if%>
                      <%if (session("lingua") ="en") then%>TABLES   <%end if%>
                      <%if (session("lingua") ="de") then%>TABELLEN <%end if%>
                      <%if (session("lingua") ="ru") then%>&#1058;&#1040;&#1041;&#1051;&#1048;&#1062;&#1067; <%end if%>
                      <%if (session("lingua") ="es") then%>TABLAS   <%end if%></a>
                      <a id="id_sedie" href="/prodotti/sedie.asp" class="button link_interno"><img src="/img/quadratolite.png" style="padding-right: 39px;">
                        <%if (session("lingua") ="it") then%>SEDIE  <%end if%>
                      <%if (session("lingua") ="en") then%>CHAIRS <%end if%>
                      <%if (session("lingua") ="de") then%>STÜHLEN<%end if%>
                      <%if (session("lingua") ="ru") then%>&#1057;&#1058;&#1059;&#1051;&#1068;&#1071; <%end if%>
                      <%if (session("lingua") ="es") then%>SILLAS <%end if%></a>
                      <a id="id_divani" href="/prodotti/divani.asp" class="button link_interno"><img src="/img/quadratolite.png" style="padding-right: 34px;">
                        <%if (session("lingua") ="it") then%>DIVANI<%end if%>
                      <%if (session("lingua") ="en") then%>SOFA  <%end if%>
                      <%if (session("lingua") ="de") then%>SOFA  <%end if%>
                      <%if (session("lingua") ="ru") then%>&#1044;&#1048;&#1042;&#1040;&#1053;&#1067; <%end if%>
                      <%if (session("lingua") ="es") then%>SOFA  <%end if%></a>
                      <a id="id_cucine" href="/underconstruction.asp" class="button link_interno"><img src="/img/quadratolite.png" style="padding-right: 29px;">
                        <%if (session("lingua") ="it") then%>CUCINE        <%end if%>
                      <%if (session("lingua") ="en") then%>KITCHEN       <%end if%>
                      <%if (session("lingua") ="de") then%>COOKING       <%end if%>
                      <%if (session("lingua") ="ru") then%>&#1050;&#1059;&#1061;&#1053;&#1048; <%end if%>
                      <%if (session("lingua") ="es") then%>COCINAR       <%end if%></a>
                  </div>
        </div>


div#sub-menu{
  visibility: hidden;
}
div#menu div:hover div{
  visibility: visible;
  border-image-width: 10px;
  text-align: left 10px;
}

Modificato da Thebest il 01 settembre 2018 12.43 -
677 messaggi dal 11 febbraio 2013
non so se ho capito bene
ma quando debbo allineare elementi senza dover ricorrere a float uso flex-box

in pratica impostando solo

display: flex;


in un elemento di blocco tutti gli items contenuti si allineano

poi puoi usare proprietà per allineare lungo l'asse X e Y

puoi anche invertire gli assi che di default sono righe e metterli a colonne

https://codepen.io/team/css-tricks/pen/EKEYob

spero ti sia di aiuto
5 messaggi dal 30 agosto 2018
Devo allinearli in verticale, la guida che mi hai linkato tu li allinea in orizzontale
677 messaggi dal 11 febbraio 2013
nell'esempio metti

flex-direction: column;

e rimuovi -webkit-flex-flow: row wrap;
5 messaggi dal 30 agosto 2018
Non funziona comunque, ti metto il link al sito così forse capisci meglio.
https://www.lucastudiodinterni.it
Modificato da Thebest il 30 agosto 2018 18.52 -
677 messaggi dal 11 febbraio 2013
Ti faccio un esempio sul tuo codice che ho semplificato

<style type="text/css">
        #id_prodotti_div {
            display: inline-block;
        }

        #id_prodotti_div a {
            text-decoration: none;
        }

        #id_prodotti_div:hover .sub-menu{ visibility: visible;}
        .sub-menu {
            visibility: hidden;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        .sub-item {
            padding-left: 10px;
            text-decoration: none;
            margin-top: 10px;
           
            display: flex;
            align-items:center;
        }
            .sub-item img { margin-right: 8px }
    </style>

<div id="id_prodotti_div">
    <a id="id_prodotti" href="#" >
        <img src="/img/quadratolite.png"/>
        PRODOTTI
    </a>  
    <div id="sub-menu" class="sub-menu ">
        <a class="sub-item " id="id_tavoli" href="#">
            <img src="/img/quadratolite.png"/>
            TAVOLI
        </a>
        <a class="sub-item " id="id_sedie" href="#">
            <img src="/img/quadratolite.png"/>
            SEDIE
        </a>
        <a class="sub-item " id="id_divani" href="#">
            <img src="/img/quadratolite.png"/>
            DIVANI
        </a>
        <a class="sub-item" id="id_cucine" href="#">
            <img src="/img/quadratolite.png"/>
            CUCINE
        </a>
    </div>
</div> 


spero ti aiuti
ciao
Modificato da jjchuck il 30 agosto 2018 22.30 -
Modificato da jjchuck il 30 agosto 2018 22.33 -
5 messaggi dal 30 agosto 2018
Ok, grazie ora il testo è vicino all'immgine. manca solo più che tutte le immagini siano allineate in verticale.
677 messaggi dal 11 febbraio 2013
L'esempio che ti ho postato lo hai visto?

Cmq il problema vero è che il menu non è fruibile dal telefono.

Dovresti rivederlo...trovi moltissimi esempi anche su youtube su come realizzare un buon menu.

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.