Forum PHP.pl > [PHP][CSS]ukryty obrazek

Pomoc - Szukaj - Użytkownicy - Kalendarz

czareku

21.10.2008, 12:48:30

Witam. Mam taki problem, w mojej aplikacji przedstawione są poszczególne fazy tworzenia dokumentu, jesli jakaś faza jest aktywna to obrazek przedstawiajacy tą fazę ukrywa się i jest puste miejsce, jak zrobić aby kiedy dana faza jest aktywna wyświetlał się inny obrazek, np. z innym tłem? Kod wygląda tak:
czesc pliku php

Kod

<h1>PPM phases</h1> <ul class="phases"> <li class="employee<?php echo ($status == 'Employee Input') ? '2' : ''?>">Employee Input<img src="web/imgs/arrow.png" /></li> <li class="manager<?php echo ($status == 'Manager Input') ? '2' : ''?>">Manager Input<img src="web/imgs/arrow.png" /></li> <li class="calibration<?php echo ($status == 'Calibration Meeting') ? '2' : ''?>">Calibration Meeting<img src="web/imgs/arrow.png" /></li> <li class="ppm<?php echo ($status == 'PPM Meeting') ? '2' : ''?>">PPM Meeting<img src="web/imgs/arrow.png" /></li> <li class="completion<?php echo ($status == 'Completion') ? '2' : ''?>"> Completion</li> </ul>

czesc pliku .css:

Kod

span.hidden{
display: none;
visibility: hidden;
}
div#BODY div.personal-body div.details ul.phases {
list-style: none;
display: block;
padding: 15px 0 0 20px;
}
div#BODY div.personal-body div.details ul.phases li {
display: block;
float: left;
width: 138px;
height: 35px;
margin-left: 5px;
}
div#BODY div.personal-body div.details ul.phases li img {
position: relative;
top: 8px;
left: 126px;
}
div#BODY div.personal-body div.details ul.phases li.employee {
background: url(../imgs/periods_03.jpg) no-repeat;
margin-left: 0;
}
div#BODY div.personal-body div.details ul.phases li.employee2 {
background: url(../imgs/periods_18.jpg) no-repeat;
}
div#BODY div.personal-body div.details ul.phases li.manager {
background: url(../imgs/periods_05.jpg) no-repeat;
}
div#BODY div.personal-body div.details ul.phases li.calibration {
background: url(../imgs/periods_07.jpg) no-repeat;
}
div#BODY div.personal-body div.details ul.phases li.ppm {
background: url(../imgs/periods_09.jpg) no-repeat;
}
div#BODY div.personal-body div.details ul.phases li.completion {
background: url(../imgs/periods_11.jpg) no-repeat;
}

Cysiaczek

21.10.2008, 13:31:30

Dodaj tag do tematu, a kod ujmij w bbcode. W przeciwnym razie temat zostanie zamknięty.

empathon

21.10.2008, 14:13:02

Po co te w liście? Odstępy pomiędzy elementami w liście powinieneś ustalić w CSS.
Myślę, że wszystko wydawałoby Ci się łatwiejsze gdybyś stosował wcięcia w kodzie, zobacz:

[HTML] pobierz, plaintext 
<h1>PPM phases</h1>
 
<ul class="phases">
	<li class="employee<?php echo ($status == 'Employee Input') ? '2' : ''?>">
		<span class="hidden">Employee Input</span>
		<img src="web/imgs/arrow.png" />
	</li>
	<li class="manager<?php echo ($status == 'Manager Input') ? '2' : ''?>">
		<span class="hidden">Manager Input</span>
		<img src="web/imgs/arrow.png" />
	</li>
	<li class="calibration<?php echo ($status == 'Calibration Meeting') ? '2' : ''?>">
		<span class="hidden">Calibration Meeting</span>
		<img src="web/imgs/arrow.png" />
	</li>
	<li class="ppm<?php echo ($status == 'PPM Meeting') ? '2' : ''?>">
		<span class="hidden">PPM Meeting</span>
		<img src="web/imgs/arrow.png" />
	</li>
	<li class="completion<?php echo ($status == 'Completion') ? '2' : ''?>">
		<span class="hidden">Completion</span>
	</li>
</ul>
[HTML] pobierz, plaintext

I nie twórz bez potrzeby takich długaśnych selektorów (np.: od div#body) to bardzo mało elastyczne.
Strzelam:

[HTML] pobierz, plaintext 
div#BODY div.personal-body div.details ul.phases li.employee {
	background: url(../imgs/periods_03.jpg) no-repeat;
	margin-left: 0;
}
div#BODY div.personal-body div.details ul.phases li.employee2 {
	background: none;
}
[HTML] pobierz, plaintext

Edit:

Cytat

Mam taki problem, w mojej aplikacji przedstawione są poszczególne fazy tworzenia dokumentu, jesli jakaś faza jest aktywna to obrazek przedstawiajacy tą fazę ukrywa się i jest puste miejsce, jak zrobić aby kiedy dana faza jest aktywna wyświetlał się inny obrazek, np. z innym tłem?

Masz problemy z przecinkami i kropkami. Nie żałuj ich. Naprawdę trudno się przez to przebić i pomoc (nawet jak się chce).

Dla class *2 nadajesz inny background i tyle.

czareku

22.10.2008, 12:15:54

Dzięki za uwagi i za radę:P Chodzi o to żeby zrobić mniej więcej coś takiego? Jak uzywam hiddena to jest wszystko ok, mam wszystkie obrazki za wyjatkiem aktywnego- ktory jest ukryty. Jednak jesli robie cos takiego jak podalem nizej, tylko, ze dla wszystkich faz to automatycznie wszystkie zmieniaja swoj obrazek. Za jakas godzinke postaram sie wrzucic screeny i zobrazowac o co mi dokladniej chodzi;]

[HTML] pobierz, plaintext 
<li class="employee<?php echo ($status == 'Employee Input') ? '2' : ''?>
<span class="obr">Employee Input</span>
<img src="web/imgs/arrow.png" /></li>
[HTML] pobierz, plaintext

a w cssie:

[HTML] pobierz, plaintext 
span.obr{
 width: 138px;
 height: 35px;
 background: url(../imgs/obrazek.jpg) no-repeat; 
}
[HTML] pobierz, plaintext

ok, zrobiłem mała prezentacje graficzna o co mi chodzi:P tak żeby nie było niedomówień =)
rysunek na gorze oraz kod który wkleiłem w pierwszym poście przedstawia jak te fazy działają teraz, czyli ukrywa fazę aktywna (w tym przypadku "calibration meeting"), rysunek na dole pokazuje jakbym chciał, żeby to działało, jeśli robię coś takiego jak napisałem powyżej to wszystkie fazy zmieniają kolor na ten niebieski, niezależnie od tego czy są aktywne czy nie.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.