To bukaj : Tak jsem si to pročetl. Dobral jsem se k tomu, že to rozhodně asi nebude žádná sranda a že ten, co to psal, se asi docela vyzná. :)
Takže se mi částečně s pomocí toho článku povedlo roztáhnout layout na výšku okna. Bohužel začala sabotovat patička a nevím, jak ji donutit, aby slezla dolů ke spodnímu okraji okna prohlížeče.
[IMG]http://img60.imageshack.us/img60/8797/layoutscreenshotqj4.png[/IMG]
XHTML:
<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="cs" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="default.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="block_1">
1Lákamí vůněhulás úmyval rohlivý jednovod lek ...
</div>
<div id="block_2">
2Lákamí vůněhulás úmyval rohlivý jednovod lek ...
2Lákamí vůněhulás úmyval rohlivý jednovod lek ...
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#block_1 {
float: left;
width: 300px;
background: #AAFFAA;
margin-left: 300px;
}
#block_1_content {
}
/* Kvuli starym verzim IE */
* html #block_1
{
display: inline;
}
#block_2 {
float: left;
width: 300px;
background: #CCFFCC;
margin-left: -600px;
}
#block_3 {
float: left;
width: 300px;
background: #EEFFEE;
margin-left: 0px;
}
/* IE5 MAC filter \*/
#block_1, #block_2, #block_3 {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
/* end of IE5 MAC filter */
#wrapper {
margin: auto;
width: 900px;
min-height: 100%;
/* tohle tu pak nebude, PHP je lepší než hacky */
_height: 100%;
background: #EFFFEF;
display: block;
overflow: hidden;
/* Normally a Holly-style hack height: 1% would suffice but that
causes IE 5.01 to completely collapse the wrapper - instead we float it */
float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5
sometimes (I saw it happen many moons ago) makes the width of wrapper
too small the float: none with the comment is ignored by 5.01, 5.5 and
above see it and carry on about their business. It's probably fine to just
remove it, but it's left here just in case that many moons ago problem
rears its head again */
float/**/: none;
display: inline-block;
}
/* easy clearing */
#wrapper:after {
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE5 MAC filter \*/
#wrapper {
display: block;
}
/* end easy clearing */
#header {
display: block;
height: 30px;
background: #77FF77;
}
#footer
{
clear: both;
display: block;
height: 30px;
background: #77FF77;
}
/* Safari needs this - otherwise the ghost overflow, though painted
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output {
position: relative;
z-index: 1000;
}
CSS je skoro celé vytažené z toho článku a mírně upravené.
Ještě by mě zajímalo, jak je nejlepší testovat weby na kompatibilitu v různých prohlížečích? Například jestli lze mít nainstalovánu více jak jednu verzi IE jinak, než přes virtuální pc.
TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Návštěvník
Nahlásit jako SPAM
IP: 89.203.136.–
Věrný člen
Boss
Stálý člen
Newbie
Zjistit počet nových příspěvků
