I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio 1 2
Thebest
Thebest
il 30 agosto 2018 alle 16:58
29 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 -
RispondiQuoting
jjchuck
jjchuck
il 30 agosto 2018 alle 17:53
944 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
RispondiQuoting
Thebest
Thebest
il 30 agosto 2018 alle 18:03
29 messaggi dal 30 agosto 2018
Devo allinearli in verticale, la guida che mi hai linkato tu li allinea in orizzontale
RispondiQuoting
jjchuck
jjchuck
il 30 agosto 2018 alle 18:30
944 messaggi dal 11 febbraio 2013
nell'esempio metti

flex-direction: column;

e rimuovi -webkit-flex-flow: row wrap;
RispondiQuoting
Thebest
Thebest
il 30 agosto 2018 alle 18:51
29 messaggi dal 30 agosto 2018
Non funziona.
Modificato da Thebest il 01 ottobre 2019 21:47 -
RispondiQuoting
jjchuck
jjchuck
il 30 agosto 2018 alle 21:55
944 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 -
RispondiQuoting
Thebest
Thebest
l'1 settembre 2018 alle 13:00
29 messaggi dal 30 agosto 2018
Ok, grazie ora il testo è vicino all'immgine. manca solo più che tutte le immagini siano allineate in verticale.
RispondiQuoting
jjchuck
jjchuck
l'1 settembre 2018 alle 14:56
944 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.
RispondiQuoting
1 2

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.