Forum PHP.pl

Witam!
Potrzebuje szablonu który nie używa ramek ale pozwoli na to aby zarówno góra strony jak i panele boczne nie uciekały do góry podczas przewijania zawartości strony.
Czyli mniej więcej układ tradycyjny z górnym banerem strony, lewym panelem menu, prawym panelem dodatkowym i w środku zawartość strony ale tak wykonana że przy dużej ilości treści przewijał się tylko środek, natomiast boczne panele i górny baner pozostał na stałe na swoim miejscu.
Najlepiej gdyby to był czysty html, php i css.

Pozdrawiam

Gotowiec? Nie to forum.

Może źle się wyraziłem. Bardziej niż gotowe rozwiązanie problemu potrzebna mi wskazówka jak taki efekt uzyskać. Gotowy szablon tylko ewentualnie jako przykładowe rozwiązanie.

Trochę testuje positon: fixed; ale rozwala mi się cały układ strony.

Strona ma być wyśrodkowana, o stalej szerokosci i składać się z elementów:
- warper jako głowna "kartka" z margin: 0 auto;
- header, navigation_left i navigation_right, footer - jako elementy z position: fixed czyli te elementy na stale na stronie
- wnetrze tej strony to content ktory ma sie przewijac

Obecnie ma efekt taki ze content przewija mi się ale wchodzi "pod" nagłowek (header) i wychodzi nad nim

Próbowałem dodać dodatkowy element blokowy jako tło dla content który także miałby position: fixed i dopiero w nim umieścić content ale cały układ mi się rozsypuje, content dalej wchodzi pod header i sam nie wiem już co od czego zależy.

Ten post edytował 123tomek 9.11.2010, 00:49:30

Po 1) PHP nie służy do modyfikacji wygladu strony (nie patrz na edycji css za pomoca php)
Po 2) Jezeli chcesz pomocy to pokaz kod zrodlowy strony

Kod css:

[HTML] pobierz, plaintext 
body { /*glowne okno przegladarki*/
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: medium; /*small;*/
   background-color: #d2d3d5; /*#71bdef; /*glowny kolor tla - czyli cale okno przegladarki*/
   margin: 0px;
   padding: 0px;
   margin-top: 15px;
   text-align: justify;
}
 
#warper { /* RAMKA OTACZAJACA (cos jak cala kartka papieru osadzona w oknie przegladarki) */
   width: 785px; 
   margin: 0 auto;
   background-color: #d2d3d5; 
   border: 0px solid white
}
 
#header { 
   background: url("images/naglowek.jpg") no-repeat;
   background-color: #d2d3d5;
   width: 775px; 
   height: 136px;
   border: 0px solid white;
   margin: 0 auto;
}
 
.menugora{
	text-align:right;
	}
.menugora a{     
	color: #606060; 
	font-size: 14px; 
	font-family:Arial; 
        font-style: italic;
	text-decoration:none;
	padding-left:34px;
	padding-right:18px;
	}
 
.menugora a:hover {
	color: #ec008c;
 
}
 
#header h1 { 
   color: #e7e7e9;
   font-size: 0px;
   font-family: Arial, Helvetica, sans-serif;
   margin-left: 75px;
   margin-top: 0px;
}
 
 
#content { /* TRESC STRONY */
   width: 570px; 
   background-color: #d2d3d5;
   padding-bottom: 0px;
   float: left;
}
 
#content p {
   padding-left: 20px;
   padding-right: 30px;
}
 
#content h2 {
   padding-top: 45px;
   padding-left: 20px;
   font-size: x-large;
   font-family: Arial, Helvetica, san-serif;
   font-weight: normal;
}
 
#content p:first-letter {
  color: #ec008c; 
  font-family: 'Comic Sans MS', 'Times New Roman', Arial, Veranda, Helvetica;
  font-size: 200%; 
  vertical-align: text-bottom; 
  }
 
#content h2 {
   color: #ec008c; 
   font-size: x-large;
   font-family: Arial, Helvetica, sans-serif;
   margin-left: 0px;
   margin-top: 0em;
   margin: 0;
   padding: 0;
}
 
#navigation { 
   width: 256px 
   height: 460px; 
   margin-left: 5px; 
   background-color: #d2d3d5;
   float: left;
   font-style: italic;
   font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
   font-size: medium;
}
 
#navigation p { 
   margin-top: 15px;
   margin-left: 20px;
   font-size: small; 
   font-weight: bold;
   font-style: italic;
   font-family: Arial, Helvetica, Sans-serif;
   text-align:center;
   width: 155px;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 71px;
 
}
 
