Jak omezit šířku prostředního sloupce (stopnout zužování)

Fórum › CSS

Petr Fojtík0

Věrný člen

21. 5. 2007 #1

Konečně jsem dal dohromady kostru klasického 3sloupcového rozložení s konstantní šířkou krajních a do 100% dopočítanou prostředního sloupce.
1. Potřebuju, aby se při zúžení sloupce na řekněme 200px zúžování zastavilo (aby obsah vodorovně scrolloval).
Rád bych aby kód fungoval ve FF i IE.
2. Ještě mi vadí v IE scrollbar vykreslený i když ho netřeba.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

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

<title>Trojsloupcový layout</title>

<style type="text/css">

        html, body

        { height: 100%; padding: 0; margin: 0;

        }

        #obal_stranky {

          width: 100%;

          background: #ccc;

          min-height: 100%;

          _height: 100%; /* IE */

          position: relative;

         }

        #main {

         padding: 0 0 3em 0;

         overflow: hidden;

        }

        #reserve {

          clear: both;

          float: left;

        }

        #paticka {

         position: absolute;

         width: 100%;

         height: 2.5em;

         bottom: 0;

         left: 0;

         font-size: 120%;

         }



        #bAc {

          padding: 0 0 0 222px;

          margin: 0 0 0 -222px;

          width: 100%;

          float: left;

          display:inline;

          }

        #obal_A {

          margin: 0 222px

        }

        #obal_B {

          margin: 0 0 0 -100%;

          width: 222px;

          float: left;

          display:inline;

        }

        #obal_C {

          margin: 0 0 0 -222px;

          width: 222px;

          float: right;

          display:inline;

        }

        #A_stredni {color: white; padding: .5ex 0 0 .5ex ; background: black

         }

        #B_levy  {color: blue; width: 100%; padding: .5ex 0 0 .5ex ;

         }

        #C_pravy {color: red; padding: .5ex 0 0 .5ex ;

         }

      </style>

</head>

<body>

<div id="obal_stranky">

 <div id="main">

  <div id="bAc">

   <div id="obal_A">

    <div id="A_stredni">

    <center>A = střední</center>

    BEGINUM dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Morbi vitae mi luctus enim convallis ENDUS.

    </div>

   </div>

  </div>

   <div id="obal_B">

    <div id="B_levy">

    <center>B = levý</center>

    BEGINUM dolor sit amet, consectetuer adipiscing elit.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congue. Sed eget turpis.

    Donec tempor mauris in ligula. Suspendisse ac dolor.

    Morbi vitae mi luctus enim convallis ENDUS.

    </div>

   </div>

   <div id="obal_C">

    <div id="C_pravy">

    <center>C = pravý</center>

    BEGINUM dolor sit amet, consectetuer adipiscing elit.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congue. Sed eget turpis.

    Donec tempor mauris in ligula. Suspendisse ac dolor.

    Morbi vitae mi luctus enim convallis ENDUS.

    </div>

   </div>

   <div id="reserve">

   </div>

   <div id="paticka">

     <hr /><center>Paticka: BEGINUM dolor sit amet ENDUS.</center>

   </div>

 </div>

</div>

</body>

</html>

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

28. 5. 2007 #2

To hlavní jsem dal dokupy:

[Ad 1] Zjednodušení a omezení šířky prostř.sloupce

#obal_stranky {

          min-width:666px;       /* 666-222-222=222px je minimum pro sloupec A */

          width: 100%;

          background: #ccc;

          min-height: 100%;

          _height: 100%; /* IE */

          position: relative;

         }

        #bAc {

          width: 100%;

          float: left;

        }

        #obal_A {

          margin: 0 222px

        }

        #obal_B {

          margin: 0 0 0 -100%;

          width: 222px;

          float: left;

        }

        #obal_C {

          margin: 0 0 0 -222px;

          width: 222px;

          float: right;

        }

[Ad 2]
V IE se zabrání zobrazení posuvníku: html, body {overflow: hidden; height: 100%; padding: 0; margin: 0 }

Zbyl poslední problém:
Když zúžím okno pod 666px takže se objeví vodorovný posuvník, tak se automaticky současně zobrazí i svislý posuvník
(což zbytečně ubere volný prostor pro obsah) - dalo by se tomu nějak zabránit?

Ještě mě štve v IE, že při roztahování okna na výšku se co chvíli patička "zasekne" místo aby se držela spodního okraje stránky
(přitom stačí udělat RELOAD stránky, a patička klesne dolů na své místo !?!)

Nahlásit jako SPAM

IP: ...–

