• S
    User Newbie •

    HTML e CSS problema menù con sottosezioni

    Ciao a tutti, scusate sono nuova e avrei veramente bisogno del vostro aiuto per capirci qualcosa. In poche parole sto modificando la grafica di una pagina blogger di google ma essendo alle prime armi sto avendo un po' di difficoltà con html e css, soprattutto nella modifica del menù a sottosezioni che sto cercando di inserire (non riesco ad individuare il problema).

    Questo è il codice originale fornitomi dal "tema" che ho scaricato:

    /********************************//*** Navigation ***/
/********************************/
#navigation {
background:#171717;
height:48px;
position:fixed;
z-index:999999;
width:100%;
-webkit-backface-visibility: hidden;
}
.slicknav_menu {
display:none;
} .container {
position:relative;
}
.menu {
float:left;
}
.menu li {
display:inline-block;
margin-right:12px;
position:relative;
}
.menu li a {
font-family:"Open Sans", sans-serif;
font-size:11px;
font-weight:400;
letter-spacing:2px;
color:#fff;
line-height:48px;
text-transform:uppercase;
display:inline-block;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
}
ul.sub-menu li:after {
content: "|";
padding-left: 10px;
color: #565656;
display: none;
}


/*** DROPDOWN ***/


.menu .sub-menu, .menu .children {
background-color: #171717;
display: none;
padding: 0;
position: absolute;
margin-top:0;
left: 0;
z-index: 99999;
}
ul.menu ul a, .menu ul ul a {
color: #999;
margin: 0;
padding: 6px 10px 7px 10px;
min-width: 160px;
line-height:20px;
-o-transition:.25s;
-ms-transition:.25s;
-moz-transition:.25s;
-webkit-transition:.25s;
transition:.25s;
border-top:1px solid #333;
}
ul.menu ul li, .menu ul ul li {
padding-right:0;
margin-right:0;
}
ul.menu ul a:hover, .menu ul ul a:hover {
color: #fff;
background:#333;
}
ul.menu li:hover > ul, .menu ul li:hover > ul {
display: block;
}
.menu .sub-menu ul, .menu .children ul {
left: 100%; top: 0;
}
/** Search **/ #top-search {
position:absolute;
right:0; top:0;
width:48px;
text-align:center;
margin-left:16px;
} a {
height:48px;
font-size:14px;
line-height:48px;
color:#999;
background:#353535;
display:block;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
} a:hover {
color:#ccc;
background:#474747;
}
.show-search {
position:absolute;
top:48px;
right:-1px;
display:none;
z-index:10000;
}
.show-search #searchform input#s {
width:190px;
background:#FFF;
webkit-box-shadow: 0 8px 6px -6px rgba(206,206,206,.2);
-moz-box-shadow: 0 8px 6px -6px rgba(206,206,206,.2);
box-shadow: 0 8px 6px -6px rgba(206,206,206,.2);
}
.show-search input#s:focus {
border:1px solid #d5d5d5;
}
/*** Top Social ***/ #top-social {
position:absolute;
right:66px; top:0;
} a i {
font-size:14px;
margin-left:10px;
line-height:48px;
color:$(maincolor);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

    Questo è il codice che sto usando per personalizzare il menù, cioè per aggiungere le sottosezioni:

    <!-- Menù Orizzontale con Sottosezioni Inizio -->
<style type="text/css">
#Scuolimenu {
background: #221c1c !important;
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #a70100;
height:35px;
}
#Scuol {
margin: 0;
padding: 0;
} ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
} li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #444;
border-right:1px solid;
height:35px;
} li a, li a:link, li a:visited {
color: #FFF;
display: block;
font:normal 12px Trebuchet, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
} li a:hover, li a:active {
background: #f20100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
} li {
float: left;
padding: 0;
} li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 140px;
margin: 0;
padding: 0;
} li ul a {
width: 140px;
} li ul ul {
margin: -25px 0 0 161px;
} li:hover ul ul, li:hover ul ul ul, li.sfhover ul ul, li.sfhover ul ul ul {
left: -999em;
} li:hover ul, li li:hover ul, li li li:hover ul, li.sfhover ul, li li.sfhover ul, li li li.sfhover ul {
left: auto;
} li:hover, li.sfhover {
position: static;
} li li a, li li a:link, li li a:visited {
background: #ff3837;
width: 140px;
color: #FFF;
display: block;
font:normal 12px Trebuchet, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted;
} li li a:hover, li li a:active {
background: #473b3b;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
</style>

<!-- Menù orizzontale con Sottosezioni Fine -->

    E questo è invece il codice che ho modificato secondo le mie esigenze (più o meno):

    <!-- Menù Orizzontale con Sottosezioni Inizio -->
<style type='text/css'> {
      background:#171717;
    height:48px;
     color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        width:100%;
       -webkit-backface-visibility: hidden;
} {
    margin: 0;
    padding: 0;
} ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
} li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid;
        border-right:1px solid;
        height:35px;
} li a, li a:link, li a:visited {
    display: line-block;
    Font-family:?Open Sans?, sans-serif;
    font-size:11px;
    font-weight:400;
    letter-spacing:2px;
    color:#fff;
    text-transform:uppercase;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
} li a:hover, li a:active {
    background:;
    color:;
    display: line-block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px; 
} li {
    float: left;
    padding: 0;
} li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 140px;
    margin: 0;
    padding: 0;
} li ul a {
    width: 140px;
} li ul ul {
    margin: -25px 0 0 161px;
} li:hover ul ul, li:hover ul ul ul, li.sfhover ul ul, li.sfhover ul ul ul {
    left: -999em;
} li:hover ul, li li:hover ul, li li li:hover ul, li.sfhover ul, li li.sfhover ul, li li li.sfhover ul {
    left: auto;
} li:hover, li.sfhover {
    position: static;
} li li a, li li a:link, li li a:visited {
    background:;
    width: 140px;
    display: block;
    Font-family:?Open Sans?, sans-serif;
    font-size:11px;
    font-weight:400;
    letter-spacing:2px;
    color:#fff;
    text-transform:uppercase;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted;
} li li a:hover, li li a:active {
    background:;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
</style>

<!-- Menù orizzontale con Sottosezioni Fine -->

    Il problema è che vorrei sistemare il tutto un po' più a sinistra, e rendere le scritte delle sezioni più centrate come per la versione statica del menù, ma non riesco a capire (anzi, non so) cosa devo modificare.

    Versione con sottosezioni:
    image

    Versione statica:
    image

    Spero possiate aiutarmi. Grazie.

    0
  • F
    User Attivo •

    Ciao,

    posta il link del sito così è più facile aiutarti.

    0
  • S
    User Newbie •

    Certo, il blog è questo https:// jenybrown.blogspot.com

    0
  • F
    User Attivo •

    Ciao,

    si tratta solo di sistemare un pò il padding delle voci del menù, fai queste modifiche allo stile

    [HTML]
    #navigation .widget ul li {
    border:none;
    margin-bottom:0px;
    padding-bottom:0px;
    }
    [/HTML]

    diventa

    [HTML]
    .widget ul li {
    border:none;
    margin-bottom:0px;
    padding-bottom:0px;
    padding-top:10px;
    }
    [/HTML]

    e

    [HTML]
    .widget ul li:after {
    content: "|";
    padding-left: 10px;
    color: #565656;
    }
    [/HTML]

    diventa

    [HTML]
    .widget ul li:after {
    content: "|";
    padding: 0 5px; color:;
    }
    [/HTML]

    Infine aggiungi questa regola

    [HTML]
    .widget ul li ul li {
    padding-top:0;
    }
    [/HTML]

    0
  • S
    User Newbie •

    Fatto, però inserendo

    padding: 0 5px;
    mi si accavallava con il widget dei social e la barra di ricerca, quindi ho modificato in:
    padding: 0 -10px;
    Non capisco però come ridurre lo spazio accanto alla sezione "HOME", cioè ho anche provato ad aggiungere
    margin-left: -NUMEROpx;
    però poi si non mi trovo più con
    #navigation .widget ul li:after { content: "|";
    padding: 0 -10px;
    color: #565656;
    quindi vabbè, per il momento mi accontento. Grazie mille per l'aiuto :gtlove:

    0
  • F
    User Attivo •

    @&#8226 said:

    Non capisco però come ridurre lo spazio accanto alla sezione "HOME", cioè ho anche provato ad aggiungere

    Cosa vorresti fare, spostare home verso sinistra? Così mi sembra perfetto.

    Il padding negativo non esiste, quindi puoi tranquillamente mettere padding:0; al posto di padding: 0 -10px;

    0
  • S
    User Newbie •

    Così mi sembra perfetto.
    Si hai ragione, mi sono resa conto che ridimensionando la pagina non è poi così male, quindi la tengo così. Grazie 😄
    Anche se continuo a notare una certa differenza col menù statico che ho nella versione di prova, cioè mi sembra meno distanziato rispetto a come è ora. Cosa devo modificare?

    0
Effettua l'accesso per rispondere