šířka – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

šířka – CSS – Fórum – Programujte.comšířka – CSS – Fórum – Programujte.com

 

froo+
~ Anonymní uživatel
23 příspěvků
16. 5. 2007   #1
-
0
-

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
-
0
-

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

Nahlásit jako SPAM
IP: ...–
Martin Šimko
~ Redaktor
0
Grafoman
16. 5. 2007   #3
-
0
-

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
16. 5. 2007   #4
-
0
-

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
0
Grafoman
16. 5. 2007   #5
-
0
-

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
-
0
-

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
0
Grafoman
16. 5. 2007   #7
-
0
-

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
-
0
-

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

Nahlásit jako SPAM
IP: ...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 1 host

Podobná vlákna

100% šířka — založil Ondra

šířka selekce v px — založil Petroff

Sirka tabulky — založil Ondřej Šplíchal

šírka webstránky — založil Dávid

Šířka textu v php — založil HoHo

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý