PDA

Zobacz pełną wersję : poziome menu i formatowanie css



sokolmichal
23-06-2008, 01:50
witam
w tworzonym szablonie joomla dodałem menu.

<div id="menu" align="center">


<?php if($this->countModules('user2')) : ?>
<jdoc:include type="modules" name="user2" style="" />
<?php endif; ?>


</div>

chciałbym żeby to menu było poziome i miało kolor zielony.

jak to sformatować w pliku css??

z góry wielkie dzięki

Jac
23-06-2008, 12:14
Witaj,
Dajesz dla listy właściwość display: inline;
i masz poziome menu.

sokolmichal
23-06-2008, 15:54
tylko właśnie nie wiem jak odwołać sie do tego menu w css:/ ??

moje
23-06-2008, 21:54
Dopisz przyrostek do klasy dla menu np. "klasa menu"-hor
A w pliku css wpisz pod klasom menu:


"klasa menu" {
...
}

"klasa menu"-hor {
display: inline;
"+ kod odpowiedzialny za wygląd*"
}
* jeśli różnica w porównaniu z jest znaczna, to wpisz cały kod odpowiedzialny za wygląd menu, jeśli różnica jest nie wielka, to wpisz tylko część kodu.

sokolmichal
27-06-2008, 12:53
może ktoś wprost mój kod tak wy edytować żeby jak w kleje wszystko do pliku php i css żeby od razu działało??

moje
27-06-2008, 17:24
Przecież to wszystko jest w sieci:
http://www.forumweb.pl/viewtopic.php?t=22422
http://www.pomoc.joomla.pl/content/view/596/46
Oraz kursy css, np:
http://webmade.org/kursy-online/kurs-css.php
http://www.webhelp.pl/kursy/css/index.php?roz=html
http://www.kurshtml.boo.pl/

sokolmichal
06-07-2008, 17:14
doszedłem do czegoś takiego:

plik index.php:

<ul class="menu">

<li> <jdoc:include type="modules" name="top" style="raw" /> </li>

</ul>

plik template_css.css:

.menu ul, li { list-style:none}
a:link, a:visited, a:hover, a:active

{
list-style:none;
float:left;
display: block;
width: 176px;
text-decoration: none;
padding: 7px;
font-weight: bold;
background-color: #27c;
color: #def;
border-left: 10px solid #25b;

}

a:hover {
width: 166px;
background-color: #28e;
color: #fff;
border-left: 20px solid #26d;
}

wszystko fajnie tylko jest małe ale:(

jak dodaje nowe menu to wygląda tak samo a chciałbym żeby wyglądało inaczej... Próbowałem zrobić to jakoś przez klasy ale mi nie wychodzi:/

może mi ktoś powiedzieć jak to powinien wyglądać kod żeby wszystko było ok??

Szibena
06-07-2008, 20:21
Masz rację. Najwyraźniej klasa przypisana poziomemu menu jest też przypisana nowemu menu. Aha i masz źle napisany kod HTML. Menu w Joomla! jest samym w sobie listą więc nie potrzeba robienia tak jak ty to zrobiłeś ;)

Może weź tą listę, która jest menu poziomym w diva np.


<div id="topmenu"> <jdoc:include type="modules" name="top" style="raw" /></div>


A CSS mógłby wyglądać o tak:


#topmenu ul{ list-style:none}
#topmenu li { list-style:none}
#topmenu a:link {
list-style:none;
float:left;
display: block;
width: 176px;
text-decoration: none;
padding: 7px;
font-weight: bold;
background-color: #27c;
color: #def;
border-left: 10px solid #25b;
}

....

#topmenu a:hover {
width: 166px;
background-color: #28e;
color: #fff;
border-left: 20px solid #26d;
}


P.S - Radzę Ci poczytać o tworzeniu szablonach w Joomla! i o tworzenie arkuszy stylów CSS.

sokolmichal
06-07-2008, 20:33
wielki dzięki za pomoc:)