http://forum.php.pl/viewtopic.php?t=6164 tam są linki do screenów. dodam, że strona ma kompatybilność z xhtml 11 - strict oraz css2 i pomimo tego co widać na screenie strna wygląda tak samo na interi jak na localu ( patrzcie location na moim screenie ).
dodatkowo są tutaj półprzeźroczyste obrazki png, które też mogą świadczyć o jakości przeglądarek.
tutaj css:
Kod
body {
background-color: #FFFFFF;
background-image: url(images/backgr2.jpg);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
margin:0;
padding: 0;
}
div#links {
position: fixed;
top: 64px;
left: 16px;
width: 170px;
height: 700px;
font: 16px Verdana, sans-serif;
}
div#links a {
display: block;
text-align: center;
font: bold 1em sans-serif;
padding: 5px 10px;
margin: 0 0 3px;
border: solid 1px #691d10;
text-decoration: none;
color: #691d10;
background-color: transparent;
background-image: url(images/link2.png);
background-position: 0 0;
background-repeat: repeat;
}
div#links a:hover {
display: block;
text-align: center;
font: bold 1em sans-serif;
padding: 5px 10px;
margin: 0 0 3px;
border: solid 1px #691d10;
text-decoration: none;
color: #b1321c;
background-color: transparent;
background-image: url(images/link2.png);
background-position: 0 0;
background-repeat: repeat;
}
div#content {
position: absolute;
top: 32px;
left: 212px;
right: 32px;
color: #691d10;
font: 13px Verdana, sans-serif;
padding: 10px;
border: solid 1px #691d10;
background-color: transparent;
background-image: url(images/link2.png);
background-position: 0 0;
background-repeat: repeat;
}
div#content p {
margin: 0 1em 1em;
}
div#content a:link {
color: #691d10;
}
div#content a:link:hover {
color: #b1321c;
}
div#content a:visited {
color: #691d10;
}
div#content a:visited:hover {
color: #b1321c;
}
div#content h1 {
margin: -9px -9px 0.5em;
padding: 15px 0 5px;
text-align: right;
background: #691d10;
color: #FFFFFF;
letter-spacing: 0.5em;
text-transform: lowercase;
font: bold 25px sans-serif;
height: 28px;
vertical-align: middle;
white-space: nowrap;
}
div#content h3 {
font: bold 15px Verdana, sans-serif;
margin-bottom: 0.25em;
}
a tutaj xhtml ( index.html )[xml:1:ab97db7282]<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link title="Apple" rel="stylesheet" type="text/css" href="apple.css" />
<link title="Hell" rel="alternate stylesheet" type="text/css" href="default.css" />
<title>Moja strona domowa
</title>
</head>
<body xml:lang="pl">
<div id="links">
<a href="./index.html">Strona Główna</a>
<a href="./ksiazki.html">Książki</a>
<a href="./zainteresowania.html">Zainteresowania</a>
<a href="./filozofia.html">Filozofia</a>
<a href="./opensource.html">Open Source</a>
<a href="./linki.html">Linki</a>
<a href="./kontakt.html">Kontakt</a>
</div>
<div id="content">
<h1>strona główna</h1>
<h3>Witam</h3><p>
Witam na mojej stronie domowej!<br />
Nazywam się Adam "Jabol" Więckowski.</p>
<h3>O czym jest ta strona?</h3><p>
O niczym
... oraz o mnie, o moich zainteresowaniach i o wolnym oprogramowaniu ( w które mocno wierzę ). Stworzyłem ją bo już od dawna chciałem mieć "homesajta" oraz ze względu na zabawę z CSS ( proszę o ocenę, np. na <a href="./kontakt.html">maila</a> ).<br />
Będą się tutaj pojawiały różne treści według przedstawionego po lewej stronie spisu treści
.<br /></p>
<h3>O stronie</h3><p>
O mnie nie będe tutaj pisał, ale w specjalnie do tego celu wyznaczonym dziale, jednak strona takiego nie dostanie, więc chociaż podpunkt tutaj się jej należy
.<br />
Strone wykonałem zainspirowany wyglądem <a href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html">tej strony</a> oraz możliwościami CSS2.<br />
Więc jest to strona wykonana w technologii XHTML/CSS2 ( do edycji wykorzystałem edytor BlueFish ) przy kodowaniu UTF-8 ( trzeba być nowoczesnym - a jak
). Grafika ( edycja tła oraz podkład pod tekst ) zostały wykonane w Gimpie 1.3. Testowałem ją tylko w Mozilli 1.5 oraz Linksie, ale z tego co słyszałem w innych przeglądarkach ( np. IE
) też nie jest wygląda.<br />
Oczywiście zgodnie z ideologią Open Source podczas tworzenia stronki na oprogramowanie nie została wydana ani złotówka
.</p>
<h3>Przyszłość strony</h3><p>
Stronę mam zamiar wkrótce przenieść na inny serwer. Jest to ściśle związane z zamiarem przepisania strony na technologię php/baza danych ( marzy mi się PostgreSQL,
ale ... no może się uda uniknąć MySQL'a ). Już mam gotowy szkielet, ale wciąż nie jest to to co bym chciał.<br /></p>
<p style="text-align: center">
<a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>
</div>
</body>
</html>
[/xml:1:ab97db7282]
