Forum PHP.pl > [CSS][HTML]Podział strony na 3 części

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]Podział strony na 3 części

marian84

27.05.2010, 20:36:18

Mam mały problem z podziałem strony na 3 części w poziomie.

Pierwszy pas wysokości 40px.
Drugi ze scrollem.
Trzeci na samym dole również o wysokości 40px.

Niezależnie od wielkości okna chciałbym by pojawiał się tylko jeden scroll.

Wygląd tak jak na obrazku.

krzysztof_kf

27.05.2010, 20:48:03

A jak chcesz usunąć pasek przewijania przeglądarki ?

r4xz

27.05.2010, 20:50:20

najpierw google: http://www.google.pl/search?hl=pl&clie...q=&gs_rfai=
http://www.w3schools.com/css/pr_pos_overflow.asp
http://mozillapl.org/forum/viewtopic.php?f...584&start=0
poniżej odp. na pytanie

overflow-y: scroll;

marian84

27.05.2010, 22:42:30

Generalnie jest tak:
Dzieląc stronę procentowo:

Kod

<div style="height:10%; width:100%">JAKIES ELEMENTY (np. obrazki)</div>
<div style="height:80%; width:100%; overflow:auto">BARDZO DUZO ELEMENTOW KTORE TRZEBA PRZEWIJAC</div>
<div style="height:10%; width:100%">JAKIES ELEMENTY (np. obrazki)</div>

Cytat

A jak chcesz usunąć pasek przewijania przeglądarki ?

W/w przyklad nie wyswietla paska przewijania przegladarki.

Wszystko jest prawie gitara, z tym, że przy pomniejszeniu okna, elementy zawarte w 2 skrajnych paskach, ktore maja po 10% wysokosci staja sie nizsze niz elementy w nich zawarte.
Chodzi o to, że skrajne pasy maja byc zawsze w tym samym miejscu a przewijany tylko srodkowy.

krzywy36

27.05.2010, 22:50:03

ja bym zastosował pozycjonowanie ustalone dla tych paskow na gorze i na dole a dla diva w srodku ustawil margin/padding, top/bottom wielkosci wlasnie tych paskow, nie jestem pewien czy zadziała tak jak trzeba ale zawsze jakiś pomysł ;>

r4xz

28.05.2010, 13:08:28

Cytat

przy pomniejszeniu okna, elementy zawarte w 2 skrajnych paskach, ktore maja po 10% wysokosci staja sie nizsze niz elementy w nich zawarte.

matematyka się kłania

masz okno np. 1000x700
zmniejszasz do 500x200
i weź teraz po 10% z jednego i drugiego i masz odp. na swój problem "wysokosci staja sie nizsze niz elementy w nich zawarte"

marian84

28.05.2010, 13:21:37

Cytat(r4xz @ 28.05.2010, 14:08:28 )

matematyka się kłania

masz okno np. 1000x700
zmniejszasz do 500x200
i weź teraz po 10% z jednego i drugiego i masz odp. na swój problem "wysokosci staja sie nizsze niz elementy w nich zawarte"

Z matematyka problemow raczej nie mam. Wiem czemu się tak zachowuje ale nie wiem jak zrobić żeby było dobrze.

tehaha

28.05.2010, 13:38:35

a nie wystarczy Tobie, żeby te paski na sztywno przypiąć i używać tylko scrolla z przeglądarki? Chodzi mi o takie coś:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#top{
width:100%;
height:40px;
background:#0066FF;
position:fixed;
top:0;
}
#middle{
width:100%;
margin-top:40px;
float:left;
height:2000px;
background:#00FF33;
}
#bottom{
width:100%;
height:40px;
background:#0066FF;
position:fixed;
bottom:0;
}
</style>
</head>
<body>
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.