Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Wyśrodkowanie bannera i problem z menu
#1
Odpowiedz
#2
Jeżeli chcesz, by po najechaniu na obrazek pojawiał się inny obrazek, robisz w ten sposób:

Przykładowo:

Kod:
#button2 {
    display: block;
    background-image: url(images/ch_08.png);
    width: 72px;
    height: 29px;
}
#button2:hover {
    display: block;
    background-image: url(images/ch_08_hover.png);
    width: 72px;
    he
ight: 29px;
}
Odpowiedz
#3
I jest to zły sposób Smile Zły, bo grafika wczyta się dopiero po najechaniu. Od tego używa się css sprite, ale o tym było już milion razy nawet na tym forum. Poszukaj dobrze
Odpowiedz
#4
No dobra poszukam, ale teraz bardziej problem, co mam złego napisane w kodzie HTML, że te obrazki od menu się nie wyświetlają?
Odpowiedz
#5
.buttony {wszystkie) są blokowe. Ok - to dobrze. Ale one nie mają overflow:hidden, a ich zawartość jest pusta (pusty link). Więc się nie wyświetlają. Daj im overflow:hiden
Odpowiedz
#6
Dobra. Teraz mam coś takiego.

Kod HTML
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=windows-1250"/>
<title>Ośrodek Szkolenia Kierowców "CHMARA" w Tczewie</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="wrapper">
  <div class="header">
      <div class="clr"></div>
    </div>
     <div class="margines"></div>
      <div class="menu_nav">
    <div class="belka1"></div>

        <ul>
          <li class="active"><a href="index.html"><div class="button1"></div></a></li>
          <li><a href="#"><div class="button2"></div></a></li>
          <li><a href="#"><div class="button3"></div></a></li>
          <li><a href="#"><div class="button4"></div></a></li>
          <li><a href="#"><div class="button5"></div></a></li>
        </ul>

      <div class="clr"></div>
   </div>
</div>
</body>
</html>

Kod CSS
Kod:
.html, .main {
    padding:0;
    margin:0;
}
.wrapper {
    margin: 0 auto;
}
.clr {
    clear:both;
    padding:0;
    margin:0;
    width:100%;
    font-size:0;
    line-height:0;
}
.logo {
    padding:0;
    float:left;
    width:auto;
}
.header {
    background-image: url(images/ch_03.png);
    margin:0 auto;
    padding:0;
    width:980px;
    height:218px;
}
.logo {
    padding:0;
    float:left;
    width:auto;
}


.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
    margin:0;
    padding:0;
}
.menu_nav {
    margin:0 auto;
    padding:0;
    width:980px;
    height:29px;
}
.margines {
    padding:1px;
}
.belka1 {
    margin:0 0;
    padding:0;
    width:310px;
    height:29px;
    background-image: url(images/ch_06.png);
.button1 {
    display: block;
    overflow:hidden;
    background-image: url(images/ch_07.PNG);
    width: 72px;
    height: 29px;
}
.button2 {
    display: block;
    overflow:hidden
    background-image: url(images/ch_08.PNG);
    width: 72px;
    height: 29px;
}
.button3 {
    display: block;
    overflow:hidden
    background-image: url(images/ch_09.PNG);
    width: 72px;
    height: 29px;
}
.button4 {
    display: block;
    overflow:hidden
    background-image: url(images/ch_10.PNG);
    width: 72px;
    height: 29px;
}
.button5 {
    display: block;
    overflow:hidden
    background-image: url(images/ch_11.PNG);
    width: 72px;
    height: 29px;
}

.menu_nav ul {
    list-style:none;
    height:29px;
    float:left;
}

A nadal jest tak samo ;/ Obrazki się nie wyświetlają, banner jest całkiem po lewej... Gdybym miał jakiś szablon ze stylami, na którym mógłbym się wzorować to jakoś bym sobie poradził.
Odpowiedz
#7
Zacytuję wielkiego mędrca, którego każdy powienien znać:
".buttony {wszystkie) są blokowe. Ok - to dobrze. Ale one nie mają overflow:hidden, a ich zawartość jest pusta (pusty link). Więc się nie wyświetlają. Daj im overflow:hiden "

Czemu wstawiasz div w link? To jest złe. Przeczytaj raz jeszcze co ci napisałem i zastosuj się do tych rad. div id="button" itp powinien mieć dodatkowo overflow:hidden. Tracę w wiarę w internet Smile
Odpowiedz
#8
No dałem przecież buttonom overflow:hidden. Bynajmniej tak mi się wydaje Wink
W zawartości dałem diva, bo jakiś odnośnik musi chyba być. Jak mam to umieścić? Nigdzie nie mogę tego znaleźć, bo każdy tworzy menu przy użyciu CSS; używa z tego tła, obramowań, tekstu itp., a mało kto używa poprostu obrazków.
Odpowiedz
#9
miales tak:

<li><div class="button2"><a href="#"></a></div></li>

masz tak:

<li><a href="#"><div class="button4"></div></a></li>

Oba są złe.
Powinno być tak:
<li><a href="xxxx">Nazwa linka</a></li>

Resztę już napisałem powyżej. Poczytaj sobie o overflow:hidden; text-indent; display:block. I nawet nie musisz szukać po necie, bo setki razy na tym forum pisałem o identycznym problemie
Odpowiedz
#10
Aha Wink Nie czytałem o tym overflow, ale z tego co napisałeś skumałem o co biega Wink Chodzi o to, że odpowiada to za to, iż nie wyświetla nazw odnośników? Czyli w tym przypadku co napisałeś, nie wyświetli: Nazwa linka?
A skąd będzie wiadomo jaki obrazek ma iść do jakiego linka? Skoro nigdzie nie ma diva? ;(
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  problem z tłem pod menu loose 1 3,157 06-07-2017, 20:00
Ostatni post: loose
  problem z menu p410 10 10,355 18-06-2017, 18:34
Ostatni post: lemans88
  CSS dla menu i problem z selektorami neferith 4 5,265 30-06-2016, 00:58
Ostatni post: Brain23
  MENU - poważny problem wysokości! asus 0 2,536 05-12-2014, 23:34
Ostatni post: asus
  Trzypoziomowe menu - problem rejcz 3 5,673 25-01-2014, 17:16
Ostatni post: Kartofelek

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl