[OKNO:100%]=[25% vč.BORDER]+[75% vč.BORDER] Experts only – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

[OKNO:100%]=[25% vč.BORDER]+[75% vč.BORDER] Experts only – CSS – Fórum – Programujte.com[OKNO:100%]=[25% vč.BORDER]+[75% vč.BORDER] Experts only – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Petr Fojtík0
Věrný člen
24. 5. 2007   #1
-
0
-

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: ...–
Reklama
Reklama
Izzy
~ Anonymní uživatel
1 příspěvek
28. 5. 2007   #2
-
0
-

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

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

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

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

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

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>
Takhle snad půjde vyřešit obdobný problém ( % height zadané IFRAMy místo DIVy na celé okno ) viz.http://programujte.com/forum.php?akce=prispevek&id=4575&sekce=jak-odstranit-h+v-scrollbar

Ještě jednou díky. Dobré nápady by se mi hodily - ze všech dotazů hozených přes palubu (ostatními!)(nejen na tomto foru)
o tyhle moc usiluju:
http://programujte.com/forum.php?akce=prispevek&id=4715&sekce=3-float-sloupce:-nahradit-1-div-jinym-resenim
http://programujte.com/forum.php?akce=prispevek&id=4455&sekce=ne!zarovnane-radky-s-label-input-button-(problem-u-ie)

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, 11 hostů

Podobná vlákna

Border — založil bugisoft

Double border in IE — založil meloun

Border nefunguje — založil to_jsem_ja

Border u iframe — založil Jakub

Border obrazku v odkaze — založil hrach

 

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