PDA

Zobacz pełną wersję : Wyglad menu gornego



nspk
30-11-2006, 19:55
Witam, probuje dojsc do wyglad menu gornego tak jak w zalaczniku jeden.

Po wpisaniu nizej podanego kodu:
a.mainlevel-nav:link, a.mainlevel-nav:visited {
background: url(../images/manu gorne.JPG) no-repeat 12px 5px;
font: bold 12px/20px arial;
text-align: left;
padding-top: 0px;
padding-left: 23px;
height: 20px !important;
text-decoration: none;
}

a.mainlevel-nav:hover, a.mainlevel-nav#active_menu-nav {
background: url(../images/manu gorne.JPG) no-repeat 12px 5px;
}

Uzyskalem wyglad jak w drugim zalaczniku.
Mzoe ktos pomoze to zmeinic??

stone
30-11-2006, 21:20
na początek wywaliłbym to 12px 5px i zobaczył efekt, tlo najlepiej sobie wyrownac do gory i prawej tak aby scięty róg był widoczny,

Zmien także nazwę pliku aby nie zwierała spacji

nspk
30-11-2006, 21:43
Tak jak poradziles, zmeinilem nazwe pliku, oraz usunolem te rozmairy.
Jakimi komendami moge wyrowanc obrazek wedlug twoich wskazan??

W zalaczniku numer trzy jest wynik tego co osiagnolem do tej pory.

stone
30-11-2006, 21:49
np


background: url(../images/manu gorne.JPG) no-repeat top right;

albo bottom lub left (nigdy nie wiem jak to użyć :)

nspk
30-11-2006, 22:04
Hehe coraz lepsze efekty osiagam:D, - oczywiscie dzieki Twojej pomocy Stone;)

Moze doradzilbys mi jak wysrodkowac teskt w obrazku, oraz jak zlikwidowac ta dolna czerowna przerwe i wykonac obramowanie przyciksu w tym samym kolorze co ten czerowny??:D

Inna sprawa czy da sie jakos powiekszyc ten obrazek??

Mam nadzieje ze Cie nie mecze;)

stone
30-11-2006, 22:10
Wyśrodkowanie to nie w tej klasie, a ale w klasie dla komórki w jakiej link się znajduje ale zmniesz to

padding-left: 23px;

Już będzie lepiej

Co do czerwonej linii to już musisz kombinać szerzej, z położeniem modułu np

Edit.

a w sumie dodaje jeszcze

padding-right:

w takiej samej wartości jak left i będzie ok

nspk
30-11-2006, 22:23
Dzieki wielkie za ten padding-right:), od razu pomglo.

Z polozeniem modulu, to musze chyba edytowac php??

stone
30-11-2006, 22:32
Może nie od razu php, tylko dalej css tylko musisz zobaczyc w kodzie strony jakie klasy w tej okolicy wystęują i poeksperymentowac:)

nspk
30-11-2006, 22:39
Ok wielkie dzieki:)

Jeszcze jedno pytanko. Nie orientujesz się może jak rodzielić background portalu, od backgroundu panelu administracyjnego, a dokladnie pol edycji tekstu do artykolow - w mojej templatce jest to zalezne.

stone
01-12-2006, 08:16
We właściwościach edytora (w części mambots) powinno być możliowośc przyporządkowanie pliku css, wpisz jakiś nieistniejący

nspk
01-12-2006, 08:51
Wlasnei do tego doszedlem jak zoabczylem Twoja odpowiedz;)

A co do tych klas wokol gornego menu mam cos takiego, jak to od Siebie moze byc zalezne:
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="templates/sb_brutus/images/grbck.gif">
<tr>
<td bgcolor="#efefef">&nbsp;</td>

</tr>
</table></td>
</tr>
<tr valign="top" bgcolor="#EFEFEF">
<td colspan="2"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>
</strong></font></td>
</tr>
</table>
<p align="left">&nbsp;</p>

