Menu obrazkowe

[Przemo]

Witam! Czy istnieje możliwość wykonania menu obrazkowego jak na tej stronie: http://nokia-x3.pl/ nie jest to dokładnie obrazkowo, ale przyciski są robione graficznie. Chodzi o te przyciski Home,Szukaj itd. Chciałbym również, aby po najechaniu one się tak "unosiły" jak na stronie niżej. ale to jest nie konieczne. Proszę o kod, wieczorem będę miał te obrazki.


Pozdrawiam

[jaroslw]

Do takiego menu nie ma najmniejszej potrzeby wykorzystywania obrazków. Zajrzyj do jakiegoś kursu CSS i ustawiania własności czcionek. By po najechaniu odnośniki „unosiły się”, wystarczy dodać margines dla selektora hover np.

Kod: Zaznacz cały

a:hover {
	margin-bottom: 10px;
}

[Przemo]

Ja jednak wolałbym skorzystać z obrazków, proszę o kod.

[jaroslw]

Otwórz źródło tamtego forum i zobacz jak to jest zrobione. Podpowiem, że odpowiada za nie taki kod HTML:

Kod: Zaznacz cały

<table width="900" height="50" cellpadding="0" cellspacing="0" style="background-image: url('templates/Abreo_LoteQ/images/p_c.png'); background-position: center; background-repeat: repeat-x">
<tr>
<td align="center">
<a id="home" href="index.php"></a><a id="sep"></a>
<a id="rejestracja" href="profile.php?mode=register"></a><a id="sep"></a><a id="faq" href="faq.php"></a><a id="sep"></a>
<a id="szukaj" href="search.php"></a><a id="sep"></a>
<a id="members" href="memberlist.php"></a><a id="sep"></a>
<a id="grupy" href="groupcp.php"></a><a id="sep"></a>
<a id="statistics" href="statistics.php"></a><a id="sep"></a>
 
 
<a id="login" href="login.php"></a></td>
</tr>
				</table>

Polecam przerobić je na listę nieuporządkowaną – a tu jeden z przykładów jak to zrobić.

[pit]

Skoro polecasz to posłucham admina.

Kod: Zaznacz cały

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<style type="text/css">
body {background: #000; margin: 50px;}
#menu {width: 600px; list-style: none; margin: 0 auto;}
#menu li {float: left;}
#menu li a {float: left; height: 8px; color: #F8A900; font: normal 13px Verdana; text-decoration: none; padding: 3px 6px 10px 6px; border-right: 2px solid #0066CC;}
#menu li a#rejestracja {color: #E400F8;}
#menu li a:hover, #menu li a#rejestracja:hover {color: #fff; padding: 0 6px 13px 6px;}
</style>
</head>
<body>
	<ul id="menu">
		<li><a href="#">Home</a></li>
		<li><a id="rejestracja" href="#">Rejestracja</a></li>
		<li><a href="#">FAQ</a></li>
		<li><a href="#">Szukaj</a></li>
		<li><a href="#">Użytkownicy</a></li>
		<li><a href="#">Grupy</a></li>
		<li><a href="#">Statystyki</a></li>
		<li><a href="#">Zaloguj</a></li>
	</ul>
</body>
</html>

[Przemo]

Oki, Wpadłem na pewien pomysł jak dla mnie ulepszenia forum. chciałbym zrobić coś takiego jak na screenie niżej: Pozbyć się tej ramki co mam na logo czyli
nowe wiadomości: 0 Zobacz nowe posty (0) Zarządzaj profile Wyloguj [ Przemo ]
i pozbyć się również tego "menu" pod logiem. Dla nie zalogowanych chciałbym na logo tak jak jest panel logowania a jak ktoś się zaloguje to na górze menu ma takie coś :


Cały obrazek : http://images50.fotosik.pl/312/14b6a050c2bb8ef8.jpg

Legenda:

To na czerwono do usunięcia i na górze logo ma się pojawić ramka zaznaczona na biało w której ma być to co napisałem, oczywiscie to nie jest rozkaz tylko prośba.

PS to wyszukiwanie na logu może zostać

[pit]

Tej ramki pozbędziesz się czytając od tyłu - viewtopic.php?f=55&t=12216
Menu pozbędziesz się usuwając

Kod: Zaznacz cały

<div class="borderwrap">

	<div id="submenu">		
	<div class="left"><a href="{U_INDEX}">{L_INDEX}</a></div>
		<div class="left"><a href="{U_PROFILE}">{L_PROFILE}</a></div>
		<div class="left"><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></div>
		<div class="right"><a href="{U_FAQ}">{L_FAQ}</a></div>
		<div class="right"><a href="{U_SEARCH}"> <font color="red">{L_SEARCH}</font></a></div>
		<div class="right"><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></div>	
<div class="right">	<!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}"><!-- IF S_DISPLAY_PM -->{PRIVATE_MESSAGE_INFO}<!-- ENDIF --></a></div>
	<!-- ELSEIF S_REGISTER_ENABLED --><div class="right"><a href="{U_REGISTER}">{L_REGISTER}</a></div><!-- ENDIF -->
	</div>
