šířka

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

16. 5. 2007 #1

Dobrý den,
chci se zeptat jak zjistit aktuální velikost/výšku prvku(css.. height)... mám celou stránku absolutně pozicovanou a stále mi nejde umístit patka, neboť mám proměnlivou výšku divu s textem(obsáhlé textové části jsou vyšší), proto se tedy ptám zda jde tato hodnota zjistit a samozřejmě s ní poté pracovat... umístit onu patku...
Děkuji za pomoc

Nahlásit jako SPAM

IP: ...–

Beduin

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

16. 5. 2007 #2

Jde to pomocí Javascriptu.
var vyska = document.getElementById('id_prvku').style.height;

Nahlásit jako SPAM

IP: ...–

Martin Šimko

~ Redaktor

Grafoman

16. 5. 2007 #3

To Beduin: JS je v tomhle případě zbytečnost... jde to jednodušše pomocí CSS

* {

	margin: 0;

	padding: 0;

}

html, body {

	height: 100%;

}

body {

	text-align: center;

	min-width: 760px;

	}



#main {

 	width: 760px;

	margin: 0 auto;

	text-align: left;

 	min-height: 100%;

	height: 100%;

	position: relative;

 }

 body>#main {

 	height: auto;

 }

 #header {

 	color: #fff;

	background: #d0cdcd url("head.gif") no-repeat;

	height: 183px;

 }



 #footer {

	width: 760px;

 	height: 60px;

	overflow: hidden;

	position: absolute;

	bottom: 0;

	left: 0;

	text-align: center;

 }

a pak v (x)HTML



...

<body>

<div id="main">

<div id="header"></div>

<div id="footer">

<h3>Patička webu vždy dole</h3>

</div>

</div>

</body>

...

Nahlásit jako SPAM

IP: ...–

Programujte.com redaktor
Sleduj mě na @MartinSimko

Matúš Holka 0

Duch

16. 5. 2007 #4

To Mautinek:Ja by som k tej paticke pridal este clear:both. Potom by sa uz nemali objavovat problemy s jej umiestnenim.

Nahlásit jako SPAM

IP: ...–

Martin Šimko

~ Redaktor

Grafoman

16. 5. 2007 #5

To Higher: i s tím mým kódem ala Plaváček, se bude patička zobrazovat vždy dole, v závislosti na tom, kolik bude obsahu v divu #main. funguje to, odzkoušeno ;-)

Nahlásit jako SPAM

IP: ...–

Programujte.com redaktor
Sleduj mě na @MartinSimko

froo+

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

16. 5. 2007 #6

To Mautinek: A počítal si s tim že všechny prvky v #main jsou umístěný relativně a v main neni text, text je ve specialnim divu obsah... takže se tam musí udělat ňáká změna... škoda že nevim jaká:-( Nefunguje to... Hlavička se sice drží dole ale dole ve smyslu... dole na obrazovce... ať je text jakkoliv dlouhej

Nahlásit jako SPAM

IP: ...–

Martin Šimko

~ Redaktor

Grafoman

16. 5. 2007 #7

To froo+: ano ještě si přidej identifikátor pro div, ve kterém bude text... main je relativní a patička je v něm má absolutní pozici na spodu tohoto oddílu. patička se defaultně drží na spodu stránky (100%), když je ale text delší než je vertikální rozlišení monitoru, tak se patička posune...vyzkoušej

Nahlásit jako SPAM

IP: ...–

Programujte.com redaktor
Sleduj mě na @MartinSimko

Petr Fojtík0

Věrný člen

29. 5. 2007 #8

<To Higher> v absolutně posic.divu nefunguje čistič clear:both;float:left

Raději jsem sepsal kompletní stránku (jestli tam mám něco navíc nebo špatně tak dejte vědět; taky nevím jak ji zobrazí Opera)

Vlastní obsah (~TEXT popř. vnořené bloky) je vložený do DIVu #obsah
Zvolil jsem plovoucí obsah (u normálního lze pár věcí vynechat)
Funguje to i v IE7 (v původním kódu se špatně zobrazovala patička)

<html>

<head>

<style type="text/css">

* { margin: 0; padding: 0 }

html, body { height: 100% }

body {overflow: auto;

     text-align: center;

     min-width: 760px;

}

#stranka {

     width: 760px;

     margin: 0 auto;

     text-align: left; background: #fff;

     min-height: 100%;

     height: 100%;

     position: relative;

 }

 body>#stranka {

     height: auto;

 }

 #hlavicka {

     color: #fff; text-align: center;

     background: #d0cdcd url("head.gif") no-repeat;

     height: 183px;

 }

#obsah {

     margin: 0 0 70px 0;    /* bez marginu by IE selhal - ve FF není nutný */

     padding: 0 0 70px 0;   /* výška patičky + mezera */

     overflow: hidden;

}



     #sloup_stred {float:left;margin-left:170px;width:390px; padding:15px;background:gray}

     #sloup_levy {float:left;margin-left:-590px;width:140px;padding:15px;background:yellow}

     #sloup_pravy {float:right;margin-left:-155px;width:155px;padding:15px;background:red}

     #cistic hr {display: none}

     #cistic {clear: both; float: left}



#paticka {

     overflow: hidden;

     position: absolute;

     width: 760px;

     height: 60px;

     bottom: 0;

     left: 0;

     text-align: center; background: green

}

</style>

</head>

<body>

<div id="stranka">



  <div id="hlavicka"> Hlavicka </div>



  <div id="obsah">



    <div id="sloup_stred">

      <center>MAIN TEXT</center> BEGIN 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 END.

    </div>

    <div id="sloup_levy">

      <center>SEZNAM</center> BEGIN  .....  .....  .....  .....  ENDUS

    </div>

    <div id="sloup_pravy">

      <center>ODKAZY</center>BEGIN  .....  .....  .....  .....  .....  .....  ENDUS

    </div>

    <div id="cistic"><hr /></div>

  </div>



  <div id="paticka"> Paticka </div>



</div>

</body>

</html>