<p align="left">&nbsp;</p>
<p>&nbsp;</p>
</div></td>
<td align="center" valign="middle" bordercolor="#ffbd19" bgcolor="#ffbd19"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#990C0F" background="images/dbbck.gif" bgcolor="#990C0F">
<tr bordercolor="#9C9A9C">
<td align="left" bordercolor="#990C0F" bgcolor="#990C0F"><div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<table width="100%" border="0" cellpadding="0" cellspacing="1"><tr><td nowrap="nowrap"><a href="http://localhost/index.php?option=com_content&amp;task=view&amp;id=1&amp;Itemid =4" class="mainlevel-nav" id="active_menu-nav">O nas</a><a href="http://localhost/index.php?option=com_contact&amp;Itemid=3" class="mainlevel-nav" >Kontakt</a><a href="http://localhost/index.php?option=com_search&amp;Itemid=5" class="mainlevel-nav" >Szukaj</a></td></tr></table> </font></div></td>

</tr>
</table></td>
</tr>

<tr>
<td valign="top" bgcolor="#FFFFFF"><div align="right"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>
<span class="pathway"><a href="http://localhost/index.php" class="pathway">Aktualności</a> <img src="http://localhost/images/M_images/arrow.png" alt="arrow" /> O nas </span> </strong><img src="templates/sb_brutus/images/blank.gif" width="8" height="20" /><strong> </strong></font> <br />

<br />
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top"><table width="98%" border="0" align="center" cellpadding="4" cellspacing="0">

<tr>
<td class="mainpage"><div align="center">
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>
<table border="0" widht="100%" align="center"><tr> <td><a href="index.php?option=com_artbanners&amp;task=clk&amp;id=1" target="_blank"><img src="http://localhost/images/banners/baner_70x580.gif" style="border:0px solid green" vspace="0" alt="maxid-gora" width="580" height="70" /></td></tr></table> </td>
</tr>
</table>

</div> </td>
</tr>
<tr>
<td class="mainpage">&nbsp;</td>
</tr>
<tr>
<td class="mainpage"> <table class="contentpaneopen">
<tr>

nspk
01-12-2006, 09:25
Wielkie dzieki za odpoweidz:)

Hmm cos nie abrdzo moge sobie poradzic z tymi klasami....
Jak wstawie do menu cos dluzszego to dzieja sie takie rzeczy jak w zalaczniku.

W kodzie jak sprawdzielm, obok gornego menu, jest pathway, i glowne menu - co to am do rzeczy???

stone
01-12-2006, 22:46
Co do obrazka to masz za maly obrazek tła i nie starcza go przy dłuższych nazwach:)

A co do odstępu to menu masz w tabeli:

<table width="100%" border="0" cellpadding="0" cellspacing="1">

zmien na

<table width="100%" border="0" cellpadding="0" cellspacing="0">

nspk
02-12-2006, 00:20
Hmm usunolem w tabeli cellsapcing, ale to nie wiele dalo:). Zniknela tylko linia odzielajaca menu glowne od glownego okna:]

Zrobilem screena z dreamweavera - zalacznik 1. Diva wewnatrz tej komorki nie moge zanic rozciagnac aby zakryl cala komorke:(
Drugi zalacznik pokazuje po zminaie koloru w dreamie.

Zmiana wielksoci obrazka pomogla:)

A teraz wogole cos dziwnego sie dzieje:
1. w zalaczniku "jeden" wyglad po otwarciu strony
2. w zalaczniku "dwa" wyglad po nacisnieciu "o nas"
Czyzby za duzy rozmiar obrazka??

Moze ktos by mi pomogl porpawic templatke??
Jak by ktos sie poswiecil to niech pisze an gg 4511475 , lub tlena: nspk@o2.pl

Viking
02-12-2006, 23:13
porad udzielamy na forum z nadzieją (niezbyt rozsądną może), że jak później ktoś będzie się borykał z podobnym problemem to znajdzie gotową odpowiedź. dlatego nie udzielamy ich zasadniczo na priv (wyjątki: potrzebny dostęp do administacji serwisu, ktoś nas rozczuli a wiemy, że problem jest tak banalny lub jednostkowy, że nie warto go omawiać na forum).

