Jestem amatorem w dziedzinie grafiki i php, lecz postanowiłem podjąć wyzwanie i zrobić stronę dla szkoły.
Wszystko wyszło ładnie pięknie, zrobiłem i pociąłem lay według mojego upodobania i sam go złożyłem w php.
Napotkałem tylko jeden dręczący mnie problem.
Otóż jak można zauważyć strona podzielona jest na left i center.
W DIV left znajduje się menu, a w center reszta strony. Menu jest stałe i otoczone jest ramką (wszystko w grafice) obok niego jest również ramka graficzna służąca do umieszczania tekstu na stronie. Otóż wszystko ładnie pięknie im pisze więcej tekstu to ramka się wydłuża (to akurat potrafiłem zrobić), ale obok w menu zostaje mi PUSTE pole i nie jest niczym wypełnione. Chce aby im dłuższy tekst tym tło spod menu również schodziło razem z nim.
Adres do strony to - http://literkate.za.pl/2/style.html
Poniżej zamieszczam kod strony i CSS.
<!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> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1250" /> <title>Panel Administracyjny</title> <meta http-equiv="Reply-to" content="" /> <meta name="Description" content="Strona ZSP 1" /> <meta name="keywords" content="zsp 1 Kwidzyn szkola" /> <meta name="Author" content="Jaroslaw Mrugala" /> <meta name="Robots" content="ALL" /> <meta name="revisit-after" content="10" /> <link rel="stylesheet" type="text/css" href="zsp/style.css" /> </head> <body> <div class="pds"> <!--HEAD START --> <div><img src="zsp/style_02.gif" /></div> <div><img src="zsp/style_04.gif" /></div> <div><img src="zsp/style_05.gif" /></div> <div><img src="zsp/style_06.gif" /></div> <div><img src="zsp/style_07.gif" /></div> <!--HEAD CLOSE --> <!--MENU START --> <div class="left"> <div><img src="zsp/style_08.gif" alt="" /></div> <div class="menu"> <a href="index.php" class="menu">Strona Główna </a> <a href="index.php">Aktualności </a> <a href="index.php">Pedagog </a> <a href="index.php">Organy szkoły</a> <a href="index.php">Kontakt</a> <a href="index.php">Linki</a> <a href="index.php">Forum </a> <a href="index.php">Administracja</a> <div><img src="zsp/style_08.gif" alt="" /></div> <a href="index.php">Grono </a> <a href="index.php">Kształcenie</a> <a href="index.php">Podręczniki</a> <a href="index.php">Egzamin i matura</a> <a href="index.php">Biblioteka </a> <a href="index.php">Konkursy szkolne</a> <a href="index.php">Projekty</a> <a href="index.php">Prace uczniów </a> <a href="index.php">Historia</a> <a href="index.php">Galeria zdjęć</a> <a href="index.php">Nasz Patron</a> </div> </div> </div> </div> <!--MENU CLOSE --> <!--TEKST START --> <div class="center"> <div class="s"> <div class="tytul">Technik Ekonomista</div> <div> <div class="tresc"> <p>Współczesna rzeczywistość wymaga dobrej znajomości ekonomii - nauki o gospodarowaniu i zarządzaniu. Nasze technikum umożliwia zdobycie takiej wiedzy. Celem kształcenia jest przygotowanie absolwenta do sprawnego wykonywania zadań zawodowych w warunkach gospodarki rynkowej. Absolwenci mogą być zatrudnieni na średnich szczeblach zarządzania w przedsiębiorstwach produkcyjnych, handlowych i usługowych. Technik ekonomista doskonale organizuje działalność gospodarczą.<br /> Sporządza również sprawozdania i analizy w przedsiębiorstwie. Doskonale wykonuje różnego rodzaju prace biurowe.<br> Nauka w technikum trwa 4 lata.Kończy się egzaminem maturalnym i egzaminem potwierdzającym kwalifikacje zawodowe. <br> Absolwenci mają prawo używać tytułu: TECHNIK EKONOMISTA.</p> <p> <b><span style="color:#990033">Technik ekonomista potrafi:</span></b><br /> <br /> </p> <ul> <li> interpretować ogólne prawa ekonomiczne<br> <li> korzystać z różnych źródeł prawa <br> <li> stosować podstawowe zasady zarządzania<br> <li> sporządzać dokumentację biurową <br> <li> wykorzystywać urządzenia biurowe i technologię informacyjną do realizacji zadań zawodowych <br> <li> prowadzić ewidencję księgową zgodnie z zasadami rachunkowości <br><br /> </ul> <strong>Oprócz przedmiotów ogólnokształcących uczniowie poznają zagadnienia ekonomiczne na następujących przedmiotach zawodowych:</strong><br /><br> <ul> <li> podstawy ekonomii <li> technika biurowa <li> statystyka <li> zasady rachunkowości <li> marketing <li> elementy prawa <li> rachunkowość <li> pracownia ekonomiczno-informatyczna<br> </li> </ul> <br /><br /> <button type="button" class="formtopbutton" onClick="history.back(0)">Powrót</button> <br /> <br /> <br /> <br /> <br /><br /><br /> </div> </div> </div> </div> <!--TEKST CLOSE --> <!--FOOTER START --> <div style="clear:both;"></div> </div> <div><img src="zsp/stopka.gif" /></div><br /> <!--FOOTER CLOSE --> </body> </html>
Kod
body{
margin:0px;
background-image:url(bg.gif);
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color: #475f82;
background-repeat: no-repeat;
background-position: center center;
}
.pds{
width:803px;
background: #ebeef2;
margin:0 auto;
clear: both;
}
.tytul{
width: 633px;
height: 26px;
background-image: url(style_009.gif);
background-repeat: no-repeat;
font-size: 18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #475F82;
font-weight: 700;
text-align: left;
white-space: normal;
letter-spacing: 1px;
padding-right: 15px;
padding-left: 15px;
padding-top: 2px;
}
.s{
height:100%;
background:#ebeef2;
background-image: url(style_dlug.gif);
}
.left{
width:170px;
clear: both;
background:#ebeef2;
float:left;
}
.center{
width:633px;
background:#ebeef2;
float:left;
}
.tresc{
font-size:12px;
line-height:14px;
color:#475F82;
text-align: justify;
width: 580px;
right: 20px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 25px;
float: none;
clear: both;
}
.menu a{
background-image: url(style_11.gif);
background-repeat: no-repeat;
display:block;
font-size:12px;
text-decoration:none;
font-weight: normal;
text-align: left;
clear: both;
float: none;
height: auto;
width: auto;
padding-top: 9px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 35px;
}
.menu a:hover{
text-decoration:none;
color:#44556F;
background-image: url(a.gif);
background-repeat: no-repeat;
}
a{
text-decoration:none;
color: #596F88;
}
.boxy{
width:425px;
background:#f6f2d0 bottom right no-repeat;
border:1px solid #efe5a5;
padding:10px;
color:#3a3408;
font-size:10px;
margin-top:18px;
}
.formtopbutton {
background-color : #9DACBF;
color : #333333;
font-size: 10pt;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #585858;
}
.formtoptext {
background-color : #F0F0F0;
color: #666666;
font-size: 10pt;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #D8D8D8;
}
margin:0px;
background-image:url(bg.gif);
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color: #475f82;
background-repeat: no-repeat;
background-position: center center;
}
.pds{
width:803px;
background: #ebeef2;
margin:0 auto;
clear: both;
}
.tytul{
width: 633px;
height: 26px;
background-image: url(style_009.gif);
background-repeat: no-repeat;
font-size: 18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #475F82;
font-weight: 700;
text-align: left;
white-space: normal;
letter-spacing: 1px;
padding-right: 15px;
padding-left: 15px;
padding-top: 2px;
}
.s{
height:100%;
background:#ebeef2;
background-image: url(style_dlug.gif);
}
.left{
width:170px;
clear: both;
background:#ebeef2;
float:left;
}
.center{
width:633px;
background:#ebeef2;
float:left;
}
.tresc{
font-size:12px;
line-height:14px;
color:#475F82;
text-align: justify;
width: 580px;
right: 20px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 25px;
float: none;
clear: both;
}
.menu a{
background-image: url(style_11.gif);
background-repeat: no-repeat;
display:block;
font-size:12px;
text-decoration:none;
font-weight: normal;
text-align: left;
clear: both;
float: none;
height: auto;
width: auto;
padding-top: 9px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 35px;
}
.menu a:hover{
text-decoration:none;
color:#44556F;
background-image: url(a.gif);
background-repeat: no-repeat;
}
a{
text-decoration:none;
color: #596F88;
}
.boxy{
width:425px;
background:#f6f2d0 bottom right no-repeat;
border:1px solid #efe5a5;
padding:10px;
color:#3a3408;
font-size:10px;
margin-top:18px;
}
.formtopbutton {
background-color : #9DACBF;
color : #333333;
font-size: 10pt;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #585858;
}
.formtoptext {
background-color : #F0F0F0;
color: #666666;
font-size: 10pt;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #D8D8D8;
}
Chodzi o to zamiast tego niebiesko pustego pola wypełnienie było w kolorze tła strony.
Proszę o pomoc z tym jednym męczącym mnie problemem i przy okazji o ocene szablonu strony.
Pozdrawiam,
Jarosław Mrugała