Ogólna pomoc dotycząca stylów - [Problem] Chc? zast?pi? menu z css obrazkiem (belk?)
RebeliaCS - 28-04-2015, 20:00
Temat postu: [Problem] Chcę zastąpić menu z css obrazkiem (belką)
Witam, chciał bym zastąpić to menu które mam w css:
| Kod: | /* MENU */
.menu {
width: 1200px;
height: 45px;
background: #2362e0; /* Old browsers */
background: -moz-linear-gradient(top, #2362e0 0%, #004cff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2362e0), color-stop(100%,#004cff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2362e0 0%,#004cff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2362e0 0%,#004cff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2362e0 0%,#004cff 100%); /* IE10+ */
background: linear-gradient(to bottom, #2362e0 0%,#004cff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2362e0', endColorstr='#004cff',GradientType=0 ); /* IE6-9 */
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.menu ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 100%;
height: 50%;
}
.menu ul li {
float: left;
margin: 0 auto;
}
.menu ul li a {
font: 14px/45px 'Lato', sans-serif;
float: left;
padding: 0px 15px 0px 15px;
transition: 0.5s;
text-decoration: none;
font-weight:normal;
text-transform:uppercase;
color:#efefef;
}
.menu ul li a:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
}
|
Obrazkiem o ten samej wielkości.
Menu można zobaczyć na forum cs-rebelia.pl
Zielone pod headerem.
kooza - 28-04-2015, 20:37
to zastępujesz klase .menu ul li a na tą:
| Kod: | background: url('images/obrazek.png') no-repeat;
width: XXpx;
float: left; |
Wysokości nie dodajesz bo jak ma być taka sama jak jest to zostaje przy 45px;
RebeliaCS - 29-04-2015, 07:31
To nie działa...
kooza - 29-04-2015, 08:41
Zarzuć jeszcze kod html menu + obrazki ktore chcesz wrzucić w niego
RebeliaCS - 29-04-2015, 11:53
Najgorsze jest to że to nie ja robiłem ten styl a go przerabiam i nie wiem gdzie szukać a osoba która go robiła mi nie pomoże ponieważ jemu nikt nie pomagał i on tez nikomu nie będzie pomagał...
kooza - 29-04-2015, 15:56
To załącz plik overall_header.tpl
RebeliaCS - 29-04-2015, 16:59
Plik:
kooza - 29-04-2015, 21:24
dobra w css nic nie ruszaj.
w overall_header.tpl daje Ci przykład. Czyli znajdz:
| Kod: | | <li><a href="{U_INDEX}"><i class="fa fa-home"></i>Home</a></li> |
zamień na:
| Kod: | | <li><a href="{U_INDEX}"><div style="background: url('http://itbeta.pl/images/business/toplinks/home.png') no-repeat; width: 100px; height: 45px;"></div></li> |
Jak zrobisz sobie obrazki do menu, to tylko zmień odnośnik i reguluj szerokością 'width: 100px;'
RebeliaCS - 29-04-2015, 21:32
Ja chcę zostawić menu, kurde nie zrozumiałeś mnie. Chcę zmienić tylko grafikę całego menu a reszta zostaje czyli zamiast jednolitego zielonego koloru chcę dać np. to:
Asus - 29-04-2015, 21:36
| Kod: | .menu {
background: url("http://webmasteruj.pl/upload/files/belka_4616.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 45px;
width: 1200px;
} |
kooza - 29-04-2015, 21:36
no właśnie źle Cię zrozumiałem to w .css menu znajdź:
| Kod: | background: #248606; /* Old browsers */
background: -moz-linear-gradient(top, #248606 0%, #058905 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#248606), color-stop(100%,#058905)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #248606 0%,#058905 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #248606 0%,#058905 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #248606 0%,#058905 100%); /* IE10+ */
background: linear-gradient(to bottom, #248606 0%,#058905 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#248606', endColorstr='#058905',GradientType=0 ); /* IE6-9 */ |
i zamień na:
| Kod: | | background: url('http://webmasteruj.pl/upload/files/belka_4616.png') no-repeat; |
obrazek wgraj sobie na serwer i zmień odnośnik 
RebeliaCS - 30-04-2015, 07:34
Dzięki, znów udowodniłeś że się na tym znasz! Teraz forum wygląda super. Jeszcze raz dzięki!
A jak bym chciał zmienić te zielone belki niżej?
//edit już sobie poradziłem w ten sam sposób tyle że zmieniłem ten kod na ten co mi napisałeś: | Kod: | background: #3d730e; /* Old browsers */
background: -moz-linear-gradient(top, #3d730e 0%, #3d730e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d730e), color-stop(100%,#3d730e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3d730e 0%,#3d730e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3d730e 0%,#3d730e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3d730e 0%,#3d730e 100%); /* IE10+ */
background: linear-gradient(to bottom, #3d730e 0%,#3d730e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d730e', endColorstr='#3d730e',GradientType=0 ); /* IE6-9 */ |
|
|
|