Wracając do problemu: dla początkujących w html/css przydatny jest global reset (*{margin:0;padding:0}) opisywany przeze mnie nieco szerzej niedawno. Jeśli się nie mylę, problem jest w tym, że któryś z elementów ma zdefiniowany padding lub margin domyślny. Inna możliwość jest taka, że komórka jest za wysoka w stosunku do zawartości: spróbuj z vertical-align eventualnie line-height.
Dodatkowo jestem zdania, że graficzne edytory www nadają się zgrubsza do stron statycznych, a przy dynamicznych powodują dodatkowe problemy.
Koniec, końców nie bardzo rozumiem powyższego posta więc możliwe że bredzę ;)

nspk
03-12-2006, 08:11
Qrczarz wkleilem w zalaczniku dwa nie ten obrazek co chcialem:]

Po pierwsze - Viking czego uzywasz do tworzenia templatek?? Jakich narzedzi??

Druga sprawa to ja teraz poprawic templatke aby sie nie rozjdzala tak jak w zalacznikacha daje??(sprawdzilem globalny reset wklejajc do css *{margin:0;padding:0} - spowodowalo to to, ze templatka troszke podciagnela sie w gore, ale nie poprawilo beldeu rozciagania po kliknieciu w top menu)
Instrukcje vertical-align, line-heigh wogole nic nie zmeinialy:/.

Odkrylem ze w firefoxe i operze topmenu jest dobrze foramtowane - nierozciaga strony:]. tylko gowniany ie ma problemy??

Viking
03-12-2006, 12:39
Narzędzia: piszę w trybie wyłącznie tekstowym i podglądam w kilku przeglądarkach (IE, Opera, Mozilla i FF) pisać możnanawet w notatniku, ale podświetlanie składni pozwala łatwiej orientować się w obfitszym kodzie (PSPad). Dreamweaver nie jest darmowy, a jego filozofia podświetlania nie bardzo mi odpowiada, ma natomiast bardzo wygodną możliwość autouzupełniania i jeszcze pare gadżetów (widoku graficznego nie używałem bo nie jest miarodajny w podglądzie a tym bardziej edycji).

Załączone przez Ciebie obrazki są przydatne, ale pozwalają się tylko domyślać w czym problem. Możesz podlinkować stronę?

Przy takich objawach jak podajesz wygląda na to, że w jakimś elemencie blokowym, raczej nadrzędnym do menu, zadana wysokość jest mniejsza niż wysokość jego zawartości (IE interpretuje height jako min-height). Możesz więc znaleźć odpowiedni element i dać mu overflow:hidden (wtedy dla IE height=height). Najlepiej stworzyć sobie coś takiego #overflowhidden {overflow:hidden} i wstawiać id="oveflowhidden" do kolejnych znaczników HTML w index.php jeśli nie trafisz od razu.
Drugą metodą jest wyizolowanie samego menu (makieta w HTMLu) wraz z odpowiednim fragmentem css i doprowadzenie go do porządku, później wrzucenie go w kontekście w którym występuje, aż w końcu wstawienie zmienionego css na powrót. W ten sposób dowiesz się co Ci bruździ.

Jest jeszcze kwestia obramowań (border). Potrafią przysporzyć wielu problemów jeśli chcesz dobrze wyświetlać w różnych przeglądarkach.

