Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
Wyśrodkowanie bannera i problem z menu
|
Liczba postów: 16
Liczba wątków: 4
Dołączył: 15-04-2011
Reputacja:
0
Liczba postów: 2
Liczba wątków: 1
Dołączył: 23-04-2011
Reputacja:
0
23-04-2011, 19:40
(Ten post był ostatnio modyfikowany: 23-04-2011, 19:40 przez fisiuxxx.)
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;
}
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
I jest to zły sposób  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
Liczba postów: 16
Liczba wątków: 4
Dołączył: 15-04-2011
Reputacja:
0
No dobra poszukam, ale teraz bardziej problem, co mam złego napisane w kodzie HTML, że te obrazki od menu się nie wyświetlają?
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
.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
Liczba postów: 16
Liczba wątków: 4
Dołączył: 15-04-2011
Reputacja:
0
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ł.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
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
Liczba postów: 16
Liczba wątków: 4
Dołączył: 15-04-2011
Reputacja:
0
No dałem przecież buttonom overflow:hidden. Bynajmniej tak mi się wydaje 
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.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
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
Liczba postów: 16
Liczba wątków: 4
Dołączył: 15-04-2011
Reputacja:
0
Aha  Nie czytałem o tym overflow, ale z tego co napisałeś skumałem o co biega  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? ;(
|
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
|
Użytkownicy przeglądający ten wątek: 1 gości
|
|
Sponsorzy i przyjaciele
|
|
|