</div>
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<div id="uplink">
	<p class="register">( <a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED --> | <a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --> )</p>
</div>
<!-- ENDIF -->
</td>

Nowe menu masz prawie gotowe to sobie wstaw po

Kod: Zaznacz cały

<div id="top">

[Przemo]

Wszystko ok, tylko po zalogowaniu ucina mi kawałek topu..
I chciałbym tam jescze zobacz nowe posty.

[pit]

A miałeś taki fajny top.

[Przemo]

Ogarnąłem już nowe posty.
Jak teraz ten top naprawić

[pit]

Tego się nie da naprawić, trzeba robić od nowa.
Końcówka stylesheet.css

Kod: Zaznacz cały

.login-top {
margin: -200px 0 0 20px;
background: #023867;
border: 1px solid #0597BE;
opacity: .7;
filter: alpha(opacity=70);
float: left;
padding: 10px;
width: 140px;
text-align: center;
line-height: 1.8em;
}
           
.login-top a {font-size: 1.1em;}

#menu {list-style: none; margin: 0 auto;}
#menu li {float: left;}
#menu li a {
float: left;
height: 8px;
color: #f1f1f1;
font: normal 13px Verdana;
text-decoration: none;
padding: 3px 6px 10px 6px;
border-right: 2px solid #0066CC;
}
#menu li a#faq {border-right: 0;}
#menu li a:hover {color: #00A7FF; padding: 0 6px 13px 6px;}

overall_header.html

Kod: Zaznacz cały

<a name="top"></a>

            <div id="top">
	<ul id="menu" <!-- IF S_USER_LOGGED_IN -->style="width: 830px;"<!-- ELSE -->style="width: 500px;"<!-- ENDIF -->>
		<li><a href="{U_INDEX}">{L_INDEX}</a></li>
		<!-- IF S_USER_LOGGED_IN --><li><a href="{U_PROFILE}">{L_PROFILE}</a></li><!-- ENDIF -->
		<!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li><!-- ENDIF -->
		<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
		<li><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>
		<!-- IF S_USER_LOGGED_IN --><li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
		<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
		<li><a id="faq" href="{U_FAQ}">{L_FAQ}</a></li>
	</ul>
             <a href="{U_INDEX}" title="{L_INDEX}" id="top_link"></a>

                <!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
                    <div class="login-top">
                            <form method="post" action="{S_LOGIN_ACTION}">
                               <fieldset class="search">
                                  <input class="inputbox login" type="text" name="username" size="10" value="nick" onfocus="if (this.value == 'nick') {this.value = '';}" onblur="if (this.value == '') {this.value = 'nick';}" /><br />
                                  <input class="inputbox login" type="password" name="password" size="10" value="********" onfocus="if (this.value == '********') {this.value = '';}" onblur="if (this.value == '') {this.value = '********';}" /><br />
                                  <!-- IF S_AUTOLOGIN_ENABLED --> <p class="gensmall">Zapamiętaj mnie!
                                  <input type="checkbox" class="radio" name="autologin" /><!-- ENDIF --></p>
                                  <input class="btnmain search" type="submit" name="login" value="{L_LOGIN}" />
                                  {S_LOGIN_REDIRECT}
                                  {S_FORM_TOKEN}
                               </fieldset>
                            </form>
                    </div>
                <!-- ENDIF -->
					  
                  <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
                     <div id="search-box">
                        <form action="{U_SEARCH}" method="post" id="search">
                           <fieldset class="search">
                              <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                              <input class="btnmain search" value="{L_SEARCH}" type="submit" /><br />
                              <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                           </fieldset>
                        </form>
                     </div>
                  <!-- ENDIF -->
            </div>

