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?
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
Certo, il blog è questo https:// jenybrown.blogspot.com
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:
Versione statica:
Spero possiate aiutarmi. Grazie.