[OKNO:100%]=[25% vč.BORDER]+[75% vč.BORDER] Experts only

Fórum › CSS

Petr Fojtík0

Věrný člen

24. 5. 2007 #1

Dva bloky (výšky zadány procentualně) vyplní okno - pokud mají nulový margin,pading a border tak to jde snadno:

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

<html>

<head>

  <style type="text/css" media="all">

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

      #prvni {height: 25%; background:yellow}

      #druhy {height: 75%; background:gray}

      #prvni,#druhy {overflow:hidden; margin:0; padding:0 }      

  </style>

</head>

<body>

	<div id='prvni'> <h1>Prvni blok</h1> </div>

	<div id='druhy'> <h1>Druhy blok</h1> </div>

</body>

</html>

JENŽE: potřebuju aby bloky měly rámečky (šířka v pixelech -> pro zjednodušení BORDER 4px u obou bloků)
Nemůžu přijít jak na to jen s CSS - pls pomozte.

Tohle funguje - pokud máte zapnutý JS:

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

<html>

<head>

<script type="text/javascript">



function nastav(dH) {

  function resize_div(id,pH) {

  var div = document.getElementById(id);

  div.style.height=Math.floor(h*pH/100)+"px"

  }

var h=document.body.offsetHeight-4*dH; /* Celkem: 2*2=4 vodorovné BORDERy */

resize_div("prvni",25);

resize_div("druhy",75);

}

function resize_on(border) {

window.onresize=function(){nastav(border)};

window.onresize();

}

</script>



<style type="text/css" media="all">

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

      #prvni {height: 25%; background:yellow}

      #druhy {height: 75%; background:gray}

      #prvni,#druhy {overflow:hidden; margin:0; padding:0 }

      #prvni,#druhy {border: 4px solid red }  

/* bez javascriptu součet výšek přeteče 100%, objeví se svislý scrollbar */

    </style>

</head>

<body>

  <div id='prvni'> 

    <h1>Prvni blok <a href="#" onclick='resize_on(4)'><Zapnout JAVASCRIPT></a></h1> 

  </div>

  <div id='druhy'> 

    <h1>Druhy blok</h1> 

  </div>

</body>

</html>

Nahlásit jako SPAM

IP: ...–

Izzy

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

28. 5. 2007 #2

Buďto matrjoškou:

body {margin:0;padding:0;border:0;height:100%;}
#prvni {height:25%;}
#prvni2 {/* border, padding atd. */}
#druhy {height:75%;}
#druhy2 {/* border, padding atd. */}

<div id="prvni">
<div id="prvni2">
obsah
</div>
</div>
<div id="druhy">
<div id="druhy2">
obsah
</div>
</div>

A nebo jednodušeji - nastavením box-modelu:

* {-moz-box-sizing:border-box;box-sizing:border-box;}

Nahlásit jako SPAM

IP: ...–

Petr Fojtík0

Věrný člen

28. 5. 2007 #3

Díky zkouším to.
ALE matrjoška nefuní.
- zkus si spustit tohle (přesně dle tvého návodu):

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

<HTML>

<HEAD>

<STYLE type="text/css">



 body {margin:0;padding:0;border:0;height:100%;}

#prvni {height:25%;}

#prvni2 {margin:0; padding:0; border: solid 4px red; background:yellow}

#druhy {height:75%;}

#druhy2 {margin:0; padding:0; border: solid 4px red; background:gray}



</STYLE>

</HEAD>

<BODY>



<div id="prvni">

<div id="prvni2">

</div>

</div>



<div id="druhy">

<div id="druhy2">

</div>

</div>



</BODY>

</HTML>

V červených rámečcích žluté (75%) a šedé (25%) pozadí (t.j. stejné atributy jako v té stránce s javascriptem - zobraz si ji; tak by to mělo vypadat )

Bohužel výsledkem je jeden vodorovný 16pixelů široký červený pruh.
Když dám pryč ten DOCTYPE/STRICT vyjdou dva 8pixelové červené pruhy.

