Menu obrazkowe na dole topu

[Przemo]

Witam! Chciałbym zrobić menu obrazkowe jak na http://www.web-board.tk, chciałbym je umieścić jakoś na dole topu np na środku dołu topu. Było by to możliwe? Proszę o kod z zaznaczonym np. Link do obrazka z góry dziękuję. Wiem, że troszkę kombinuję z tym topem, ale po prostu chciałbym go jakoś fajnie i unikalnie urządzić..Pozdrawiam

[pit]

Przenieś menu nad

Kod: Zaznacz cały

                </div>

    <div id="wrap">

Kod: Zaznacz cały

style="width: 830px;"

zmień na

Kod: Zaznacz cały

style="width: 800px;"

W "stylesheet.css"
znajdź

Kod: Zaznacz cały

    #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;}

zmień na

Kod: Zaznacz cały

#menu {list-style: none; margin: 0 auto; margin-top: -80px;}
#menu li {display: inline;}
#menu li a {display: inline-block;
color: #00A7FF;
font: normal 13px Verdana;
text-decoration: none;
padding: 50px 6px 0 6px;
background: url('../imageset/forum_read.png') 50% 0 no-repeat;
}
#menu li a:hover {color: #f1f1f1; background: url('../imageset/forum_unread.png') 50% -1px no-repeat;}
#menu li a.profile {background: url('../imageset/forum_read_locked.png') 50% 0 no-repeat;}

[Przemo]

Mó☻głbyś mi podać dokładny kod np to zmień na to itd, bo ja wstawię to jakoś inaczej bo nie znam dokładnie tych struktur w overall header i nie chce zapsuć.

[pit]

W "overall_header.html znajdź i usuń

Kod: Zaznacz cały

       <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 not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
          </ul>

znajdź

Kod: Zaznacz cały

                                  <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                               </fieldset>
                            </form>
                         </div>
                      <!-- ENDIF -->

                </div>

dodaj po

Kod: Zaznacz cały

       <ul id="menu" <!-- IF S_USER_LOGGED_IN -->style="width: 650px;"<!-- 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 not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
       </ul>

W "stylesheet.css"
znajdź

Kod: Zaznacz cały

    #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;}

zmień na

Kod: Zaznacz cały

    #menu {list-style: none; margin: 0 auto; margin-top: -80px;}
    #menu li {display: inline;}
    #menu li a {display: inline-block;
	color: #00A7FF;
	font: normal 13px Verdana;
	text-decoration: none;
	padding: 50px 6px 0 6px;
	background: url('../imageset/forum_read.png') 50% 0 no-repeat;
    }
    #menu li a:hover {color: #f1f1f1; background: url('../imageset/forum_unread.png') 50% -1px no-repeat;}

[Przemo]

Wszystko ok, tylko wyloguj uciekło w dół. A i w zaloguj nie widać co się pisze.. I chciałbym je na maxa do prawa na topie a i jak te ikonki podmienić ? zeby np dla wyloguj była inna itd.

[pit]

Kod: Zaznacz cały

<ul id="menu" <!-- IF S_USER_LOGGED_IN -->style="width: 650px;"<!-- ELSE -->style="width: 500px;"<!-- ENDIF -->>

zmień na

Kod: Zaznacz cały

<ul id="menu">

Kod: Zaznacz cały

#menu {list-style: none; margin: 0 auto; margin-top: -80px;}

zmień na

Kod: Zaznacz cały

#menu {float: right; list-style: none; margin: -80px 10px 0 0;}

[Przemo]

Teraz całkiem wyszło z topu w prawo. a i jak te ikonki podmienić ? zeby np dla wyloguj była inna itd.

[pit]

Teraz całkiem wyszło z topu w prawo.

Nic takiego (jako gość) nie widzę.

[Przemo]

U mnie jest tak:

http://iv.pl/images/27794725091530949659.jpg

a i jak te ikonki podmienić ? zeby np dla wyloguj była inna itd.

[pit]

W "stylesheet.css" dodaj do

Kod: Zaznacz cały

body {...}

Kod: Zaznacz cały

width: 964px;

[Przemo]

Poradziłem sobię jakoś inaczej. To :

Kod: Zaznacz cały

#menu {float: right; list-style: none; margin: -80px 10px 0 0;}

zmieniłem na

Kod: Zaznacz cały

#menu {float: right; list-style: none; margin: -230px 10px 0 0;}

Jak teraz dodać każdy inny obrazek

[pit]

Poradziłem sobię jakoś inaczej

Nie wszyscy mają taką rozdzielczość monitora jak Ty.

Jak teraz dodać każdy inny obrazek

Do każdego odnośnika dodać class="costam" i w "stylesheet.css" doddać

Kod: Zaznacz cały

 #menu li a.costam {background: url('...') 50% 0 no-repeat;
#menu li a:hover.costam {background: url('...') 50% -1px no-repeat;