30-10-2011, 00:44
Dzięki za solidną dawkę krytyki i określenie stopnia mojej beznadziejności.
Uprościłem nieco strukturę HTML, ale pewnie nadal coś jest źle. Aside spada mi na dół, gdy zamieniam div id="strony" na section id="strony" i umieszczam pod zwykłym section.
Obsługa w IE wygląda jeszcze gorzej i w sumie nie wiem czemu obydwa if'y w head nie działają (drugi jest oryginalnie do IE9 nie wiem jak to się ma do IE8)
Uprościłem nieco strukturę HTML, ale pewnie nadal coś jest źle. Aside spada mi na dół, gdy zamieniam div id="strony" na section id="strony" i umieszczam pod zwykłym section.
Obsługa w IE wygląda jeszcze gorzej i w sumie nie wiem czemu obydwa if'y w head nie działają (drugi jest oryginalnie do IE9 nie wiem jak to się ma do IE8)
Kod:
<!doctype html>
<html>
<head>
<meta name="description" content="Free template for PSPad" />
<meta name="keywords" content="html5,template,pspad" />
<meta name="author" content="Marshall" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="styl.css" type="text/css" />
<title>Szkola Podstawowa w Bialotarsku</title>
<!--[if IE]>
<script type="text/javascript">
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length;while(i<length){document.createElement(e[i++])}})();
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#wrapper
{
text-align: left;
margin-left: auto;
margin-right: auto;
width: 900px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Szkoła Podstawowa w Białotarsku</h1>
<img class="logo" src="logo.png">
</header>
<!--Menu poziome-->
<nav id="poziome">
<ul>
<li><a class="button" href="index.html" >Glówna</a></li>
<li><a class="button" href="kalendarz.html" >Kalendarz</a></li>
<li><a class="button" href="plan.html" >Plan lekcji</a></li>
<li><a class="button" href="dokumenty.html" >Dokumenty</a></li>
<li><a class="button" href="kontakt.html" >Kontakt</a></li>
</ul>
</nav>
<!--Menu pionowe-->
<nav>
<ul class="pionowe">
<li><a class="menuF" href="index.html">Glówna</a></li>
<li><a class="menu" href="oszkole.html" >O szkole</a></li>
<li><a class="menu" href="naucz.html" >Nauczyciele</a></li>
<li><a class="menu" href="rada.html" >Rada rodziców</a></li>
<li><a class="menu" href="samo.html" >Samorząd</a></li>
<li><a class="menu" href="wycieczki.html" >Wycieczki</a></li>
<li><a class="menu" href="sko.html" >SKO</a></li>
<li><a class="menu" href="archiwum.html" >Archiwum</a></li>
<li><a class="menuL" href="kontakt.html">Kontakt</a></li>
</ul>
<h2>Bierzemy udzial w programie:<h2>
<a href="pis.html"><img id="right" src="http://www.ppwow.gov.pl/images/stories/ppwow.gif" alt="Pis" /></a>
<p class="r"></p>
</nav>
<!--Tablica wpisów-->
<section>
<h3>Zdecydowanie za dużo kalafiora</h3>
<p>Sed molestie dapibus dolor. Donec a eleifend justo. Ut rutrum vulputate turpis at ultricies. Nulla facilisi. Etiam quis diam id dolor consequat porta sit amet a dolor. Morbi pellentesque, justo et vulputate ultrices, mauris urna volutpat mi, sed vestibulum erat est sed velit. Donec eget ante dui, et dapibus justo. Nunc nec elit eu nisl dignissim luctus nec sit amet mi. In condimentum vulputate vehicula. Sed quis augue velit, a interdum erat. In mauris turpis, viverra sit amet porttitor vitae, porttitor vel orci. Aenean vel augue sem, in tincidunt tortor. Vivamus nibh turpis, blandit non lobortis ac, adipiscing quis libero.
</p>
<p ><a class="wiecej" href="news1">Więcej</a></p>
<hr>
<h3>Pogięty patyk i inne bzdury</h3>
<img src="phpThumb_generated_thumbnailjpg.jpg" alt="" >
<p>Sed molestie dapibus dolor. Donec a eleifend justo. Ut rutrum vulputate turpis at ultricies. Nulla facilisi. Etiam quis diam id dolor consequat porta sit amet a dolor. Morbi pellentesque, justo et vulputate ultrices, mauris urna volutpat mi, sed vestibulum erat est sed velit. Donec eget ante dui, et dapibus justo. Nunc nec elit eu nisl dignissim luctus nec sit amet mi. In condimentum vulputate vehicula. Sed quis augue velit, a interdum erat. In mauris turpis, viverra sit amet porttitor vitae, porttitor vel orci. Aenean vel augue sem, in tincidunt tortor. Vivamus nibh turpis, blandit non lobortis ac, adipiscing quis libero.
</p>
<p ><a class="wiecej" href="news1">Więcej</a></p>
<hr>
<h3>Pogięty patyk i inne bzdury</h3>
<img src="phpThumb_generated_thumbnailjpg.jpg" alt="" >
<p>Sed molestie dapibus dolor. Donec a eleifend justo. Ut rutrum vulputate turpis at ultricies. Nulla facilisi. Etiam quis diam id dolor consequat porta sit amet a dolor. Morbi pellentesque, justo et vulputate ultrices, mauris urna volutpat mi, sed vestibulum erat est sed velit. Donec eget ante dui, et dapibus justo. Nunc nec elit eu nisl dignissim luctus nec sit amet mi. In condimentum vulputate vehicula. Sed quis augue velit, a interdum erat. In mauris turpis, viverra sit amet porttitor vitae, porttitor vel orci. Aenean vel augue sem, in tincidunt tortor. Vivamus nibh turpis, blandit non lobortis ac, adipiscing quis libero.
</p>
<p ><a class="wiecej" href="news1">Więcej</a></p>
<hr>
<h3>Pogięty patyk i inne bzdury</h3>
<img src="phpThumb_generated_thumbnailjpg.jpg" alt="">
<p>Sed molestie dapibus dolor. Donec a eleifend justo. Ut rutrum vulputate turpis at ultricies. Nulla facilisi. Etiam quis diam id dolor consequat porta sit amet a dolor. Morbi pellentesque, justo et vulputate ultrices, mauris urna volutpat mi, sed vestibulum erat est sed velit. Donec eget ante dui, et dapibus justo. Nunc nec elit eu nisl dignissim luctus nec sit amet mi. In condimentum vulputate vehicula. Sed quis augue velit, a interdum erat. In mauris turpis, viverra sit amet porttitor vitae, porttitor vel orci. Aenean vel augue sem, in tincidunt tortor. Vivamus nibh turpis, blandit non lobortis ac, adipiscing quis libero.
</p>
<p ><a class="wiecej" href="news1">Więcej</a></p>
<div id="strony">
<p><a class="strony" href="index.html">1</a></p>
</div>
</section>
<aside>
<article id="aside">
<h3>Rzut oka na pracę samorządu</h3>
<p>Samorząd szkolny ciężko pracuję, aby nasza szkola się nie zawalila! Podtrzymywanie pustaków to tylko jeden
z aspektów pracy naszej organizacji uczniowskiej. Samorząd jest organizatorem wielu akcji mi. zbieranie
gruszek na wierzbię w zimę, sadzenie palm daktylowych na polu sąsiada i wielu inych (polach). </p>
<p ><a class="wiecejas" href="news1">Więcej</a></p>
<hr>
</article>
<article id="aside">
<h3>Nasze szkolne SKO</h3>
<p>Szkolne Kolo oszczędzania zakupilo nową skarbonkę z dziurką pozwalającą na wrzucanie do srodka monet
jedno groszowych i centowych (myslimy przyszlosciowo). Jest to filar naszej akcji "Oszczędzanie w malej
skali", która jest rozpowszechniona we wszystkich szkolach na swiecie! Cieszymy się, mogąc być częscią
większej calosci skupiajacej milosnikow oszczędzania.</p>
<p ><a class="wiecejas" href="news1">Więcej</a></p>
<hr>
</article></aside>
</div>
<footer> © Copyright 2011 Szkola Podstawowa w Bialotarsku
| Webdesign by Me</footer>
</body>
</html>Kod:
/* CSS Document */
body
{
margin: 0px;
background: url(bg.jpg);
}
header
{
width: 900px;
height: 180px;
}
a.button:hover
{
text-decoration: none;
color: #e5e5e5;
display: block;
border-top: 2px #686868;
border-left: 1px #686868;
background-color: #383838;
border-left:solid 1px #000000;
}
a.button
{
text-decoration: none;
color: #ffffff;
background-color: #353535;
border-top-left-radius:10px 10px;
border-top-right-radius:10px 10px;
font-family: Tahoma;
font-weight: bold;
font-size: 13px;
display: block;
border-top: 1px #3f3f3f;
border-left: 1px #3f3f3f;
padding: 5px;
width: 80px;
float: right;
text-align: center;
border-left:solid 1px #000000;
margin-left:auto;
}
a.menu
{
width: 200px;
text-align: center;
font-family: Tahoma;
display: table-cell;
background-color: #5f9647;
font-family: Tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding: 10px;
padding-top: 0px;
border-top:solid 1px #4d8534;
border-right:solid 2px #4d8534;
}
a.menu:hover
{
background-color: #2f5c1b;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
a.menuF:hover
{
background-color: #2f5c1b;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
a.menuL:hover
{
background-color: #2f5c1b;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
a.menuF
{
width: 200px;
text-align: center;
font-family: Tahoma;
display: table-cell;
background-color: #5f9647;
font-family: Tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding: 5px;
padding-bottom: 10px;
border-top-right-radius:10px 10px;
border-top-left-radius:10px 10px;
border-right:solid 2px #4d8534;
}
a.menuL
{
width: 200px;
text-align: center;
font-family: Tahoma;
display: table-cell;
background-color: #5f9647;
font-family: Tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding: 5px;
padding-bottom: 10px;
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:10px 10px;
border-top:solid 1px #4d8534;
border-right:solid 2px #4d8534;
}
ul
{
list-style-type: none;
float: right;
margin-top: 90px;
}
ul li
{
display: block;
display: table-cell;
}
ul.pionowe
{
position: relative;
left: 0px;
top: -50px;
}
ul.pionowe li
{
display: block;
display: table-cell;
float: left;
width: 200px;
margin: 0px;
padding-bottom: 0px;
}
nav, section, aside
{
display: table-cell;
vertical-align: top;
}
nav
{
width: 200px;
height: 100%;
float:left;
}
section
{
width: 500px;
float:left;
}
aside
{
height: 500px;
width: 189px;
float:right;
}
#poziome
{
position: relative;
top: -100px;
float:right;
height:25px;
}
p
{
font-family: Tahoma, Arial, Verdana;
font-size: 12px;
padding-left: 20px;
padding-right: 20px;
font-weight: normal;
text-align: justify;
}
h3
{
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
#aside
{
width: 189px;
background-color: #cad581;
}
#aside:hover
{
background-color: #dee5af;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
hr
{
border-top-style: dotted;
border-bottom-style: none;
width: 90%;
padding-top; 108px;
}
img
{
float: left;
margin-right: 10px;
margin-left: 20px;
}
footer
{
width: 100%;
height: 150px;
background-image: url(foooter.png);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% 150px;
clear: both;
text-align: center;
font-family: Tahoma, Arial, Verdana;
font-size: 12px;
}
h1
{
font-family: Filetto;
font-size:50px;
border: 1px #ffffff;
padding: 0px;
margin: 0px;
color: #46522e;}
p.r
{
float: right;
margin-right: 100px;
padding-right: 0px;
}
#right
{
float: right;
margin-right: 40px;
padding-top: 0px;
}
h2
{
font-family: Filetto;
font-size: 15px;
float: right;
margin-right: 30px;
}
img.logo
{
float: left;
margin-right: 10px;
margin-left: 10px;
}
a.wiecej
{
color:#5f7e24;
position:relative;
left:80%;
font-family: Tahoma, Arial, Verdana;
font-size: 13px;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
text-align: justify;
text-decoration: none;
}
a.wiecej:hover
{
background-color: #dee5af;
background-size:40px 180px;
border-top-left-radius:5px 5px;
border-top-right-radius:5px 5px;
border-bottom-left-radius:5px 5px;
border-bottom-right-radius:5px 5px;
transition: 1s; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s;
}
a.wiecejas
{
color:#5f7e24;
position:relative;
left:60%;
font-family: Tahoma, Arial, Verdana;
font-size: 13px;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
text-align: justify;
text-decoration: none;
}
a.strony
{
color:#4d8534;
position:relative;
left:80%;
font-family: Tahoma, Arial, Verdana;
font-size: 15px;
margin-top: 40px;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
text-align: justify;
text-decoration: none;
}
a.strony:hover
{
color:#cad581;
}
#strony
{
margin-top: 40px;
width: 500px;
float:left;}