potrzebuję pomocy fachowca... napisałem skrypt php i chciałem oprawić go sobie graficznie no i myślałem że pujdzie lekko a sił juź niemam! dodam że znam w stopniu średnim html i css ale nie mogę połączyć układu strony w css z <iframe> z html'a żeby to jakoś wyglądało.
chciałbym uzyskać taki efekt:
mój kod html wygląda tak:
<!DOCTYPE HTML>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<a href="okno_kier.php" target="okno">LISTA PRACOWNIKÓW
<br /><br /> <a href="dodaj_godz.php" target="okno">DODAJ GODZINY
<br /><br /> <a href="dodaj_premie.php" target="okno">PREMIE/POTRĄCENIA
<br /><br /> <a href="edytuj_godz.php" target="okno">EDYTUJ GODZINY
<br /><br /> <a href="edytuj_log.php" target="okno">EDYTUJ LOGIN I HASŁO
<br /><br /> <a href="wylogowanie.php">WYLOGUJ
<br /><br /> </a>
<iframe width="100%" height="100%" name="okno" src="okno_kier.php" frameborder="no" noresize scrolling="auto" framespacing=0></iframe>
<div id="stopka"><span class="stopka">Autor: Sławomir Hirsz
</span></div>
i css
body
{
margin:0;
padding:0;
background-color:#ffffff;
}
#naglowek
{
width:100%;
height:150px;
background-color:#545bf3;
background-image: linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -o-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -moz-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -ms-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.04, rgb(87,76,245)),
color-stop(0.52, rgb(15,8,207)),
color-stop(0.71, rgb(61,92,245))
);
}
#logo
{
width:500px;
height:150px;
float:left;
background-image: url("../images/logo.gif");
}
.lewypanel
{
width:20%;
height:100%;
float:left;
padding-left: 15px;
padding-top: 45px;
background-color:#5105ed;
background-image: url('../images/menu.GIF');
-webkit-box-shadow: inset 1px 1px 12px 2px ;
-moz-box-shadow: inset 1px 1px 12px 2px ;
box-shadow: inset 1px 1px 12px 2px ;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.prawypanel
{
width:78%;
height:100%;
float:right;
color:#ffffff;
background-color:#ffffff;
}
#okno
{ position: fixed;
width:100%;
height:100%;
background-color:#ffffff;
}
#stopka
{
position: absolute;
bottom: 0;
width:100%;
height:40px;
background-color:#545bf3;
background-image: linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -o-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -moz-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -ms-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.04, rgb(87,76,245)),
color-stop(0.52, rgb(15,8,207)),
color-stop(0.71, rgb(61,92,245))
);
}
....
#box
{
width: 100%;
height: 100%;
padding-top: 40px;
padding-left: 30px;
margin-bottom: 15px;
}
#boxpasek
{
width: 100%;
height: 20px;
background-color: #e1e7ff;
padding-right: 20px;
margin-bottom: 25px;
}
A problemy polegają na:
1. Wogóle daję ciała z ustawieniem w id="okno" boxów lewypanel, pasek i prawypanek(jest w nim iframe)
2. paska nad iframe już wogóle nawet wyświetlić nie mogę
3. po uźyciu lewypanel 20% i prawy panel 80% prawy panel nic nie wyświetla (jak dam 78% to działa) ma to związek prawdopodobnie z padding-left w lewypanel ale jakim cudem? rozumiem gdyby to był margin, padding działa wewnątrz boxu!
4. iframe schodzi gróbo poniżej przeglądarki dlatego nawet jak dam scrolling="auto" to gdy tekst przekracza w dół okno przeglądarki to scrolle się nie pojawiają
5.stopkę ustawiłem tylko dzięki opcji position: absolute;
6. chciałbym zeby strona działała przy różnych rozdzielczościach (mniejwięcej podobnych) dla tego dużo boxów i iframe jest ustawiony na 100% i myślę ze nadmiar tego mi pwszystko niszczy!
Nie jestem grafikiem i już głowa mi od tego pęka błagam kogoś o jakąś podpowiedź.... dodam żę dwa kursy css w necie przeleciałem ale teoria mija się z praktyką w moim przypadku albo wyobraźni mam za mało...
Problem z układem strony html css3