#navigation ul, #navigation ul li { 
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
 
#navigation ul li {
	width: 200px; /* szerokosc klocka menu*/
	height: 38px; /* wysokosc klocka menu*/
	padding-left: 10px; /* odleglosc od lewej krawedzi do poczatku klocka menu */
	background: url("images/menu_linia.png") no-repeat right top; 
}
 
#navigation ul a:link, #navigation ul a:visited {
	display: block;
	width: 170px;
        height: 16px; 
	text-decoration: none;
	text-align:left;
	color: #606060; 
	padding: 3px 22px 7px 10px; 
	font-weight: bold;
}
 
#navigation ul a:hover {
	color: #ec008c ;
}
 
#blockquote { /*"Ramka w ramce"*/
   width: 330px;
   margin-left: 10px;
   margin-right: 20px;
   background-color: #55bedf;
   font-size: small;
   font-family: Verdana, Arial, Helvetica, Sans-serif;
   font-weight: bold;
   padding-bottom: 20px;
   float: right;
   margin: 0 auto;
}
 
#footer { /* STOPKA */
   width: 775px; /*990px*/
   height: 25px;
   border: 4px solid #d2d3d5; 
   margin: 0 auto;
   background-image: url(images/dol.png);
   text-align: left; 
   font-size: x-small;
   background-color: #d2d3d5; 
   clear: both;
}
 
#footer span {
   font-weight: bold;
   color: white;
}
 
#footer a:link, #footer a:visited {
 
  margin-left: 15px;
  color: #606060;
  font-size: 8px;
  font-family: Arial, Helvetica, Sans-serif;
  font-style: italic;
  font-weight: bold;
  vertical-align: top;
}
 
#footer a:hover {
   color: #ec008c; 
   font-size: 8px;
   font-family: Arial, Helvetica, Sans-serif;
   font-weight: bold;
   padding-bottom: 20px;
} 
 
/* Poczatek tabel */
TABLE {
  border: solid 0px black;
  border-collapse: separate;
  margin: 0 auto;
}
 
THEAD {
  background-color:#C0C0C0;
}
 
TBODY {
  background-color:#9bcff4;
}
 
TFOOT {
  background-color:#FFFFC0;
}
 
TFOOT TD {
  font-size:xx-small;
  text-align:right;
}
 
TD {
  font-style:italic;
  text-align:left;
}
 
CAPTION {
  font-style:italic;
  text-align:center;
}
 
CAPTION SPAN {
  font-weight:bold;
}
 
[scope="cena"] {
  color:black;
  font-style:italic;
  font-weight:bold;
  text-align:right;
}
 
[scope="row"] {
  color:black;
  padding: 10px 5px 10px 5px;
  text-align:center;
}
 
[scope="col"] {
  color:navy;
  background-color:#C0C0C0;
  padding:5px;
  text-align:center;
}
/* Koniec tabel */
 
[HTML] pobierz, plaintext 

Część kodu php:

[HTML] pobierz, plaintext 
 
<body>
  <div id="warper"> <!-- warper - stopka (podklad, kartka) -->
  <div id="header"><!-- header - naglowek -->
  <div class="menugora">
             <a alt="firma" href="index.php?id=firma"> o firmie </a>
             <a alt="kontakt" href="index.php?id=kontakt"> kontakt </a>
             <a alt="dojazd" href="index.php?id=dojazd"> dojazd </a></div>
    <div><img src="images/logo0.gif" style="padding-left: 259px; padding-top: 0px;" alt="logo" />
    </div>
 
  </div> <!-- header - naglowek -->
 
  <div id="navigation"> <!-- navigation - sekcjia nawigacyjna (lewa czesc gdzie menu) -->
    <ul class="menu">
      <li><a href="index.php?id=glowna">Główna</a></li>
      <li><a href="index.php?id=firma">O Firmie</a></li>
      <li><a href="index.php?id=kontakt">Kontakt</a></li>
      <li><a href="index.php?id=dojazd">Dojazd</a></li>
    </ul>
    <a><img src="images/bannerek_firmy.gif" style="display: block; margin-left: 110px;" alt="banerek" /></a>-->
 
  </div> <!-- navigation - sekcjia nawigacyjna (lewa czesc gdzie menu) -->
 
  <div id="content"><!-- content - tresc strony -->
    <!-- Tutaj jest wstawiana treść z plików zewnętrznych -->
      <?php
      if(empty($_GET['id']) or $_GET['id']=="glowna"){include("glowna.html");}
      if($_GET['id']=="firma"){include("firma.html");}
      if($_GET['id']=="kontakt"){include("kontakt.html");}
      if($_GET['id']=="dojazd"){include("dojazd.html");}            
      ?>
  </div><!-- content - tresc strony -->
 
  <div id="footer"><!-- footer - stopka --> 
  </div> <!-- footer - stopka -->