nspk
03-12-2006, 14:34
Tutaj masz linka do moeje strony (http://maxid.pl/projekty/doradcaenergetyczny/index.php?option=com_frontpage&Itemid=2).

Wstawiłem do css #overflowhidden {overflow:hidden} ( tak mysle ze to powinno trafic do css), a teraz srpawa zanacznikow id w index.php.
Widzisz jestem strasznym laikiem jesli chodzi o php i zauwazam ze i html tez:(. Moglbys mi podac jakies dobre strony ktore dobrze opisuja strony html i php w htmlu. Bo nei abrdzo moge znalesc miejsca gdzie mam wstawic ten zancznik(okreslaja to tabele, ine rzeczy)??. Czy mam go wstawic w kazdy element strony??

Dajmy an to ta czesc kodu:
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php if ( $my->id ) { initEditor(); } ?>
<?php // Custom MainMenu extension...
$database->setQuery("SELECT * FROM #__menu WHERE menutype = 'mainmenu' AND published ='1' AND parent = '0' ORDER BY ordering");
$mymenu_rows = $database->loadObjectList();
$mymenu_content = "";
foreach($mymenu_rows as $mymenu_row) {
// print_r($mymenu_rows);
$mymenulink = $mymenu_row->link;
if ($mymenu_row->type != "url") {
$mymenulink .= "&Itemid=$mymenu_row->id";
}
if ($mymenu_row->type != "separator") {
$mymenu_content .= "<a href=\"".sefRelToAbs($mymenulink)."\" class=\"bar\">$mymenu_row->name</a><font color=\"#D3F5D0\"> | </font>";
}
}
$mymenu_content = substr($mymenu_content,0,strlen($mymenu_content)-2);
?>
<link rel="alternate" title="<?php echo $mosConfig_sitename; ?>" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/index2.php?option=com_rss&no_html=1" type="application/rss+xml" />
<link href="templates/de/css/template_css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #FFFF00}
-->
</style>
</head>

<body bgcolor="#FFFFFF">
<table width="980" border="0" align="center" cellpadding="0" cellspacing="1" bordercolor="#990C0F" bgcolor="#990C0F">
<tr>
<td height="164" colspan="2" bordercolor="#990C0F" bgcolor="#990c0f">&nbsp;</td>
</tr>

<tr bgcolor="#FFFFFF">
<td width="175" rowspan="2" align="center" valign="top" bgcolor="#efefef"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="#EFEFEF" bgcolor="#EFEFEF">
<tr valign="top">
<td colspan="2"><p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>
<?php mosLoadModules ( 'left' ); ?>
</strong></font></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="templates/sb_brutus/images/grbck.gif">
<tr>
<td bgcolor="#efefef">&nbsp;</td>
</tr>
</table></td>
</tr>
<tr valign="top" bgcolor="#EFEFEF">
<td colspan="2"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>
<?php mosLoadModules ( 'user1' ); ?>
</strong></font></td>
</tr>
</table>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p>&nbsp;</p>
</div></td>
<td align="left" valign="top" nowrap="nowrap" bordercolor="#FFFFFF" bgcolor="#990C0F"><table width="100%" height="25">
<tr>
<th scope="col"><div align="left">
<?php mosLoadModules ( 'user5' ); ?>
</div></th>
</tr>
</table></td>
</tr>


<tr>
<td valign="top" bgcolor="#FFFFFF"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="49" colspan="2" align="center" valign="top"><div align="right"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>
<br />
<?php mosPathWay(); ?>
</strong></font></div></td>
</tr>
<tr>
<td valign="top"><table width="98%" border="0" align="center" cellpadding="4" cellspacing="0">
<tr>
<td class="mainpage"><div align="center">
<?php mosLoadModules ( 'advert1' ); ?>
</div> </td>
</tr>
<tr>
<td class="mainpage">&nbsp;</td>
</tr>
<tr>
<td class="mainpage"><?php mosMainBody(); ?></td>
</tr>

</table></td>
<td width="10" valign="top"> <?php
if ( mosCountModules( 'right', -1 ) ) {
?>
<br />
<div style="width:160px">
<?php mosLoadModules ( 'right', -1 ); ?>
</div>
<?php
} ?>
<?php
if ( mosCountModules( 'advert2' ) ) {
?>
<div style="width:160px">
<?php mosLoadModules ( 'advert2' ); ?>
</div> <?php
} ?></td>
</tr>
</table>
<p align="center">
<?php mosLoadModules ( 'advert3' ); ?>
</p> <div align="center"></div></td>
</tr>
</table>
<div align="center">
<p class="style1">2006 Copyright by Instalator Polski Sp. z o.o. All rights reserved. </p>
</div>
<p>&nbsp;</p>
</body>
</html>

Jak by ktos mogl to niech wstai przykaldowo jeden zancznik gdzies w kod i pokaze jak to zrobil??

Ina nie przyjemna sprawa jaka teraz odkrylem to to ze nie moge dodac podmenu :/. Po dodanieu podmenu w panelu administratora, podmenu nie pojawia sie pod menu nadrzednym.