Joomla.it Forum

Joomla! 3 => I Template di Joomla! 3 => : tincup 08 Dec 2013, 19:18:56

: [Risolto] immagini sopra voci di menu
: tincup 08 Dec 2013, 19:18:56

Salve,
non riesco a posizionare le immagini al di sopra delle voci di menu. L'immagine viene sempre inserita allineata alla voce del menu a desta o a sinistra, vorrei invece avere le immagini sopra le voci del menu.
E' possibile farlo?

: Re:immagini sopra voci di menu
: giusebos 08 Dec 2013, 20:12:34

certo che si, non devi far altro che agire sulla regola css del tuo template.

Immagino che dopo scriverai:
è possibile avere più informazioni nel dettaglio?
ed io ti risponderò:
inserisci un link al tuo sito ed attendi istruzioni. ;)

: Re:immagini sopra voci di menu
: tincup 08 Dec 2013, 21:28:05

giusebos il sito è ancora in locale, per ora non mi è possibile metterlo in rete.
puoi mandarmi qualche riga di codice da utilizzare come esempio?  ;)

riporto il css relativo al menu

:


.t3-mainnav {
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));
  background-image: -webkit-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: -o-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: linear-gradient(to bottom,#ffffff,#e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #cccccc;
}
.t3-mainnav .navbar {
  color: #666;
  margin-bottom: 0;
  margin-top: 0;
}
.t3-mainnav .navbar-inner {
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-left: 1px solid #d9d9d9;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.t3-mainnav .navbar .nav {
  margin: 0;
}
.t3-mainnav .navbar .nav > li > a {
  border-top: 0;
  border-right: 1px solid #d9d9d9;
  padding: 10px 20px;
  text-shadow: none;
}
.t3-mainnav .navbar .nav > li > a:focus,
.t3-mainnav .navbar .nav > li > a:hover {
  background-color: #666;
  background-color: #757575;
  background-image: -moz-linear-gradient(top,#808080,#666);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#808080),to(#666));
  background-image: -webkit-linear-gradient(top,#808080,#666);
  background-image: -o-linear-gradient(top,#808080,#666);
  background-image: linear-gradient(to bottom,#808080,#666);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f7f7f', endColorstr='#ff666666', GradientType=0);
  text-shadow: none;
  outline: none;
}
.t3-mainnav .navbar .nav > .active > a,
.t3-mainnav .navbar .nav > .active > a:hover,
.t3-mainnav .navbar .nav > .active > a:focus {
  color: #eee;
  text-shadow: none;
  background-color: #00c560;
  background-image: -moz-linear-gradient(top,#00d96a,#00a651);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#00d96a),to(#00a651));
  background-image: -webkit-linear-gradient(top,#00d96a,#00a651);
  background-image: -o-linear-gradient(top,#00d96a,#00a651);
  background-image: linear-gradient(to bottom,#00d96a,#00a651);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00d969', endColorstr='#ff00a651', GradientType=0);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: none;
}
.t3-mainnav .navbar .btn-navbar {
  float: left;
  padding: 5px 10px;
  margin: 4px 20px 4px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #e8e8e8;
  background-image: -moz-linear-gradient(top,#f2f2f2,#d9d9d9);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#d9d9d9));
  background-image: -webkit-linear-gradient(top,#f2f2f2,#d9d9d9);
  background-image: -o-linear-gradient(top,#f2f2f2,#d9d9d9);
  background-image: linear-gradient(to bottom,#f2f2f2,#d9d9d9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffd8d8d8', GradientType=0);
  border-color: #d9d9d9 #d9d9d9 #b3b3b3;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
 
  *background-color: #d9d9d9;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}
.t3-mainnav .navbar .btn-navbar:hover,
.t3-mainnav .navbar .btn-navbar:focus,
.t3-mainnav .navbar .btn-navbar:active,
.t3-mainnav .navbar .btn-navbar.active,
.t3-mainnav .navbar .btn-navbar.disabled,
.t3-mainnav .navbar .btn-navbar[disabled] {
  color: #fff;
  background-color: #d9d9d9;
  *background-color: #cccccc;
}
.t3-mainnav .navbar .btn-navbar:active,
.t3-mainnav .navbar .btn-navbar.active {
  background-color: #bfbfbf \9;
}
.t3-mainnav .navbar .btn-navbar [class^="icon-"],
.t3-mainnav .navbar .btn-navbar [class^=" icon-"] {
  color: #666;
  text-shadow: none;
}
.t3-mainnav .dropdown .caret {
  margin-left: 5px;
}
.t3-mainnav .dropdown-menu {
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.t3-mainnav .dropdown-menu li > a {
  border-top: 1px solid #eee;
  padding: 5px 20px;
  text-shadow: none;
}
.t3-mainnav .dropdown-menu li:first-child > a {
  border-top: 0;
}
.t3-mainnav .navbar .nav > li > .dropdown-menu:before {
  display: none;
}
.t3-mainnav .navbar .nav > li > .dropdown-menu:after {
  display: none;
}
.t3-mainnav .dropdown-menu .disabled > a,
.t3-mainnav .dropdown-menu .disabled > a:hover {
  color: #999;
}
.t3-mainnav .dropdown-menu .disabled > a:hover {
  background-color: transparent;
}
.t3-mainnav .nav li.dropdown.open > .dropdown-toggle {
  background-color: #666;
  color: #eee;
}
.t3-mainnav .nav li.dropdown.active > .dropdown-toggle,
.t3-mainnav .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: #00a651;
  color: #eee;
}

: Re:immagini sopra voci di menu
: giusebos 08 Dec 2013, 21:37:41

se vuoi postare il codice devi usare il tag code. >:( >:(

: Re:immagini sopra voci di menu
: tincup 08 Dec 2013, 22:01:14

questo il css del menu

:


.t3-mainnav {
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));
  background-image: -webkit-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: -o-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: linear-gradient(to bottom,#ffffff,#e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #cccccc;
}
.t3-mainnav .navbar {
  color: #666;
  margin-bottom: 0;
  margin-top: 0;
}
.t3-mainnav .navbar-inner {
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-left: 1px solid #d9d9d9;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.t3-mainnav .navbar .nav {
  margin: 0;
}
.t3-mainnav .navbar .nav > li > a {
  border-top: 0;
  border-right: 1px solid #d9d9d9;
  padding: 10px 20px;
  text-shadow: none;
}
.t3-mainnav .navbar .nav > li > a:focus,
.t3-mainnav .navbar .nav > li > a:hover {
  background-color: #666;
  background-color: #757575;
  background-image: -moz-linear-gradient(top,#808080,#666);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#808080),to(#666));
  background-image: -webkit-linear-gradient(top,#808080,#666);
  background-image: -o-linear-gradient(top,#808080,#666);
  background-image: linear-gradient(to bottom,#808080,#666);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f7f7f', endColorstr='#ff666666', GradientType=0);
  text-shadow: none;
  outline: none;
}
.t3-mainnav .navbar .nav > .active > a,
.t3-mainnav .navbar .nav > .active > a:hover,
.t3-mainnav .navbar .nav > .active > a:focus {
  color: #eee;
  text-shadow: none;
  background-color: #00c560;
  background-image: -moz-linear-gradient(top,#00d96a,#00a651);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#00d96a),to(#00a651));
  background-image: -webkit-linear-gradient(top,#00d96a,#00a651);
  background-image: -o-linear-gradient(top,#00d96a,#00a651);
  background-image: linear-gradient(to bottom,#00d96a,#00a651);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00d969', endColorstr='#ff00a651', GradientType=0);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: none;
}
.t3-mainnav .navbar .btn-navbar {
  float: left;
  padding: 5px 10px;
  margin: 4px 20px 4px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #e8e8e8;
  background-image: -moz-linear-gradient(top,#f2f2f2,#d9d9d9);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#f2f2f2),to(#d9d9d9));
  background-image: -webkit-linear-gradient(top,#f2f2f2,#d9d9d9);
  background-image: -o-linear-gradient(top,#f2f2f2,#d9d9d9);
  background-image: linear-gradient(to bottom,#f2f2f2,#d9d9d9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffd8d8d8', GradientType=0);
  border-color: #d9d9d9 #d9d9d9 #b3b3b3;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
 
  *background-color: #d9d9d9;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}
.t3-mainnav .navbar .btn-navbar:hover,
.t3-mainnav .navbar .btn-navbar:focus,
.t3-mainnav .navbar .btn-navbar:active,
.t3-mainnav .navbar .btn-navbar.active,
.t3-mainnav .navbar .btn-navbar.disabled,
.t3-mainnav .navbar .btn-navbar[disabled] {
  color: #fff;
  background-color: #d9d9d9;
  *background-color: #cccccc;
}
.t3-mainnav .navbar .btn-navbar:active,
.t3-mainnav .navbar .btn-navbar.active {
  background-color: #bfbfbf \9;
}
.t3-mainnav .navbar .btn-navbar [class^="icon-"],
.t3-mainnav .navbar .btn-navbar [class^=" icon-"] {
  color: #666;
  text-shadow: none;
}
.t3-mainnav .dropdown .caret {
  margin-left: 5px;
}
.t3-mainnav .dropdown-menu {
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.t3-mainnav .dropdown-menu li > a {
  border-top: 1px solid #eee;
  padding: 5px 20px;
  text-shadow: none;
}
.t3-mainnav .dropdown-menu li:first-child > a {
  border-top: 0;
}
.t3-mainnav .navbar .nav > li > .dropdown-menu:before {
  display: none;
}
.t3-mainnav .navbar .nav > li > .dropdown-menu:after {
  display: none;
}
.t3-mainnav .dropdown-menu .disabled > a,
.t3-mainnav .dropdown-menu .disabled > a:hover {
  color: #999;
}
.t3-mainnav .dropdown-menu .disabled > a:hover {
  background-color: transparent;
}
.t3-mainnav .nav li.dropdown.open > .dropdown-toggle {
  background-color: #666;
  color: #eee;
}
.t3-mainnav .nav li.dropdown.active > .dropdown-toggle,
.t3-mainnav .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: #00a651;
  color: #eee;
}


PS: utilizzo il framework t3

: Re:immagini sopra voci di menu
: tincup 08 Dec 2013, 22:13:42

ho risolto aggiungendo
display: block
nella parte di codice relativa all'immagine.


Dato che utilizzo il framework T3 ho aggiunto questo al mio custom.css

:


.nav > li > a > img {
  max-width: none;
  display: block;
}