Mam taki plik html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Generowanie zawartości i formatowanie list</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="pl">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>
<body>
<h1>Uniesienia</h1>
<h2>Kolory jesieni</h2>
<h2>Zapach modrzewia</h2>
<h2>Siły polarne</h2>
<h2>Inny bełkot</h2>
<p class="komentarz pawel">
Jakiś tam komentarz dotyczący niewiadomo czego.
</p>
<p class="komentarz adam">
Jakiś tam komentarz dotyczący również niewiadomo czego.
</p>
<h1>Systemy operacyjne</h1>
<h2>Windows 2003 Server</h2>
<ul class="obrazek">
<li>SQL Server 2005</li>
<li>Exchange 2003</li>
<li>IIS 6.0</li>
</ul>
<h2>Windows XP Professional</h2>
<h2>SuSE Linux 10.0</h2>
<ol class="rzymskie">
<li class="rzymskie">Apache 2.0 — bardzo fajny serwer WWW pod linuxa, bardzo fajny serwer WWW pod linuxa, bardzo fajny serwer WWW pod linuxa, bardzo fajny serwer WWW pod linuxa, bardzo fajny serwer WWW pod linuxa, bardzo fajny serwer WWW pod linuxa, bardzo fajny serwer WWW pod linuxa.</li>
<li class="rzymskie">Apache Tomcat 5.16 — a to z kolei fajny serwer JSP, a to z kolei fajny serwer JSP, a to z kolei fajny serwer JSP, a to z kolei fajny serwer JSP, a to z kolei fajny serwer JSP, a to z kolei fajny serwer JSP, a to z kolei fajny serwer JSP, a to z kolei fajny serwer JSP, a to z kolei fajny serwer JSP.</li>
<li class="rzymskie">Bind 9 — serwer DNS</li>
<li class="rzymskie">Postfix — serwer poczty</li>
</ol>
</body>
</html>
Mam stworzyć do tego styl css, żeby powstało takie coś:
http://img218.imageshack.us/img218/3024/indexqc0.jpg
Stworzyłem na razie taki styl:
body{
counter-reset: rozdzial;
font-family: Verdana, sans-serif;
}
h1{
counter-reset: rozdzial2;
}
h1:before {
counter-increment: rozdzial;
content: "Rozdział " counter(rozdzial) ". ";
}
h2:before {
counter-increment: rozdzial2;
content: counter(rozdzial2) ". ";
}
ul.obrazek {
list-style-image: url(ball.gif);
}
p.komentarz {
background-color: #C8FFC8;
border: #0F8910 1px solid;
padding: 5px;
}
ol.rzymskie {
list-style-type: lower-roman;
list-style-position: inside;
}
li {
width: 500px;
}
A powstało mi z tego takie coś:
http://img363.imageshack.us/img363/4333/zrzutekranupf3.png
Jak dodać słowa komentarz, autora i meila przed akapitami?
edit: i jeszcze jedno: jak zrobić taki nagłówek i stopkę jak na screenie? Sama kreska wygląda fajnie jako górne i dolne obramowanie dla body, ale jak wstawić tam wyśrodkowany i pogrubiony napis?
kdit2: nie można zmieniać zawartości pliku html. To jest ćwiczenie z css-a i na pewno da się to zrobić.