Higher

~ Anonymní uživatel
~ 1 příspěvek

28. 5. 2007 #3

To Petroff:no problemom pri tomto rieseni je nevalidita kodu pokial by si chcel mat kod validny musis sa vyhnut podtrzitkovemu hacku

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

28. 5. 2007 #4

<To: Higher> Díky, _height vynechám
A ještě napravím hodnotu overflow, kterou jsem spletl. Teď už všechno funguje shodně jak v IE, tak v FF.
Uvedu kompletní kód, kdyby mi doň chtěl někdo vnést úpravu pro ten nešťastný V scrollbar ve FF ( IE se chová korektně)
nebo vysvětlení, proč se zasekává patička v IE ( ve FF je OK.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

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

<title>Trojsloupcový layout</title>

<style type="text/css">

        html, body

        { height: 100%; padding: 0; margin: 0; overflow: auto;

        }

        #obal_stranky {

          min-width:666px;       /* 666-222-222=222px je minimum pro sloupec A */

          width: 100%;

          background: #ccc;

          min-height: 100%;

          position: relative;

         }

        #main {

         padding: 0 0 3em 0;

         overflow: hidden;

        }

        #reserve {

          clear: both;

          float: left;

        }

        #paticka {

         position: absolute;

         width: 100%;

         height: 2.5em;

         bottom: 0;

         left: 0;

         font-size: 120%;

         }



        #bAc {

          width: 100%;

          float: left;

          }

        #obal_A {

          margin: 0 222px

        }

        #obal_B {

          margin: 0 0 0 -100%;

          width: 222px;

          float: left;

        }

        #obal_C {

          margin: 0 0 0 -222px;

          width: 222px;

          float: right;

        }



        #A_stredni { padding: .5ex 0 0 .5ex ; color: white; background: black }

        #B_levy    { padding: .5ex 0 0 .5ex ; color: blue }

        #C_pravy   { padding: .5ex 0 0 .5ex ; color: red }



      </style>

</head>

<body>

<div id="obal_stranky">

 <div id="main">

  <div id="bAc">

   <div id="obal_A">

    <div id="A_stredni">

    <center>A = střední</center>

    BEGINUM dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Morbi vitae mi luctus enim convallis ENDUS.

    </div>

   </div>

  </div>

   <div id="obal_B">

    <div id="B_levy">

    <center>B = levý</center>

    BEGINUM dolor sit amet, consectetuer adipiscing elit.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congue. Sed eget turpis.

    Donec tempor mauris in ligula. Suspendisse ac dolor.

    Morbi vitae mi luctus enim convallis ENDUS.

    </div>

   </div>

   <div id="obal_C">

    <div id="C_pravy">

    <center>C = pravý</center>

    BEGINUM dolor sit amet, consectetuer adipiscing elit.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Duis at felis a erat lobortis congue. Sed eget turpis.

    Donec tempor mauris in ligula. Suspendisse ac dolor.

    Morbi vitae mi luctus enim convallis ENDUS.

    </div>

   </div>

   <div id="reserve">

   </div>

   <div id="paticka">

     <hr /><center>Paticka: BEGINUM dolor sit amet ENDUS.</center>

   </div>

 </div>

</div>

</body>

</html>

Nahlásit jako SPAM

IP: ...–

Lukáš Churý

~ Šéfredaktor

Hero

Kultivátor příspěvků ve starém fóru – 5.22 % z celku

28. 5. 2007 #5

pokud použiješ vlastnost _height v inline zápisu, tak výsledný kód html JE validní a výsledný CSS soubor také, pač je uložen v inline zápisu :)

Nahlásit jako SPAM

IP: ...–

Guitar Hero Master, Project führer & zdejší čaroděj.
Sleduj mě na twitteru – @lukaschury.

Květoš

~ Anonymní uživatel
~ 31 příspěvků

28. 5. 2007 #6

To Petroff:Hm, ale v Opeře se objevují vlevo zdvojené posuvníky..?

Nahlásit jako SPAM

IP: ...–

Květoš

~ Anonymní uživatel
~ 31 příspěvků

28. 5. 2007 #7

To Květoš:Opravuji , v Opeře jsou VPRAVO zdvojené posuvníky!

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

29. 5. 2007 #8

Díky , Operu nemám a vím, že má své odlišnosti, jen jsem nevěděl jaké.
Holt už zase posuvníkový problém.(mám pocit že jde o zdvojení v prvcích HTML,BODY)

Nahlásit jako SPAM

IP: ...–

← Zpět na seznam vláken ← Zpět do Fóra