Forum PHP.pl > Równe ułożenie elementów li

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Równe ułożenie elementów li

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

kaznodzieja

14.05.2012, 16:56:10

Witam
Proszę o pomoc w ułożeniu równo elementów li oraz nadania koloru tła dla elementu kalendarz. Siedzę na tym od 2 godzin.

[PHP] pobierz, plaintext 
<?php
 
function dni_mies($mies,$rok) {
 $dni = 31;
 while (!checkdate($mies, $dni, $rok)) $dni--;
return $dni;
}
 
function dzien_tyg_nr($mies,$rok) {
 $dzien = date("w", mktime(0,0,0,$mies,1,$rok));
return $dzien;
}
 
function dzien_tyg($nr) {
 $dzien = array(0 => "Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota");
return $dzien[$nr];
}
 
function miesiac_pl($mies) {
 $mies_pl = array(1=>"Stycznia", "Lutego", "Marca", "Kwietnia", "Maja", "Czerwieca", "Lipieca", "Sierpnia", "Września", "Października", "Listopada", "Grudnia");
return $mies_pl[$mies];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kalendarz</title>
<meta http-equiv="content-type" content="text/xml; charset=UTF-8" />
<meta http-equiv="content-language" content="pl" />
<style type="text/css">
#kalendarz {width: 180px;  background-color :#AAAAAA;  }
#kalendarz ul { padding: 0px 5px; }
#kalendarz p {text-align: center; }
#kalendarz li {display:block; float:left; padding: 2px; margin:1px; background-color: #CCCCCC;  }
#kalendarz .akt {color: #FFFFFF; font-weight: bold; background-color :#666666;}
#kalendarz .hidden {visibility: hidden;  }
</style>
</head>
<body >
<div id="tlo">
<div id="kalendarz" >
<?php
//echo '<p>'.dzien_tyg(date("w")).', '.date("d").' '.miesiac_pl(date("n")).' '.date("Y").'</p>';
?>
<ul>
 <li>N&nbsp;</li>
 <li>Pn</li>
 <li>Wt</li>
 <li>Śr</li>
 <li>Cz</li>
 <li>Pt</li>
 <li>Sb</li>
 </ul>
<ul>
 
<?php
for($i=0;$i<dzien_tyg_nr(date("n"),date("Y"));$i++)
 echo '<li class="hidden">00</li> ';
 
for($i=1;$i<dni_mies(date("n"),date("Y")) +1;$i++) {
 if ($i<10) $i = '0'.$i;
 if ($i == date("d")) echo '<li class="akt"><strong>'.$i.'</strong></li> ';
  else echo '<li >'.$i.'</li> ';
}
?>
</ul>
</div>
</body>
</html>
[PHP] pobierz, plaintext

redeemer

14.05.2012, 17:24:25

Tak na szybko to w stylach ustaw margin i padding w ul na 0, potem ustaw szerokość "pojedyńczego" li. U ciebie to będzie 180/7 - 2*(2+1) = 19px

180 to szerokość #kalendarz, a (2+1) to twój margin i padding z li

Pewnie da się to lepiej zrobić.

kaznodzieja

14.05.2012, 17:31:31

Dzięki, wietrzenie pokoju pomogło

zrobiłem zmiany w stylach i teraz już gra

[HTML] pobierz, plaintext 
<style type="text/css">
#kalendarz { width: 170px; height: 140px; font-family: monospace; background-color: #CFDBEC; }
#kalendarz ul { display:block; padding: 0px 5px; vertical-align: middle; }
#kalendarz li {display:block; float:left; padding: 3px; margin: 1px 1px auto; background-color: #CCCCCC; vertical-align: middle }
 
#kalendarz .akt {color: #FFFFFF; font-weight: bold; background-color :#666666;}
#kalendarz .hidden {visibility: hidden;  }
</style>
[HTML] pobierz, plaintext

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.