3 float sloupce: nahradit 1 DIV jiným řešením

Fórum › CSS

Petr Fojtík0

Věrný člen

27. 5. 2007 #1

Do prostředního FLOAT sloupce jsem musel umístit DIV #resize s obsahem (bez něj by layout přestal fungovat).
Potřeboval bych najít nějaký způsob, jak se té hrůzy zbavit.
Díky za každý nápad.

Zajímalo by mě, jestli i Opera stránku zobrazí správně !

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

<!-- Funkčnost ověřena v IE7 a FF2 -->

<html>

<head>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1250" >

<title>Trojsloupcový layout s patičkou</title>

  <style type="text/css">

        html, body { height: 100%; padding: 0; margin: 0; overflow: auto }

        b { display:block; text-align:center; font-size: 125%; line-height: 180%;}



        #obal_ABCrP

        {

        width: 100%;

        min-height: 100%;

        _height: 100%;      /* IE */

        position: relative;

        background: #ccc;  letter-spacing: .12ex;

        }

        #ABCrP {

        min-width:666px;

        overflow: hidden;

        padding-bottom: 4em;

        }

        #reserved { clear: both; float: left }



        #P_paticka {

        position: absolute;

        width: 100%;

        bottom: 0;

        left: 0;

        }



        #obal_A { float: left; padding: 0 222px }

        #obal_B { float: left ; margin: 0 0 0 -100% ; width: 222px }

        #obal_C { float: right; margin: 0 0 0 -222px; width: 222px; }



        #A_stred { padding: 1ex ; color: white; background: black }

        #B_levy  { padding: 1ex ; color: blue }

        #C_pravy { padding: 1ex ; color: red  }

        #P_paticka {height: 4em ; color: #555 }



        #resize { overflow: hidden; height:1px; font: 8px Arial }

  </style>

</head>

<body>

<div id="obal_ABCrP">

<div id="ABCrP">

   <div id="obal_A">

    <div id="A_stred">

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

     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 id="resize">

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                            

    </div>



   </div>

   <div id="obal_B">

    <div id="B_levy">

     <b> B = levý </b>

     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

     ENDUS.

    </div>

   </div>

   <div id="obal_C">

    <div id="C_pravy">

     <b> C = pravý </b>

     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.

     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="P_paticka">

     <hr /><b> P = patička </b>

   </div>

</div>

</div>

</body>

</html>

Nahlásit jako SPAM

IP: ...–

Ondrej Juríček

~ Moderátor

Stálý člen

27. 5. 2007 #2

Nejako mi uniká rozdiel toho layoutu s tým DIVom a bez neho!? A čo vlastne chceš nakoniec docieliť?

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

28. 5. 2007 #3

Chci docílit ( a v IE7 a Firefox to funguje ), že obsah stránky zabírá přesně šířku okna (v kódu je řešena i výška stránky,patička atd. - s touto záležitostí však nesouvisí).
Když měníš velikost okna prohlížeče = zužuješ/rozšiřuješ ,tak se šířka krajních sloupců nemění, přizpůsobuje se prostřední sloupec.

Asi by bylo nejlepší kdyby sis kompletní kód otestoval (měnit velikost okna, klidně i písma -> bezchybné).
Potom ten DIV (zdánlivě zbytečný) vymaž a uvidíš sám, jak se pokazí formátování krajních sloupců
(jejich obsah začne "utíkat" doprava/doleva z vymezeného prostoru, protože šířka prostředního sloupce se přestane správně chovat).

Já jsem k tomuto způsobu kdy vnořený blok nastavuje šířku svému obalu dospěl po řadě pokusů
a tohle řešení považuju za provizorní a hlavně ilustrativní => t.j. že to JDE.
Na webu jsem se s ním nikdy nesetkal ....takže doufám, že to půjde jinak = lépe a čistěji

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

29. 5. 2007 #4

Našel jsem použitelný způsob (navíc přeformátování probíhá naprosto plynule):

#resize { display: table-cell; width:1111px}

<div id="resize"></div>

Bohužel má jeho použitelnost hranice (v IE zatím není podporován).
Hledejmež dále.

Nahlásit jako SPAM

IP: ...–

Martin Šimko

~ Redaktor

Grafoman

29. 5. 2007 #5

mrkni sem http://css.interval.cz/clanky/trisloupcovy-layout-svaty-gral/

jestli jsem to dobře pochopil, tak toto je také řešení kdy krajní sloupce si zachovávají stejnou šířku a mění se jen prostředek při změně velikosti okna..

Nahlásit jako SPAM

IP: ...–

Programujte.com redaktor
Sleduj mě na @MartinSimko

Petr Fojtík0

Věrný člen

19. 6. 2007 #6

Tušil jsem že to půjde, stačí dodat prázdný obrázek o rozměru 800x1px.
Běží to nejen v nejnovějších IE,FF a Opeře; bez úprav možno použít i IE6:

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

<!-- Funkčnost ověřena IE7,FF2,Opera9.2 (v IE6 bez strict) -->

<html><head>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=RTF-8" >

 <style type="text/css">

        b { display:block; text-align:center; font-size: 125%; line-height: 180%;}

        body { min-width: 666px; background: #ccc; letter-spacing: .12ex }



        .filler { visibility:hidden; overflow: hidden; width:100%}



        #obal_A { float: left; padding: 0 222px }

        #obal_B { float: left ; margin: 0 0 0 -100% ; width: 222px }

        #obal_C { float: right; margin: 0 0 0 -222px; width: 222px; }



        #A_stred { padding: 1ex ; color: white; background: black }

        #B_levy  { padding: 1ex ; color: blue }

        #C_pravy { padding: 1ex ; color: red  }

</style>

</head>

<body>



 <div id="obal_A">

    <div id="A_stred">

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

     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>

    <img src="resize_800x1px.gif" class="filler" />

   </div>



 <div id="obal_B">

    <div id="B_levy">

     <b> B = levý </b>

     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

     ENDUS.

    </div>

   </div>



 <div id="obal_C">

    <div id="C_pravy">

     <b> C = pravý </b>

     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.

     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>



</body>

</html>