| Autor | Zpráva | ||
|---|---|---|---|
| bob99 Profil |
#1 · Zasláno: 27. 11. 2012, 11:04:10
Zdravím,
snažím se upravit tohle řešení tak, aby prostřední 3 sloupce nebyly roztažený na celou šířku, ale jen na určitou (např. 1000px) s tím, že header a footer budou na celou šířku stránky a footer vždy úplně dole. Trochu jsem to upravil, zbývá dořešit pokud to půjde aby prostřední sloupce byly roztažený až dolu k patičce. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html
xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
* {
margin:0;
padding:0;
border:none;
z-index:0;
}
html, body {
height:100%;
}
html {
overflow-y: scroll;
}
body {
font-family:arial, sans-serif;
color:#000;
font-size:82%;
background:#CCC;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
line-height:100px;
background:#000;
color: #FFF;
font-weight:bold;
text-align:center;
}
#clearheader {
height:100px;
}
#outer{
min-height:100%;
margin-left:100px;
margin-right:100px;
margin-bottom:-100px;
background: yellow;
}
#left, #right {
position:relative;
width:200px;
text-align:center;
}
#left {
float:left;
z-index:100;
/*margin-left:-1px;*/
/*left:50px;*/
background: blue;
}
#right {
float:right;
margin-right:0px;
/*right:50px;*/
background: green;
}
#middle {
width:658px;
float:left;
position:relative;
z-index:1;
/*margin:0 -1px;*/
background: pink;
}
p {
padding:15px 15px 0 15px;
}
#clearfooter {
clear:both;
height:115px;
}
#footer {
width:100%;
clear:both;
height:100px;
line-height:100px;
background-color:#000;
color: #FFF;
font-weight:bold;
text-align:center;
position:relative;
}
/* @end Sticky Footer */
</style>
</head>
<body>
<div id="header"> Header Here
</div>
<div id="outer">
<div id="clearheader">
</div>
<div id="left"><p>left sidebar here</p><p>left sidebar here</p><p>left sidebar here</p><p>left sidebar here</p><p>left sidebar here</p><p>left sidebar here</p><p>left sidebar here</p>
</div>
<div id="middle">
<p>Guzzled snakeoil, tar, than wuz had has heffer catfish feud. Skedaddled, co-op outhouse mule y'all showed far. Broke highway cold cooked feud driveway mush hee-haw old.</p><p>Gal took been has moonshine where neighbor's farm. Throwed dogs hold neighbor's poker burnin', gimmie. Buy give spell what jail plug-nickel java cain't no jig havin' cain't go. Down had fetched, caught hollarin' havin' pigs in. Hogs caboose stole dumb if, gonna dogs penny grandpa jail fussin' cow outhouse work. Kinfolk shed mashed, smokin' shack nothin' whiskey boobtube pick-up, hee-haw hospitality fancy. Plumb shiney commencin' pickled drunk fixin' water, skedaddled gospel, jail work rottgut.</p><p>Wrestlin' cowpoke penny git fried where hold than hospitality pickled gonna. Fightin' bankrupt road rottgut no heapin' bankrupt wash rodeo, hospitality. Cow hobo ails firewood tarnation clan creosote his squalor me mobilehome, bible, overalls. Spell hospitality, cabin drive what pot fat fence poor hayseed sam-hell hairy firewood, liniment what. Lyin', backwoods liar, hillbilly buckshot coonskin beat jiggly fit.</p>
<p>Guzzled snakeoil, tar, than wuz had has heffer catfish feud. Skedaddled, co-op outhouse mule y'all showed far. Broke highway cold cooked feud driveway mush Hogs caboose stole dumb if, gonna dogs penny grandpa jail fussin' cow outhouse work. Kinfolk shed mashed, smokin' shack nothin' whiskey boobtube pick-up, hee-haw hospitality fancy. Plumb shiney commencin' pickled drunk fixin' water, skedaddled gospel, jail work rottgut.</p><p>Wrestlin' cowpoke penny git fried where hold than hospitality pickled gonna. Fightin' bankrupt road rottgut no heapin' bankrupt wash rodeo, hospitality. Cow hobo ails firewood tarnation clan creosote his squalor me mobilehome, bible, overalls. Spell hospitality, cabin drive what pot fat fence poor hayseed sam-hell hairy firewood, liniment what. Lyin', backwoods liar, hillbilly buckshot coonskin beat jiggly fit.</p>
</div>
<div id="right">
<p>right sidebar here</p><p>right sidebar here</p><p>right sidebar here</p><p>right sidebar here</p><p>right sidebar here</p><p>right sidebar here</p><p>right sidebar here</p>
</div>
<div id="clearfooter">
</div>
</div>
<div id="footer"> Footer Here</div>
</body>
</html> |
||
| Davex Profil |
#2 · Zasláno: 28. 11. 2012, 23:57:12
Stejně vysoké sloupce se obvykle simulují opakujícím se obrázkem na pozadí.
• http://wellstyled.com/css-2col-fluid-layout.html • http://teststranek.kvalitne.cz/vyska-sloupcu1/ |
||
|
Časová prodleva: 11 let
|
|||
0