Autor Zpráva
ABAKUS
Profil
#1 · Zasláno: 6. 12. 2005, 21:09:19
Odpovědět Citovat
Dobrý den,
potýkám se s vytvoření CSS Layoutu viz. obrázek.
Hlavní probléb cítím právě v prostřední - hlavní části, která má zaujímat všechno místo mezi hlavičkou a patičkou a zároveň by měl layout zabíral vždy celý prostor stránky.
Díky za radu.
habendorf
Profil
#2 · Zasláno: 6. 12. 2005, 21:21:39
Odpovědět Citovat
Hm, a jak se to má chovat v okně s výškou < 200px ?
ABAKUS
Profil
#3 · Zasláno: 6. 12. 2005, 21:23:46
Odpovědět Citovat
Tak takovou variantu můžete klidně pustit z hlavy :-)
Mingan
Profil
#4 · Zasláno: 6. 12. 2005, 21:28:09
Odpovědět Citovat
Zdá se,ž e chceš mít fixovanou hlavčku a patičku. U patky to myslím není nejlepší nápad...

Jednoduše potřebuješ tři divy. Horní a spodní mají position: fixed; (top: 0; resp. bottom: 0;), šířku 100% a takový čičurádičky. Mezi nimi (na stejné úrovni v objektovém stromu) je třetí - hlavní - div. Tomu nastavíš padding-top: 150px; padding-bottom: 50px; to způsobí, že obsah nebude zabíhat pod ostatní divy.

Mingan
ABAKUS
Profil
#5 · Zasláno: 8. 12. 2005, 04:05:50
Odpovědět Citovat
Vyzkoušel jsem ale to to mi to dělá není přesně ono.. možná jsem to jen špatně zpravoval.. nevím? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

  <head>

    <meta http-equiv="Content-Language" content="cs">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="description" content="Popisek stránky, description (objevuje se občas jako popisek v Google)">

    <style type="text/css">



div.header {

	position: fixed;

	top: 0px;

	height: 150;

	width: 100%;

	background-color: Red;

}



div.foother {

	position: fixed;

	bottom: 0;

	height: 50px;

	width: 100%;

	background-color: Yellow;



}



div.main {

	padding-top: 150px;

	padding-bottom: 50px

	height: 100%;

	overflow: auto;

  background-color: InactiveCaptionText;

}



    </style>



</head>

<body>



<div class="header"></div>

<div class="main">

<br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p >Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus </p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><b r><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p>

</div>

<div class="foother"></div>



<body>

</html>



Zde je ukázka toho co by to mělo dělat, ale za použití tabulek, které nechci použít! 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

  <head>

    <meta http-equiv="Content-Language" content="cs">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="description" content="Popisek stránky, description (objevuje se občas jako popisek v Google)">

    <style type="text/css">

      div#main {

      overflow: auto;

      background-color: InactiveCaptionText;

      height: 100%;

      }      

    </style>

  </head>

  <body>

    <table width="100%" height="100%" border="1">

      <thead>

        <tr height=150px>

          <td>

            hlavicka

            </th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>

            <div id="main">

            <br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p >Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus </p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><b r><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p>

            </div>

          </td>

        </tr>

        <tfoot>

          <tr height=50px>

            <td>

              paticka

            </td>

          </tr>

        </tfoot>

    </table>

</html>


Jinak děkuji!..
Fred
Profil
#6 · Zasláno: 8. 12. 2005, 04:41:55
Odpovědět Citovat
Vůbec netuším co je cílem, jde o ty bordery?
Tohle zobrazí naprosto to samé jako ta tvoje ukázka.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Popisek stránky, description (objevuje se občas jako popisek v Google)">
<style type="text/css">
#main{overflow:auto;background:#a2a1a1;height:100%;}
div{border:1px outset #b2b2b2;padding:2px;}
div div{border:1px inset #000;}
.obal{}
.hl{height:150px;margin-bottom:2px;}
.pt{height:50px;margin-top:2px;}
</style>
</head>
<body>
<div class="obal">
<div class="hl">
hlavicka
</div>
<div id="main">
<br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p >Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus </p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><b r><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p><br><p>Pokus</p>
</div>
<div class="pt">
paticka
</div>
</div>
</html>
ABAKUS
Profil
#7 · Zasláno: 8. 12. 2005, 15:29:31
Odpovědět Citovat
Ano zpětně jak se na to dívám co jsem dal jako ukazku co to má dělat tak je to špatně. asi jsi tam dal špatný kód.. omlouvam se.

CÍLEM je: Aby stranka mela pevnou hlavičku a patičku a aby se na boku stránky neoběvila skrolovací liška!!!

skrolovat by mělo jít POUZE v prostrední hlavní šásti stránky.
Plaváček
Profil
#8 · Zasláno: 8. 12. 2005, 17:17:12
Odpovědět Citovat
Obávám se, že se nadřeš a mám pocit, že něco podobného v CSS nevyřešíš. Ke zmíněnému účelu jsou určené frames (rámce), tak je použij.
habendorf
Profil
#9 · Zasláno: 8. 12. 2005, 18:13:57
Odpovědět Citovat
Jj, buď frames, nebo JS.
Fred
Profil
#10 · Zasláno: 8. 12. 2005, 18:40:08
Odpovědět Citovat
Aha, to jsou ale dost nespolehlivý opičárny
http://tutorials.alsacreations.com/modeles/4zones_scroll_fluide.htm
http://www.cssplay.co.uk/layouts/basics2.html
http://www.cssplay.co.uk/layouts/fixit.html
Fred
Profil
#11 · Zasláno: 8. 12. 2005, 18:52:14
Odpovědět Citovat
Tady máš ještě jeden http://www.456bereastreet.com/lab/cssframes/

Můžeš googlovat css frames, nebo fixed footer header scrollable content css
ABAKUS
Profil
#12 · Zasláno: 8. 12. 2005, 23:31:42
Odpovědět Citovat
Hmm.. tak o tohle si mi jednalo. Podívám se na to, ale padle tech odkazů bych to mělo vyřešit to co potřebuji.
Tak zatím fakt díky!!
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0