Forum PHP.pl > [html][css] Problem z listą

JarekPMI

31.01.2014, 04:08:05

Tak więc chcę zrobić menu górne wiadomo z listy punktowanej to mi się udało

[HTML] pobierz, plaintext 
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<title>Wyprawa</title>
</head>
<body>
<div ID="kontener">
	<div ID="naglowek">
	</div>
	<div ID="menu">
	<ul>
	<a href="index.html"><li>Wyprawa</li></a>
	<a href="o_nas.html"><li>O nas</li></a>
	<a href="oferta.html"><li>Oferta</li></a>
	<a href="patronat.html"><li>Patronat</li></a>
	<a href="sponsorzy.html"><li>Sponsorzy</li></a>
	<a href="kontakt.html"><li>Kontakt</li></a>
	<a href="mont_blanc.html"><li>Mont Blanc 2013</li></a></td>
	</ul>
	</div>
 
	<div ID="tresc">
	</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

body {
background-color:white;
}

#kontener {
width:1000px;
text-align:left;
margin:5px auto;
background-color:white;
z-index:1;
}

#naglowek{
background-image:url('images/naglowek.png');
height:431px;
}

ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

ul {
text-align: center;
border-bottom: 1px solid #888;
padding-bottom: 5px;
}

ul li {
display: inline;
white-space: nowrap;
margin-right: 5px;
padding-left:26px;
padding-right:25px;
}

ul a:link, ul a:visited {
font-size:18px;
text-decoration: none;
background-color: #ccc;
color: #000;
border: 1px solid #888;
padding: 5px;
}

ul a:hover {
background-color: #fff;
border-bottom-color: #fff;
}

i teraz tak chciałbym aby po kliknięciu w jakąś tam zakładkę i wejściu w nią aby zakładka ta paliła się na biało oznaczając aktualnie wybraną zakładkę np. żeby było wiadomo że jesteśmy w indeksie próbowałem to zrobić dodając div nowy z nowym ID i w każdej stronie pod odpowiednim punktem ale wychodziło coś takiego http://jaroslaw13.cba.pl/1.png albo inne cuda niewidy za pomocą takiego kodu

[HTML] pobierz, plaintext 
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<title>Wyprawa</title>
</head>
<body>
<div ID="kontener">
	<div ID="naglowek">
	</div>
	<div ID="menu">
	<ul>
	<div id="akt"><a href="index.html"><li>Wyprawa</li></a></div>
	<a href="o_nas.html"><li>O nas</li></a>
	<a href="oferta.html"><li>Oferta</li></a>
	<a href="patronat.html"><li>Patronat</li></a>
	<a href="sponsorzy.html"><li>Sponsorzy</li></a>
	<a href="kontakt.html"><li>Kontakt</li></a>
	<a href="mont_blanc.html"><li>Mont Blanc 2013</li></a></td>
	</ul>
	</div>
 
	<div ID="tresc">
	</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

CODE

body {
background-color:white;
}

#kontener {
width:1000px;
text-align:left;
margin:5px auto;
background-color:white;
z-index:1;
}

#naglowek{
background-image:url('images/naglowek.png');
height:431px;
}

ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

ul {
text-align: center;
border-bottom: 1px solid #888;
padding-bottom: 5px;
}

ul li {
display: inline;
white-space: nowrap;
margin-right: 5px;
padding-left:26px;
padding-right:25px;
}

ul a:link, ul a:visited {
font-size:18px;
text-decoration: none;
background-color: #ccc;
color: #000;
border: 1px solid #888;
padding: 5px;
}

ul a:hover {
background-color: #fff;
border-bottom-color: #fff;
}

#akt li{
background-color:#fff;
}

już nawet nie chodzi o tą ramkę bo to tam poprawię tylko to ustawienie jak wymódź i czy się wgl da błagam o pilną odpowiedź

phpion

31.01.2014, 08:35:06

Masz nieprawidłowy kod HTML, w <ul> masz totalny misz-masz. To na pewno nie powinno tak wyglądać. Co do pytania: musisz przypisać jakąś klasę do linku (np. active) na podstawie aktualnego adresu (sprawdź co zawiera tablica $_SERVER) i taką klasę ostylować według uznania.

JarekPMI

31.01.2014, 10:06:10

a tak trochę bardziej po polsku bo nie rozumiem. czemu bałagan w kodzie? mi się wydaje że jest przejrzyście

Turson

31.01.2014, 10:18:59

O to chodzi

[HTML] pobierz, plaintext 
<div id="akt"><a href="index.html"><li>Wyprawa</li></a></div>
<a href="o_nas.html"><li>O nas</li></a>
[HTML] pobierz, plaintext

Co tu robi div? phpion podpowiedział, żebyś dał jakąś klasę do li

Xart

31.01.2014, 10:56:52

Piszesz sobie tak:
<li class="nazwa_klasy_z_css">MENU</li>
gdzie nazwa klasy to w css

.nazwa_klasy_z_css
//tutaj style klasy

JarekPMI

31.01.2014, 13:41:53

już rozumiem dzięki zamykam

zrobiłem jak mówiliście i nie działa niestety... coś więcej?

Turson

31.01.2014, 13:49:27

Mamy zgadywać co napisałeś?