</div> <!-- warper - stopka (podklad, kartka) -->
 
<map name="menu" id="menu">
<area alt="firma" shape="rect" coords="454,2,570,28" href="#firma" alt="" />
<area alt="kontakt" shape="rect" coords="625,2,696,28" href="#kontakt" alt="" />
<area alt="dojazd" shape="rect" coords="697,2,764,28" href="#dojazd" alt="" />
</map>
</body>
 
[HTML] pobierz, plaintext 

Po dodaniu do #navigation oraz #header position: fixed; cały układ się rozsypuje, content przesuwa się pod menu oraz pod nagłówek.
Próbowałem dodać dodatkowy blok z position: fixed; w którym zawierałaby się treść strony (content) ale dalej treść ucieka pod baner.
Nie bardzo potrafię poukładać bloki tak by menu oraz nagłówek były na stałe na stronie a przewijanie działało tylko na treść (content) ale w taki sposób by nie przewijało się pod nagłówek i nie wychodziło nad nim.

doctype, head?

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
 
 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>strona x</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
[HTML] pobierz, plaintext 

Ten post edytował 123tomek 9.11.2010, 15:12:54

Na przyklad:
#content {
position:absolute;
left:100px;
top:100px;
width:100px;
height:100px;
overflow:auto;
}

Niestety wciąż nie mogę uzyskać tego o co mi chodzi.

Może łatwiej będzie na żywym przykładzie. Mam taki układ strony http://89.25.186.53/stos/index2.html (zresztą zrobiony wg tego kursu http://www.kurshtml.boo.pl/css/staly_szablon,szablon.html układ trzykolumnowy)
Potrzebuje aby nagłówek szablonu, menu nawigacyjne, dodatkowe informacje i stopka zostały umieszczone na stronie na stałe tak by podczas przewijania zawartości strony przesuwała się tylko sama treść strony. Całość umieszczona jest w kontenerze nadzrędnym o nazwie "top". Strona musi być wyśrodkowana niezależnie od rozdzielczości oraz od wielkości okna (wielkość strony dopasowywana jest do rozdzielczości 1024x768 i większych)

Jak zaczynam się bawić w position: fixed oraz absolute to wychodzą mi same problemy co widać tu http://89.25.186.53/stos/index3.html. Po pierwsze problem z pozycjonowaniem bloku "dodatkowe informacje" w stosunku do konteneru "top" - za chiny nie potrafię uzyskać efektu aby prawy blok był w odległości 800px od początku kontenera top tylko wciąż pozycjonuje mi względem całej strony i w momencie kiedy zmienia się rozdzielczość bądź zmniejszam same okno przeglądarki to ten element mi się źle ustawia (800px względem lewej krawędzi przeglądarki a nie kontenera top.
Pewnie wynika to z prostej przyczyny - position:fixed/absolute wyklucza używanie float: right/left.
Po drugie stopka (która powinna być doklejona do dolnej części menu) i blok z treścią ale póki nie poradzę sobie z prawym blokiem "dodatkowe informacje" to nie mam co kombinować z resztą.

Wrzucam kod który robię od nowa i jest dużo czytelniejszy niż tamten poprzedni:

CSS:

[HTML] pobierz, plaintext 
/* CSS Document */
 
html, body {
	background-color: #aff; /* ustalannie koloru tla, koloru fontu, usuwanie marginesow dla glownej strony */
	color: #000;
	margin: 0;
	padding: 0;
}
 
#top { /*blok obejmujacy - containing block*/
	width: 960px; /*calosc 780px;*/
	margin: 0 auto; /*powoduje ze blok glowny strony jest wysrodkowany*/
	margin-top: 25px; /*25px odsetpu od gory wyglada lepiej niz 0 :) */
}
 
#NAGLOWEK {
	background-color: #888;
}
 
#MENU {
	width: 200px; /*150px;*/
	float: left;
	overflow: hidden; /*w przypadku gdy zawartosc jest zbyt szeroka nastapi obciecie poprzez ukrycie za duzego elementu*/
	background-color: #ccc;
}
 
#REKLAMA {
	width: 160px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}
 
#TRESC {
	width: 600px; /* zawartosc, tresc 480px; */
	float: left;
	overflow: hidden;
	background-color: #fff;
}
 