<div id="wrap">

[Przemo]

Dobra wstawiłem, tylko jak zrobić jakoś czytelniej te Strona głowna, zarządzaj profilem itd

[pit]

W "stylesheet.css" trzeba było od ".login-top" w dół zmienić a nie wszystko wycinać.
Jak ta szukajka teraz wygląda?

[Przemo]

Oki, przywróciłem stary plik stylesheet ale tam nie ma tego :

Kod: Zaznacz cały

.login-top {

[pit]

Może i nie ma ale było.

Kod: Zaznacz cały

                    #search-box {
       color: #fff;
       position: relative;
       margin-top: -120px;
       margin-right: 10px;
       float: right;
       text-align: center;
       white-space: nowrap; /* For Opera */
       border: 0;
    }

    * html #search-box {text-align: right;}
       
    #search-box #keywords {
       width: 105px;
       opacity: .7;
       filter: alpha(opacity=70);
       background: #023867;
       border: 1px solid #0597BE;
       color: #ddd;
    }
       
    #search-box #keywords:hover, #search-box #keywords:focus {border-color: #15C0DB;}

    fieldset.search {
       border: 0;
       font-family: Verdana, Helvetica, Arial, sans-serif;
       font-size: 1.1em;
    }

                                                        .inputbox#keywords {
           padding: 2px;
           cursor: text;
           border: 1px solid #0597BE;
        }

        .inputbox#keywords:hover, .inputbox#keywords:focus {
           border-color: #15C0DB;
        }

        .btnmain.search {
           background: transparent;
           border: 1px solid #0597BE;
           color: #ddd;
        }

        .btnmain.search:hover {
           color: #0597BE;
        }

zmień na

Kod: Zaznacz cały

#search-box {
color: #fff;
position: relative;
margin-top: -120px;
margin-right: 10px;
float: right;
text-align: center;
white-space: nowrap; /* For Opera */
border: 0;
}

* html #search-box {text-align: right;}
	
#search-box #keywords {
width: 105px;
opacity: .7;
filter: alpha(opacity=70);
background: #023867;
border: 1px solid #0597BE;
color: #ddd;
}
	
#search-box #keywords:hover, #search-box #keywords:focus {border-color: #15C0DB;}

fieldset.search {
border: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1.1em;
}

.inputbox {
padding: 2px;
cursor: text;
border: 1px solid #0597BE;
background: transparent;
}
               
.login-top .inputbox, .login-top p {
margin: 0 0 4px 0;
width: 95%;
}
               
.inputbox:hover, .inputbox:focus {
border-color: #15C0DB;
}

.btnmain.search {
border: 1px solid #0597BE;
background: transparent;
color: #ddd;
}

#search-box .btnmain.search {
background: #023867;
border: 1px solid #0597BE;
opacity: .7;
filter: alpha(opacity=70);
}

.btnmain.search:hover {color: #0597BE;}
               
.login-top {
margin: -200px 0 0 20px;
background: #023867;
border: 1px solid #0597BE;
opacity: .7;
filter: alpha(opacity=70);
float: left;
padding: 10px;
width: 140px;
text-align: center;
line-height: 1.8em;
}
           
.login-top a {font-size: 1.1em;}

#menu {list-style: none; margin: 0 auto;}
#menu li {float: left;}
#menu li a {
float: left;
height: 8px;
color: #f1f1f1;
font: normal 13px Verdana;
text-decoration: none;
padding: 3px 6px 10px 6px;
border-right: 2px solid #0066CC;
}
#menu li a#faq {border-right: 0;}
#menu li a:hover {color: #00A7FF; padding: 0 6px 13px 6px;}