Ještě to zkusím s IE a pak se mrknu na ten moz-box (neznám!)

Nahlásit jako SPAM

IP: ...–

Prog.0

Věrný člen

5. 6. 2007 #4

Problem je, ze ak nastavis objektu 25% tak on ich aj ma. Ale ked mu pridas border, tych ten rozmer 25% je iba vnutorny a nijako to uz nevypocitas (25% + 2x4px -- sa neda)
Riesenie je v pouziti position absolute a left:0 right:0 top:0 bottom:0. Najprv dva divy rozdiahnes na 25%,75% a potom do nich stcis dalsie, ktorych position urcis pomocou left, right,top, bottom. Potom, ked vnutornym divom das aj border, ostane vsetko ako ma byt...

nepodporuje to ie5 (myslim ze right a bottom mu vela nehovori) ale niesom si isty...

<!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">

  <head>

  </head>

<body>

  <div id="prvy"><div class="inner">



  </div></div>

  <div id="druhy"><div class="inner">



  </div></div>

</body>

html,body

{

  height: 100%;

  margin: 0;

}



#prvy

{

  position: absolute;

  left: 0;width:100%;

  top: 0;

  height: 25%;

  background: #f00;

}

#druhy

{

  position: absolute;

  left: 0; top: 25%;

  width:100%;height: 75%;

  background: #00f;

}



.inner { position: absolute; left:0;top:0;right:0;bottom:0;}

#prvy  .inner { border: solid 4px #ff0; }

#druhy .inner { border: solid 4px #0ff; }

Nahlásit jako SPAM

IP: ...–

Prog.

Petr Fojtík0

Věrný člen

5. 6. 2007 #5

Konečně....(se někdo ozval), díky
Já si to vyzkouším, mě absolutní pozicování nenapadlo z důvodu že abs.bloky jsou mimo základní vrstvu, ve které se mění při RESIZE WINDOW rozměry prvků.

Nahlásit jako SPAM

IP: ...–

Prog.0

Věrný člen

5. 6. 2007 #6

Myslim ze by to nemalo robit problem, staci ze objektu v ktorom to robis das position=relative a absolutne pozicie sa budu pocitat od neho.

Pred tym som velmi necital ten tvoj prvy kod, teraz som to pozrel a tiez je to pouzitelne. Je jedno ako rozdelis tu stranku na 25 a 75 ci uz absolutne, ci relativne, hlavne je dovnutra tych objektov strcit dalsie divy s poziciou urcenou left-right-top-bottom. Aby si takto mohol poziciovat, musis pre tie vnutorne pouzit position=absolute. A aby sa tie pozicie nepocitali od window, ale od parent objektu, musis parent-u zadefinovat position=relative alebo absolute...
Potom mozes na vnutorne divy pouzivat aj marginy a bordery, vsetko bude vo vnutri. Problem je nepodpora IE5, mozno aj inych, ja som to testoval len na FF, O,IE7 a bezalo to OK. Ak zistis rozlisne chovanie v inych browseroch, pls daj znac ;-)

Nahlásit jako SPAM

IP: ...–

Prog.

Petr Fojtík0

Věrný člen

5. 6. 2007 #7

Klaním se - po úpravě html+body je to v pořádku i v IE (o Opeře později)
Po změně hlavního bloku na relativní se použití neomezuje jen na BODY, ale na libovolný blok- pokud má nastavenu výšku.

<!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">

<head>

<style>

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



  #dvojice div[id] { position: relative; background: #ff0 }

            .inner { position: absolute; left:0; top:0; right:0; bottom:0 }



            #prvy  { height: 25% }

            #druhy { height: 75% }



            .inner { border: solid 4px blue }

     #prvy  .inner { border-bottom-width: 2px }

     #druhy .inner { border-top-width: 2px  }



</style>

</head>

<body id="dvojice">



  <div id="prvy"><div class="inner">



  </div></div>

  <div id="druhy"><div class="inner">



  </div></div>



</body>

</html>