#STOPKA {
	clear: both; /*powoduje ze stopka nie wskakuje obok menu gdy jest malo tresci*/
	width: 100%; /*eliminacja bledu IE6 w pozniejszych zbedne*/
	background-color: #888;
}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>STOS</title>
    <link rel="stylesheet" href="style2.css" type="text/css" />
  </head>
 
  <body>
 
    <div id="top">
	     <div id="NAGLOWEK">Nagłówek szablonu</div>
	     <div id="MENU">Menu nawigacyjne</div>
	     <div id="REKLAMA">Dodatkowe informacje</div>
	     <div id="TRESC">Treść strony Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat pretium nibh ac hendrerit. Etiam eleifend ipsum eu velit cursus tincidunt. Aenean metus justo, ullamcorper tempor porta non, consectetur vitae lorem. Aliquam sed est arcu. Fusce vitae sapien facilisis odio varius euismod et ut mi. In vitae nibh at nisi gravida dapibus. Nullam ultricies bibendum dapibus. Proin aliquet nisi id enim iaculis feugiat. Nullam vulputate ligula ac tellus ornare tristique. Maecenas ac turpis nulla. In orci nunc, adipiscing sit amet semper nec, consectetur nec velit. Fusce dictum leo ullamcorper ante ornare iaculis. Curabiuam aliquam velit a tortor dignissim sed dictum nunc ornare. Praesent vehicula, nunc a convallis varius, lorem diam vulputate turpis, vitae placerat nibh diam in urna. Praesent nec justo magna. Sed velit ipsum, scelerisque et posuere tempus, porttitor vitae turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque gravida felis, et tincidunt quam rutrum sit amet. Nam malesuada consequat sem, ut molestie urna feugiat vel. Maecenas accumsan tincidunt nisl, non fringilla elit malesuada adipiscing. Nulla ac purus ut ligula imperdiet dignissim nec id massa. Aenean imperdiet fringilla vehicula. Sed commodo libero a lectus imperdiet nec fermentum metus fermentum. Ut eu magna in ante euismod accumsan. Integer quis dolor quis libero condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut facilisis, neque ac venenatis eleifend, orci velit tristique nibh, sit amet pellentesque lectus velit malesuada urna. Nunc lectus neque, placerat id pretium ut, tincidunt at libero. Donec aliquet dapibus ultricies. Praesent sollicitudin mauris et purus elementum placerat. Duis laoreet tortor nec nunc tincidunt volutpat. Nullam scelerisque neque est. Duis dapibus dui at metus iaculis quis elementum lorem accumsan. Etiam quis eros non nunc vehicula fermentum et id tellus. Nulla iaculis mauris varius felis tempor at tincidunt libero adipiscing.
       </div>
	     <div id="STOPKA">Stopka serwisu</div>
    </div>
 
  </body>
</html>
[HTML] pobierz, plaintext 

Norbis, podawanie gotowców to nie jest dobry przyklad, zeby on zrozumial o co chodzi...
Topic: Jezeli sie uczyles z kurshtml.boo.pl to poczytaj o overflow. To na pewno Ci pomoze

Dzięki za pomoc.
Jeszcze jednej rzeczy do końca nie kumam. W przykładzie NORBISA gdy nadam boxowi MENU position: fixed oraz określę top: i bottom: to blok ten ładnie mi się rozciąga w pionie i dalej jego pozycja zaczyna się od krawędzi MAIN (TOP) a nie od krawędzi przeglądarki (podczas zwężania okna przeglądarki MENU przesuwa się w prawo). Natomiast dla boxa REKLAMA taki sam zabieg (z racji tego ze ma być z prawej dodatkowo nadana jest wartość left) powoduje ze pozycja od lewej liczona jest nie od MAIN (TOP) ale od lewej krawędzi okna przeglądarki co powoduje ze przy zmianie rozmiaru okna box ten ciągle wyświetlany jest o stałą, określoną liczbę pixeli od lewej krawędzi.
Wiem ze problem tkwi w tym ze MENU nie ma określanego atrybutu left a REKLAMA ma i to to powoduje inne przeliczanie odległości (dla boxa MENU od boxa MAIN (TOP) a w drugim przypadku od krawędzi przeglądarki).

Pytanie jak to prawidłowo obejść?



EDIT:
Problem wreszcie rozwiązany, podaję dla potomnych:

Wymyśliłem 2 sposoby:
1. nadać REKLAMIE szerokość 960px czyli tyle ile ma obszar MAIN, usunąć całkowicie left, następnie użyć z-index: dla tej warstwy i innych tak by REKLAMA była nad MAINem ale pod całą resztą warstw. Minus jest taki że trzeba dodatkowo pozycjonować całą zawartość boxa REKLAMA o te zbędne 800px w prawo.

2. jak już wymęczyłem pkt.1 wpadłem na genialny pomysł by użyć najzwyklejszego polecenia margin-left: 800px; co oczywiście załatwiło sprawę tym jednym poleceniem . Aż mi głupio.


EDIT II:
Wszystko fajnie ale Chrome i Safari inaczej interpretują css i niestety bloki MENU oraz REKLAMA są ustawione na stale wg PRAWEJ krawędzi przeglądarki. Może znacie jakiś hack na takie zachowanie?



A co do overflow to wydaje mi się ze nie zrozumiałeś sedna problemu. Akurat zakrywanie czy obcinanie bloków to u mnie nie stanowiło głównego problemu. Ja pytałem o to jak uzyskać efekt zawieszonych na stale menu, nagłówka i miejsca na reklamy w taki sposób by były wycentrowane i dociągane do krawędzi MAINa a nie okna przeglądarki.

W sumie Norbis naprowadził mnie na prawidłowe rozwiązanie (przy okazji stosujac fixera i overflow) i po dodaniu kilku linijek do jego kodu uzyskałem efekt który zamierzałem. Niestety w najnowszych wersjach przeglądarek tylko Firefox, IE oraz Opera wyświetlają stronę tak jak powinna wyglądać natomiast Safari i Chrome nie.
Dodałem tylko 7 istotnych linijek kodu

Dla MENU oraz REKLAMA:
top: 200px;
bottom: 25px; /* te 4 linijki rozciągają w pionie ale liczą od lewej krawędzi PRZEGLĄDARKI a nie TOPu czy MAINa*/
position: fixed;

i dodatkowo dla REKLAMA:
margin-left: 800px;

Efekt widac tu: http://89.25.186.53/stos/index5.html

Niestety na Chromie i Safari obie kolumny są jakby przyklejone na stała odległość od PRAWEJ krawędzi i podczas zmiany rozmiaru okna są nieprawidłowo przesuwane.

I akurat w tym przypadku jak najbardziej wskazana jest pomoc w postaci gotowego rozwiązania problemu bo jak przypuszczam problem nie tkwi w nieznajomości CSSa a w błędach jego interpretacji przez przeglądarki. A nie wierze ze ja pierwszy tworze taki szablon strony i ze to ja pierwszy napotkałem na taki problem - w końcu to najbardziej standardowy układ trzykolumnowy.




A co do overflow to wydaje mi się ze nie zrozumiałeś sedna problemu. Akurat zakrywanie czy obcinanie bloków to u mnie nie stanowiło głównego problemu. Ja pytałem o to jak uzyskać efekt zawieszonych na stale menu, nagłówka i miejsca na reklamy w taki sposób by były wycentrowane i dociągane do krawędzi MAINa a nie okna przeglądarki.

W sumie Norbis naprowadził mnie na prawidłowe rozwiązanie (przy okazji stosujac fixera i overflow) i po dodaniu kilku linijek do jego kodu uzyskałem efekt który zamierzałem. Niestety w najnowszych wersjach przeglądarek tylko Firefox, IE oraz Opera wyświetlają stronę tak jak powinna wyglądać natomiast Safari i Chrome nie.
Dodałem tylko 7 istotnych linijek kodu

Dla MENU oraz REKLAMA:
top: 200px;
bottom: 25px; /* te 4 linijki rozciągają w pionie ale liczą od lewej krawędzi PRZEGLĄDARKI a nie TOPu czy MAINa*/
position: fixed;

i dodatkowo dla REKLAMA:
margin-left: 800px;

Efekt widac tu: http://89.25.186.53/stos/index5.html

Niestety na Chromie i Safari obie kolumny są jakby przyklejone na stała odległość od PRAWEJ krawędzi i podczas zmiany rozmiaru okna są nieprawidłowo przesuwane.

I akurat w tym przypadku jak najbardziej wskazana jest pomoc w postaci gotowego rozwiązania problemu bo jak przypuszczam problem nie tkwi w nieznajomości CSSa a w błędach jego interpretacji przez przeglądarki. A nie wierze ze ja pierwszy tworze taki szablon strony i ze to ja pierwszy napotkałem na taki problem - w końcu to najbardziej standardowy układ trzykolumnowy.


Ten post edytował 123tomek 12.11.2010, 20:24:23